Design SurfaceView in Android - android

This is the view of Scanner activity. I am using SurfaceView and an image button with a 48dip png image icon. I want to design it more. It may not be upto the level of the second screenshot which is of SuperBeam app.
Here is the xml code of my Activity.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="com.abhayjatindoshi.encryptorcode.qrlogin.Scanner">
<SurfaceView
android:layout_width="match_parent"
android:layout_height="400dip"
android:layout_weight="70"
android:id="#+id/camera_view"
android:layout_alignParentLeft="true"
/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/scanImage"
android:layout_below="#+id/camera_view"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:src="#drawable/ic_image_black_48dp"
android:layout_alignRight="#+id/camera_view"
android:layout_alignEnd="#+id/camera_view" />
</RelativeLayout>

Understand the design to create your layout.
Put your surface view also in frame layout i forget to add it.

Related

Android Studio does not show layoutpreview

I am trying to create a layout in Android Studio but the preview of the layout is not showing at all. There is no errour though.
How can i get it to work properly? I will add a screenshot.
Preview not loading the layout
Thanks in advance.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/content_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.example.diceout.MainActivity"
tools:showIn="#layout/activity_main">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Let's Play!" />
<Button
android:id="#+id/rollButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="155dp"
android:layout_marginStart="155dp"
android:layout_marginTop="25dp"
android:text="Roll" />
</RelativeLayout>
TextView
#ivan franken Could you post your #layout/activity_main Xml code. I saw this line tools:showIn:#layout/activity_main
in code on your content_main.xml. I tested it in my project and got similiar result to yours. But when I deleted it, it worked fine.

FastSearchListView [Custom ListView with search function] is taking fullscreen of the view

I have implemented a FastSearchListView following instructions in this link . I have to implement a ListView and a Button. But this ListView is occupying the whole view and my Button is not displayed. I have tried even putting both widgets inside Linear Layout and applied weights. Nothing works.
Here is my xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent" android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin"
tools:context="in.nuventure.com.wedding.InviteActivityFragment">
<FastSearchListView android:id="#+id/invite_listView"
android:layout_width="match_parent"
android:layout_below="#id/contact_invitefriends_textView"
android:layout_height="match_parent"
android:divider="#null"/>
<TextView
android:id="#+id/invite_send_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:paddingTop="#dimen/buttons_padding_vertical"
android:paddingBottom="#dimen/buttons_padding_vertical"
android:paddingRight="#dimen/buttons_padding_horizontal"
android:paddingLeft="#dimen/buttons_padding_horizontal"
android:background="#drawable/button_green"
android:textColor="#android:color/white"
android:textSize="#dimen/sub_textSize"
android:text="#string/invite_friends"/>
</RelativeLayout>

Image button in relative layout android not showing the image

I am unable to see the image of the Image button when the image is in relative layout. If i use a different layout, image is working fine.
My layout is as follows:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin">
<android.support.v7.widget.RecyclerView
android:id="#+id/cardList"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
<ImageButton
android:layout_width="56dp"
android:layout_height="56dp"
android:src="#drawable/plus"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginRight="16dp"
android:layout_marginBottom="16dp"
android:id="#+id/fab"
android:elevation="1dp"
/>
</RelativeLayout>
the same image if i set in some other layout things work fine. Can any one give me some pointers where to look out.
There are no error or warnings in the log.
The actual png image is as follows:
If you want to implement floating button, the better way will be using existing library:
Add this line on your build.gradle dependencises:
compile 'com.getbase:floatingactionbutton:1.3.0'
And change your layout to:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin">
<android.support.v7.widget.RecyclerView
android:id="#+id/cardList"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
<com.getbase.floatingactionbutton.AddFloatingActionButton
android:id="#+id/common_ring_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="10dp"
android:layout_marginEnd="10dp"
android:layout_marginRight="10dp"/>
</RelativeLayout>
if you want to customise your floating button for example change colour, add this line as RelativeLayout attribute :
xmlns:fab="http://schemas.android.com/apk/res-auto"
and add the attribute below to the AddFloatingActionButton xml
fab:fab_colorNormal="#color/floating_button_bg"
fab:fab_colorPressed="#color/floating_button_bg_pressed"

