Develop Reference

How to layout a custom listviewitem with variable textview and two buttons on one line

I've created a custom listview. All works fine though I struggle with the layout of the listitem.
The idea is to have a textview which can have a variable length (multilines is possible) and two buttons next to the textview all on one line.
This is what I have:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="16sp"
android:layout_weight=".80" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="A"
android:layout_weight=".10"
android:layout_toRightOf="#id/textView1" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="B"
android:layout_weight=".10"
android:layout_toRightOf="#id/button1" />
This works fine though my problem is that the textview fills out the parent and pushes the buttons of the screen. (when I have a short text the buttons are vissible)
So basically, what I need is a 80% wide textview aligned to the left and two 10% wide buttons aligned to the right. Can anyone guide me in the right direction?
Thanks

You can't use layout_weight with RelativeLayout. Try this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/textView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textSize="16sp"
android:layout_weight="1" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="A" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="B" />
</LinearLayout>

Change to LinearLayout. You cannot use layout_weight with RelativeLayout.
Good Luck

layout element control in Android

I want to layout 3 element Button , TextView , Button on the bar like this
[Button1] --- TextView --- [Button2]
2 button are always anchor fixed in left and right screen(padding 4dp) ,and TextView is center (change width depend on screen size),They should be apply for all screen size(not scaled in larger screen). How can I do it??

It would look something like this.-
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true" />
</RelativeLayout>
Notice that you still need to set other properties such as texts, ...

You can use LinearLayout with android:weightSum
Try Like this, By using android:weightSum, you can divide how much space for Button and textView.. And it will automatically adjust in all the density devices.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightSum="10" >
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:layout_margin="4dp"
android:layout_weight="3"
android:text="LeftButton" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:padding="4dp"
android:layout_weight="4"
android:gravity="center"
android:text="Center TextView text" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_margin="4dp"
android:layout_weight="3"
android:text="Right Button" />
</LinearLayout>

android:weightSum work fine for me, I resolved all my troubles :)

Make an element fill all the free space in wrap_content-based layout

