Develop Reference

Using a RelativeLayout to split a layout evenly

I have a Listview where each listview item looks like this!
The ListViewItem is a RelativeLayout. Now I am having problem in creating the two split-screen buttons. Currently I'm doing it like this.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:layout_height="fill_parent" android:layout_width="fill_parent"
android:layout_below="#+id/ReviewText">
<RelativeLayout
android:layout_weight="1"
android:layout_height="fill_parent" android:layout_width="0dp"
android:onClick="likeClicked"
android:clickable="true" >
<!-- SOME CODE -->
</RelativeLayout>
<RelativeLayout
android:layout_weight="1"
android:layout_height="fill_parent" android:layout_width="0dp"
android:onClick="likeClicked"
android:clickable="true" >
<!-- SOME CODE -->
</RelativeLayout>
</LinearLayout>
<RelativeLayout>
This is working perfectly fine, but the android dev documentation here says that
Furthermore, nesting several instances of LinearLayout that use the
layout_weight parameter can be especially expensive as each child
needs to be measured twice. This is particularly important when the
layout is inflated repeatedly, such as when used in a ListView or
GridView.
Can I improve my code for performance. If yes, How? Is there any other way to have two buttons split evenly without using LinearLayout?

In order to minimize layout nesting, so to optimize performances, I'd write a layout (which does take advantage of the layout's relativity) like this one:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<View
android:id="#+id/dummy"
android:layout_width="1dp"
android:layout_height="1dp"
android:layout_centerHorizontal="true"
android:visibility="invisible"
/>
<Button
android:id="#+id/btnLeft"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_toLeftOf="#id/dummy"
android:onClick="likeClicked"
android:clickable="true"
/>
<Button
android:id="#+id/btnRite"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_toRightOf="#id/dummy"
android:onClick="likeClicked"
android:clickable="true"
/>
<RelativeLayout>
I put a dummy View which is aligned to the center, then 2 buttons which I align to the left and to the right side of it.

For a simple layout like your's LinearLayout's are perfect choice. The only thing to be wary about is nesting layout weight's inside a view whose parent already has a layout-weight assigned. This is perfectly ok:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
While this is not:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1" > <!-- nesting this way is bad for performance -->
android:text="Button" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
</Button>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
<!-- this is ok -->
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
</LinearLayout>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<place top item layout here>
<LinearLayout
android:layout_height="fill_parent" android:layout_width="fill_parent"
android:orientation="horizontal"
android:weightSum="2">
<RelativeLayout
android:layout_height="fill_parent" android:layout_width="0dp"
android:onClick="likeClicked"
android:clickable="true"
android:layout_weight="1"
>
<!-- SOME CODE -->
</RelativeLayout>
<RelativeLayout
android:layout_weight="1"
android:layout_height="fill_parent" android:layout_width="0dp"
android:onClick="likeClicked"
android:clickable="true" >
<!-- SOME CODE -->
</RelativeLayout>
</LinearLayout>
</LinearLayout>

Hope , The performance can be improved if you follow the listed points
First thins don't use much XML code when you need something dynamically
instead of creating the 2 relative layouts in XML , create a class where it extends Linear layout/Relative layout
add the views which you want to show in the list item to the above layout
Measure the height and width dynamical with in the same class
And make sure the layout is parametrized where you can pass the content dynamically
Finally , you can inflate the created view , Using getview method of an adapter**
Refer the following link
Dynamic listview content loader

Need xml layout for the below screen

I am working on creating a page with a layout with header "Account Information" (ref.. image). Followed by a table and i need to populate the table dynamically after fetching from server but not able to do so. Below is the .xml file and attached is the image:
<LinearLayout
android:id="#+id/header"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#layout/header_gradient" >
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="10dip"
android:layout_weight="0.20"
android:gravity="center_horizontal"
android:padding="15dp"
android:text="#string/my_account_header_text"
android:textColor="#ffffff"
android:textSize="24sp" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#ffffff" >
<RelativeLayout
android:id="#+id/my_activity_layout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#ffffff" >
<TextView
android:id="#+id/my_acc_component"
android:layout_width="158dp"
android:layout_height="wrap_content"
android:text="#string/my_account_component"
android:textColor="#372c24"
android:textSize="#dimen/login_credentials_txt" />
<TextView
android:id="#+id/my_acc_details"
android:layout_width="158dp"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/my_acc_component"
android:text="#string/my_account_details"
android:textColor="#372c24"
android:textSize="#dimen/login_credentials_txt" />
</RelativeLayout>
</LinearLayout>
</LinearLayout>

