Develop Reference

Working with android screen layout

I'm struggling to come to grips with android layouts, firstly can anyone point me to a good basic tutorial on working with the layouts on screen. I understand the concepts when i read the google layout dev ref, but come to practice and I don't quite get it.
I have the below layout that I am trying to replicate in an Android screen, I believe I need to nest different layouts within others, but I can't quite get what I have to look like this:
http://screencast.com/t/GFw7OSzvbmX
Any suggestions on code out there similar and also the tutorials to get me going would be great thx

(Black - LinearLayout Vertical )
(Red - LinearLayout Horizontal )
(Green - ImageView )
(Yellow - TextView )
(Brown - Button )
Visualize like this first . Then write your xml .

Use TextView,Button,ImageView as child and use LinearLayout as parent with weight which handle area allocation child content :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="10dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.40">
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:scaleType="fitXY"
android:src="#drawable/ic_launcher"/>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="textview"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="textview"
android:layout_marginTop="5dp"/>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.60"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="textview"
android:layout_marginTop="5dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="textview"
android:layout_marginTop="5dp"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp">
<TextView
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="textview"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button"/>
</LinearLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="textview"
android:layout_marginTop="5dp"/>
</LinearLayout>
</LinearLayout>

Android Rotation Hide some Widgets

this my xml file of an activity. It works well except in the case of rotation. In my mobile, if AutoRotation is enabled, then the screen is also rotated. During rotation it doesn't show the Button named "Exit". I've tried to scroll to bottom, but I can't able to scroll.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/scrollView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:scrollbars="none" >
<AbsoluteLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/ll_buttons"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical|center_horizontal"
android:layout_below="#+id/slogon"
android:layout_marginTop="50dip">
<ImageView
android:id="#+id/image1"
android:layout_width="match_parent"
android:layout_height="481dp"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:background="#drawable/ic_launcher" />
</LinearLayout>
<Button android:layout_height="wrap_content" android:textColor="#FF0000" android:textStyle="bold" android:id="#+id/button2" android:layout_width="wrap_content" android:text="EXISTINGFARMER" android:layout_x="161dip" android:layout_y="157dip"></Button>
<Button android:layout_height="wrap_content" android:textColor="#FF0000" android:textStyle="bold" android:id="#+id/button1" android:layout_width="wrap_content" android:text="NEW FARMER" android:layout_x="34dip" android:layout_y="157dip"></Button>
<Button android:layout_height="wrap_content" android:textColor="#FF0000" android:textStyle="bold" android:id="#+id/btn_exit" android:layout_width="100dip" android:text="EXIT" android:layout_x="105dip" android:layout_y="233dip"></Button>
<TextView android:layout_height="wrap_content" android:textStyle="bold" android:textSize="40dip" android:layout_width="wrap_content" android:textColor="#FFEA00" android:id="#+id/heading" android:text="S.V.Sugar Mills" android:layout_x="29dip" android:layout_y="14dip"></TextView>
<TextView
android:id="#+id/subheading"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="38dp"
android:layout_y="97dp"
android:text="The New and Old Farmer Details."
android:textColor="#0000A0"
android:textSize="15dip"
android:textStyle="bold" />
</AbsoluteLayout>
</ScrollView>
I didn't understand the mistake, I someone know how to scroll during rotation, please help help me. Thanks in advance

First of all you have to put your all the widgets in scrollview if you want to support scroll in portrait or landscape mode.
Please use scrollview . Scrollview supports only one direct child. So you need to take relative layout or linear layout as child of scrollview, put all your widget controll in that child layout.
Look here for scrollview tutorial.

How to place a button at a position little above the bottom in android

I need to place a button at the bottom of screen, leaving some space below it.
In other words I am using these two attributes for my button -
android:layout_alignParentBottom="true"
android:layout_marginBottom="20dp"
but the margin attribute wont work when I use alignParentBottom and the button sticks at the bottom only. Please tell me how to place it a little above the bottom .
Here's the xml
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:background="#drawable/board"
android:layout_marginLeft="10dp"
android:layout_marginRight="60dp"
android:layout_marginTop="15dp"
android:layout_marginBottom="10dp">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="Type of Lesion"
android:textColor="#8B0A50"
android:layout_marginTop="40dp"
android:id="#+id/disease_listheader_textview"
android:drawableBottom="#drawable/underline"/>
<ListView
android:id="#+id/disease_listview"
android:layout_below="#id/disease_listheader_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:divider="#drawable/divider"
android:layout_marginLeft="40dp"
android:layout_marginBottom="50dp"
android:cacheColorHint="#00000000"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/disease_search_button"
android:layout_centerHorizontal="true"
android:background="#drawable/disease_search_btn"
android:layout_alignParentBottom="true"
android:layout_marginBottom="20dp"/>
</RelativeLayout>