This LinearLayout layout or its RelativeLayout parent is useless; transfer the background attribute to the other view warning

not sure what I am doing wrong, nothing complicated 2 buttons inside a LinearLayout and I get
"This LinearLayout layout or its RelativeLayout parent is useless; transfer the background attribute to the other view" warning....here is the code, is boggling my mind
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:background="#drawable/GCBS_Template_BKGND"
tools:context=".MainActivity" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<Button
android:id="#+id/Partfinder"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Part Finder" />
<Button
android:id="#+id/Heaterfinder"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Heater Finder" />
</LinearLayout>
If you just want to show two buttons vertically - there's no need to use the LinearLayout in this case. This is increasing your view level hierarchy- that's why the warning is shown.
You can simply use android:layout_below="#+id/Partfinder" to your 2nd button to achieve what you want.
In Eclipse Juno, you can Project's Properties -> Android Lint Preferences. Now, Look for UselessParent and set it's severity to ignore or click Ignore All.
But at the end, Your problem is your RelativeLayout only have one child. You can remove it like that:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:background="#drawable/GCBS_Template_BKGND"
tools:context=".MainActivity" >
<Button
android:id="#+id/Partfinder"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Part Finder" />
<Button
android:id="#+id/Heaterfinder"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Heater Finder" />
</LinearLayout>
The warning is very clear as per your xml layout creation. For just adding 2 buttons you may not need both Relative & Linear Layout but only one of the layouts is more than enough. So, by deleting the Linear Layout in your XML should help you proceed further like below.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:background="#drawable/GCBS_Template_BKGND"
tools:context=".MainActivity" >
<Button
android:id="#+id/Partfinder"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Part Finder" />
<Button
android:id="#+id/Heaterfinder"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Heater Finder" />
</RelativeLayout>
After this just drag and drop the buttons in layout view of the xml and position them wherever you want the buttons. That should put the XML script automatically in your XML file.

Android: tile bitmap in ListView item

I am trying to add a sidebar image to some of the items in a ListView.
The image should occupy the full height of the item and be repeated vertically if necessary.
Stretching the image is not an option.
After trying a few things I ended up modifying the code found here.
Unfortunately, it does not seem to work within a ListView and the image is not repeated:
Main layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<ListView
android:id="#+id/list"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</RelativeLayout>
ListView item layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#drawable/background"
android:orientation="vertical">
<ImageView
android:id="#+id/listitem_sidebar"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#drawable/sidebar"
android:visibility="invisible"/>
</LinearLayout>
<TextView
android:id="#+id/textview"
android:layout_width="wrap_content"
android:layout_height="400dp"
android:text="Test"
android:layout_alignParentRight="true"/>
</RelativeLayout>
Background drawable:
<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/sidebar"
android:tileMode="repeat" />
Background image:
Setting the sidebar globally for the whole ListView is not an option as I am using different View types for the items in my production code.
Edit: formatting
Alight, finally got it to work just the way I wanted. I added a transparent View below the TextView to force the ListView to measure the item's height and do a layout pass. Then I used the invisible View as an anchor for my side bar.
The only file that needed to be modified was listview_item.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/textview"
android:layout_width="wrap_content"
android:layout_height="400dp"
android:layout_alignParentRight="true"
android:text="Test"/>
<View
android:id="#+id/dummy"
android:layout_below="#id/textview"
android:layout_width="match_parent"
android:layout_height="0dp"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#drawable/background"
android:layout_alignParentTop="true"
android:layout_above="#id/dummy"
android:orientation="vertical">
<ImageView
android:id="#+id/listitem_sidebar"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#drawable/sidebar"
android:visibility="invisible"/>
</LinearLayout>
</RelativeLayout>
Here's a screenshot of the result:
I removed the code for my previous workaround as it was more of a hack than anything and didn't work as well as this.

Categories

Resources