This may not be your issue, since I don't know what the problem is yet, but there is an issue that I see. When using weight in a LinearLayout with a vertical orientation your height should be 0dp. Similarly, if it is a horizontal orientation then width should be 0dp. So for example you would change your layouts to
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#ffffff" >
and
<RelativeLayout
android:id="#+id/my_activity_layout"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#ffffff" >
Also, this is definitely not whatever your problem is but fill_parent is deprecated and match_parent should be used instead.

*Actually, there is a problem with the weight property... if you are working with weight then you better use weight_sum property in the LinearLayout and give your textView or other view an percentage depending on your giver weight_sum value in the parent layout...
However,I think what you are looking for is something like this:*
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center|top"
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/header"
android:background="#drawable/image" // if you want your title/header to be upon the image. Or just create another ImageView for that image
/>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:weightSum="100"
android:orientation="horizontal"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:margin_Top="50dp"
android:weight="50"
android:id="#+id/my_acc_component"
android:text="your text"
android:textSize="your Size"
/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:margin_Top="50dp"
android:weight="50"
android:id="#+id/my_acc_details"
android:text="your text"
android:textSize="your Size"
/>
</LinearLayout>
</RelativeLayout>

Wrap buttons ontop and in middle using Relative Layout

I would like to have a layout which is similar to
Kinda feel guilty because I recently just asked a question about layouts but I had no idea that I needed to do this(nor did I know it was this hard), I have researched into View Layouts and I've tried use layout.toRightOf etc etc. I have the left/right arrows, I just need to add the up and down buttons
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:game_view="http://schemas.android.com/apk/res/pap.crowslanding"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<FrameLayout
android:id="#+id/flayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#+id/button1"
android:orientation="vertical" >
<pap.crowslanding.GameView
android:id="#+id/game_view"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
game_view:ballDiam="#dimen/ballDiam"
game_view:cellWidth="#dimen/cellWidth"
game_view:pixelHeight="#dimen/pixelHeight"
game_view:pixelWidth="#dimen/pixelWidth" />
<pap.crowslanding.MazeBall
android:id="#+id/mazeball"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:visibility="invisible"
game_view:ballDiam="#dimen/ballDiam"
game_view:cellWidth="#dimen/cellWidth" />
</FrameLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="horizontal" >
<Button
android:id="#+id/button1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/right" >
</Button>
<Button
android:id="#+id/button2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/down" />
</LinearLayout>
</RelativeLayout>
So essentially, just some insight on how I could add the up and down buttons within the same layout as to avoid layouts drawn onto my activity and overlapping

It seems that all your button images have the same height, so why not just use a TableLayout?
Keep the top-left and top-right cells empty, and in the other cells put your buttons.
Code (ommitting variables):
<TableLayout>
<TableRow>
<View />
<Button>...</Button>
<View />
</TableRow>
<TableRow>
<Button>...</Button>
<Button>...</Button>
<Button>...</Button>
</TableRow>
</TableLayout>

ListView inside LinearLayout breaking out (Android)