I have a vertical layout: 2 text field and a horizontal bar of buttons:
<?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="wrap_content"
android:layout_height="wrap_content"
android:background="#ff00ff00"
android:orientation="vertical"
android:padding="4dp" >
<EditText
android:id="#+id/et_email"
android:layout_width="fill_parent"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:background="#ff00ffff"
android:inputType="textEmailAddress" >
</EditText>
<EditText
android:id="#+id/et_comment"
android:layout_width="fill_parent"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:background="#ff00ffff"
android:inputType="textMultiLine"
android:maxLines="5"
android:minLines="5" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:id="#+id/btn_send"
android:layout_weight="0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="OK" />
<Button
android:id="#+id/btn_show"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Some very long text" />
<Button
android:id="#+id/btn_cancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Cancel" />
</LinearLayout>
</LinearLayout>
I want the button bar to have wrap_content size policy (can't even have them fixed size because this app has different localizations). I also want the text fields to have the same width as the button box. Here's how the above xml looks in designer (Eclipse + ADT) with platform 17 selected (and how I want it to look). Colors are just for easy debugging:
And here's how it looks on an Android 4.1 tablet:
This layout is used as a custom layout to a Dialog. No manipulations has been done to the Dialog apart from setting content and title.
Interesting fact: it looks exactly as I want it to (and same as ADT designer shows) on Android 3.1 tablet. But not on 4.1.
How can I achieve the desired layout?

You might want to use RelativeLayout to accomplish what you're looking for. Try changing your xml to the following:
<?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="wrap_content"
android:background="#ff00ff00"
android:padding="4dp" >
<EditText
android:id="#+id/et_email"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/buttonbar"
android:layout_alignRight="#+id/buttonbar"
android:layout_marginTop="2dp"
android:background="#ff00ffff"
android:inputType="textEmailAddress" >
</EditText>
<EditText
android:id="#+id/et_comment"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/buttonbar"
android:layout_alignRight="#+id/buttonbar"
android:layout_below="#+id/et_email"
android:layout_marginTop="2dp"
android:background="#ff00ffff"
android:inputType="textMultiLine"
android:maxLines="5"
android:minLines="5" />
<RelativeLayout
android:id="#+id/buttonbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/et_comment" >
<Button
android:id="#+id/btn_send"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/btn_show"
android:layout_alignTop="#+id/btn_show"
android:layout_toLeftOf="#+id/btn_show"
android:text="OK" />
<Button
android:id="#+id/btn_show"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="Some very long text" />
<Button
android:id="#+id/btn_cancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/btn_show"
android:layout_alignTop="#+id/btn_show"
android:layout_toRightOf="#+id/btn_show"
android:text="Cancel" />
</RelativeLayout>
</RelativeLayout>

This seems silly but it seems to work. Try putting in a nested layout. Change your outer layout width/height to fill parent. Then, inside that make another linear layout with all of your views and such. Give the inner LinearLayout the wrap_content values and that should do it. There's got to be a better way to do it than this but I can't think of it at the moment.

android two linearlayouts with equivalent partition via android:layout_weight not in line

I want to display three different values allocated to two different headers, in other words a first header with one value and a second one with two values
My approach is to split the "header linear layout" 40/60 and the "values linear layout" 40/30/30. In order to not display the text beginning at the border, I put everywhere an android:layout_marginLeft="15dp" in, so finally it should remain proportional.
In my XML, I declare the following:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_weight="4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:text="#string/txt_price_chf"
/>
<TextView
android:layout_weight="6"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:text="#string/txt_price_offshore_chf"
/>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView android:id="#+id/tv_price_ch"
android:layout_weight="4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:text="Value1"
/>
<TextView android:id="#+id/tv_price_off_chf"
android:layout_weight="3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:text="Value2"
/>
<TextView android:id="#+id/tv_price_off_eur"
android:layout_weight="3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:text="Value3"
/>
</LinearLayout>
The result is following output:
Why are the "Price offshore:"-TextView and the "Value2"-TextView not in line? Note that "Price offshore" is saved in my strings.xml, there is no error like a whitespace or something. First I thought, it's caused by the android:layout_marginLeft="15dp", but
how I understood it the "dp" is a relative value to a specific
resolution (so the split-off by android:layout_weigth should not
effect this) and
if I remove the margins, they are still not in
line.
Has anyone an idea? Do I overlook something obvious?

<TextView
android:layout_weight="4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:layout_marginRight="-10dp"
android:text="#string/txt_price_chf"
/>
This will work for you...

Not really something you should be doing with a LinearLayout though.
I suggest using a RelativeLayout, there you can just say that those two should align.
Without digging into details in this particular case, it can be either marginRight, padding etc or just simply a side effect of the non monospaced font.

Or another alternative is this:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_weight=".60"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="txt_price_chf" />
<TextView
android:id="#+id/tv_price_ch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Value1" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_weight=".40"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="txt_price_offshore_chf" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/tv_price_off_chf"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Value2" />
<TextView
android:id="#+id/tv_price_off_eur"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Value3" />
</LinearLayout>
</LinearLayout>

Android RelativeLayout make Edit Texts take all space

I have the following layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/aussie_bg_big" >
<ImageView
android:id="#+id/titleImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:contentDescription="#null"
android:src="#drawable/aussie_title_small" />
<ImageView
android:id="#+id/clearButtonOutput"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/titleImage"
android:layout_alignParentRight="true"
android:contentDescription="#null"
android:src="#drawable/aussie_clear" />
<EditText
android:id="#+id/OutputText"
android:layout_width="fill_parent"
android:layout_height="100dp"
android:layout_above="#+id/clearButtonOutput"
android:layout_alignParentLeft="true"
android:background="#drawable/textbox"
android:ems="10"
android:gravity="top"
android:inputType="textMultiLine"
android:textColor="#ffffff" />
<ImageView
android:id="#+id/translateButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/OutputText"
android:layout_centerHorizontal="true"
android:clickable="true"
android:contentDescription="#null"
android:src="#drawable/translatebuttonselector" />
<ImageView
android:id="#+id/ClearButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/translateButton"
android:layout_alignParentRight="true"
android:contentDescription="#null"
android:src="#drawable/aussie_clear" />
<EditText
android:id="#+id/InputText"
android:layout_width="fill_parent"
android:layout_height="100dp"
android:layout_above="#+id/ClearButton"
android:layout_alignParentLeft="true"
android:background="#drawable/textbox"
android:ems="10"
android:gravity="top"
android:inputType="textMultiLine"
android:singleLine="false"
android:textColor="#ffffff" />
What I'd like to do is:
-> Keep the "imageBottom" imageview on the BOTTOM of the activity at all times, centered horizontally.
-> Keep the "imageCenter" imageview on the center of the activity at all times, centered horizontally.
-> Keep "imageBelowInputText" imageview below the InputText edittext which is located ABOVE imageCenter, aligned to the right.
-> Keep "imageBelowOutputText" imageview below the OutputText edittext which is located BETWEEN imageCenter and imageBottom, aligned to the right.
It works fine so far but I'd also like for the edittext views to occupy ALL of the remaining space EQUALLY. Providing different versions of the layout for small, normal, large, x-large screens worked fine, considering I hardcoded each edittext's size in dpi. However, on some layouts, it still looks a bit wrong and misplaced (misaligned). That's why I'm looking for a solution to place the ImageViews accordingly first, and then let the two EditTexts take all the remaining space EQUALLY (important).
So far, I couldn't think of a 100% correct solution. Can you help me out? Thanks!

Notice the two edittexts have their layout_height set to "0dp" and layout_weight set to "1"
XML
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/LinearLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:paddingTop="15dp"
android:orientation="vertical" >
<EditText
android:id="#+id/editText1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:text="Clear" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="100dp"
android:layout_gravity="center"
android:text="Bear" />
<EditText
android:id="#+id/editText1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:text="Clear" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="100dp"
android:layout_gravity="center"
android:text="Speaking Aussie" />
</LinearLayout>

Try giving each of the EditText views a height of 0dp, and a layout_weight value of 1. Give it a shot and let me know if that works.