just make change in relative layout height attribute value to fillparent like
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
.................../>
hope this help you

Can you try this?
Replace the Button tag with the one mentioned below. I am trying to wrap the button in another dummy layout
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
android:paddingBottom="20dp">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/disease_search_button"
android:background="#drawable/disease_search_btn"
android:layout_marginBottom="20dp"/>
</LinearLayout>

This runs just the way you wanted
<RelativeLayout android:id="#+id/relativeLayout1" android:layout_width="match_parent" android:layout_height="fill_parent">
<Button android:text="Button" android:id="#+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_marginBottom="20dip"></Button>
</RelativeLayout>

I'm having a frustrating problem with ScrollView

I'm working on a UI that has a bunch of images and buttons, but since they're too long to fit on one screen, I decided to put it in a ScrollView. Problem is, once I do that, everything disappears except my first image. Here's my code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/bg"
android:baselineAligned="true"
android:orientation="vertical">
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/scrollView1">
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView1"
android:src="#drawable/header3000"
android:layout_gravity="center"
android:layout_marginTop="10dip"></ImageView>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView2"
android:src="#drawable/websitetuneup"
android:layout_gravity="center_horizontal"></ImageView>
<Button
android:layout_width="wrap_content"
android:text="Read More" android:id="#+id/readmore_w1"
android:layout_height="wrap_content"
android:layout_marginLeft="15dip"></Button>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView3"
android:src="#drawable/inboundmarketing"
android:layout_marginLeft="15dip"></ImageView>
<Button
android:layout_width="wrap_content"
android:text="Read More" android:id="#+id/readmore_w2"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_marginRight="15dip"></Button>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView4"
android:src="#drawable/socialmedia"
android:layout_marginLeft="15dip"></ImageView>
<Button
android:layout_width="wrap_content"
android:text="Read More" android:id="#+id/readmore_w3"
android:layout_height="wrap_content"
android:layout_marginLeft="15dip"></Button>
</LinearLayout>
</ScrollView>
</LinearLayout>
Here's what it looks like
Notice how the first image appears fine, but all the rest are minimized into a small portion to the right of the image.
How should I fix this? Thanks in advance for your help, and sorry for the long post

The orientation of second LinearLayout is not defined. It seems it is takes as horizontal by default. Try the veritical one.

Android: How to make all elements inside LinearLayout same size?

I would like to create a dialog to display a video title and tags. Below text I would like to add buttons View, Edit and Delete and make these elements same size. Does anyone know how to modify .xml layout file in order to make elements inside LinearView same size?
The current layout file looks like this:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/txtTitle" android:text="[Title]" >
</TextView>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/txtTags"
android:text="[Tags]" >
</TextView>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/btnPlay"
android:text="View">
</Button>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/btnEdit"
android:text="Edit">
</Button>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/btnDelete"
android:text="Delete">
</Button>
</LinearLayout>
</LinearLayout>
I would appreciate if anyone could show the solution by modifying the pasted file content.
Thanks!

Use android:layout_width="0px" and android:layout_weight="1" on the three Buttons. That says the buttons should take up no more than 0 pixels, but the three of them should split any extra space between them. That should give you the visual effect you wish.

Another way is to make android:layout_width="fill_parent" and android:layout_weight="1" this will also works fine!!!

Use LinearLayout with your desired weightSum and create elements with equal layout_weight. Here is an example ...
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="5">
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/ic_share_white_36dp"/>
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/ic_search_white_36dp"/>
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/ic_event_note_white_36dp"/>
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/ic_brush_white_36dp"/>
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/ic_menu_white_36dp"/>
</LinearLayout>
So, the weight sum of all elements is 5. Here is the screenshot ...
Note that, Google Material Design icons are used. Hope this is helpful.