Been struggling with this for a while now. I have a layout XML consisting of various LinearLayouts, with separate weighting. The end result looks like this..
Dont mind the colors, its just to see the break points..Anyway, below the Terminal/Origin etc LinearLayout is a ListView which is populated using a custom adapter. The data loads fine, but then the listView "breaks out" of the LinearLayout, and takes up most of the page
(Dont mind the colors, its just to see the break points..)
ie. it flows over the View above and below.
My XML is as follows:
<?xml version="1.0" encoding="utf-8"?>
<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"
tools:ignore="HardcodedText" >
<RelativeLayout
android:id="#+id/navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.2"
android:background="#FF0000"
android:gravity="right" >
<Button
android:id="#+id/update"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:onClick="getFlightInfo"
android:text="Refresh" />
</RelativeLayout>
<LinearLayout
android:id="#+id/table_header"
android:layout_width="match_parent"
android:layout_height="0px"
android:layout_weight="0.4"
android:background="#FFFFFF"
android:weightSum="1" >
<TextView
android:id="#+id/header_cell1"
android:layout_width="0px"
android:layout_height="fill_parent"
android:layout_weight="#string/cell_1_weight"
android:gravity="center_vertical"
android:paddingLeft="5dp"
android:paddingRight="12dp"
android:text="#string/table_header_terminal"
android:textSize="11dp" />
<TextView
android:id="#+id/header_cell2"
android:layout_width="0px"
android:layout_height="fill_parent"
android:layout_weight="#string/cell_2_weight"
android:gravity="center_vertical"
android:paddingRight="12dp"
android:text="#string/table_header_origin"
android:textSize="11dp" />
<TextView
android:id="#+id/header_cell3"
android:layout_width="0px"
android:layout_height="fill_parent"
android:layout_weight="#string/cell_3_weight"
android:gravity="center_vertical"
android:paddingRight="12dp"
android:text="#string/table_header_flight"
android:textSize="11dp" />
<TextView
android:id="#+id/header_cell4"
android:layout_width="0px"
android:layout_height="fill_parent"
android:layout_weight="#string/cell_4_weight"
android:gravity="center_vertical"
android:paddingRight="12dp"
android:text="#string/table_header_scheduled"
android:textSize="11dp" />
<TextView
android:id="#+id/header_cell5"
android:layout_width="0px"
android:layout_height="fill_parent"
android:layout_weight="#string/cell_5_weight"
android:gravity="center_vertical"
android:paddingRight="12dp"
android:text="#string/table_header_status"
android:textSize="11dp" />
</LinearLayout>
<LinearLayout
android:id="#+id/table_list_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="3"
android:background="#FFFFFF"
android:orientation="vertical" >
<ListView
android:id="#+id/list_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
</ListView>
</LinearLayout>
<LinearLayout
android:id="#+id/filter"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#00FF00" />
</LinearLayout>
I may be missing something glaring, but for the life of me, I cant see it. Can anyone help?
Thanks a million..

This is because you have kept LinearLayout's height(the one wrapping listview) "wrap_content".Fixing its size to some dip would solve your problem.
Also make listview's height "fill_parent" then.
EDIT :
try this way:
...
<ListView
android:id="#+id/list_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
</ListView>
in upper two layouts,you user 0.2 and 0.4 as weight but in lower two layouts,you users 3 and 1...try it former way and see,if it can help you.also try making height of LinearLayout(the one wrapping listview) to 0dip.

Maybe it is late, but I could help someone.
<?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:orientation="vertical">
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ff0000">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="20dp"
android:text="Content 1" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#00ff00">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="20dp"
android:text="Content 2" />
</LinearLayout>
<ListView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#id/linearLayout2"
android:layout_below="#id/linearLayout1"
android:background="#00f0f0"></ListView>
Result:

Ok.. after consulting this post I came up with a fix
Remove the LinearLayout outside the ListView, its superfluous.
Add a height of '0px' (which I've found around the web) to the ListView ensures it obeys the android:weight parameter properly.
Hope this helps.

Remove the weight of id/filter.
Let the ListView have a weight of 1 with fill_parent height.
Remove the listView's immediate parent.
One other thing you missed, is to set the weightSum=sum_of all_child_weight in your root. That should fix the problem.

Layout views with dynamic width

I have a layout with two children one after another, like this:
|<view1><text1> |
<view1> may change it's width. So, I want it increases while both views stay on the screen:
|<really_wide_view1><text1> |
But when there is no more space at right, it stops:
|<reeeeeeeeeeeally_wide_vi...><text1>|
Is there easy way to do this?
Now I try to use this layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#FF00aa00" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="loooooooooooooooooooooooooooooooooooong text" />
</LinearLayout>
<TextView
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#FFaa0000"
android:minWidth="30dp"
android:singleLine="true"
android:text="test" />
</LinearLayout>
But result is the same:

I am able to solve your problem using the following code (a modified version of yours):
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#FF00aa00" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong text"
/>
</LinearLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="0"
android:background="#FFaa0000"
android:text="testtest" />
</LinearLayout>
Here is a screenshot of the same:
Let me know if the above piece of code solves the problem.

Try to give both views inside the RelativeLayout and make the views layout width and as a wrap_content and give orientation as horizontal. I think it will solve your problem.

Here is solution with TableLayout, but it looks dirty.
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:shrinkColumns="0" >
<TableRow>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</TableRow>
</TableLayout>
It works for any length of both text views.