Develop Reference

how to ensure the min space between two views in Relativelayout

I have two TextViews in a RelativeLayout. One to the left and the other one to the right. Both of them shows a string which may become very long. I want to make a min space of 10dp between two TextViews and let the right one have ellipse if no enough space.
I have below layout definition which does not work. The right TextView may cover the first one if it is very lone.
<RelativeLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerVertical="true"
android:layout_marginLeft="3dp">
<TextView
android:id="#+id/left_one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="7dp"
android:gravity="bottom"
android:text=""/>
<TextView
android:id="#+id/right_one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="8dp"
android:layout_alignParentRight="true"
android:layout_marginRight="10dp"
android:gravity="center"
android:maxLines="1"
android:ellipsize="end"
/>
</RelativeLayout>
The only way I can do is to set the max length to the right one. But this is not what I want because if the left one is short, i want the right one to be longer than the maxWidth.
And when I added "toRightOf" this work but the textView width becomes too long for a short string shown in it. That is not acceptable

add Add android:layout_toRightOf="#+id/left_one in right_one textview
remove android:layout_alignParentRight="true" from right_one textview
replace android:layout_marginRight="10dp" by android:layout_marginLeft="10dp" in right_one textview
For right_one textview to remain right if it is short replace right_one textview portion by
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginLeft="10dp"
android:layout_alignParentBottom="true"
android:layout_toRightOf="#+id/left_one>
<TextView
android:id="#+id/right_one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:gravity="center"
android:maxLines="1"
android:ellipsize="end"
/>
</RelativeLayout>

You can do like this.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="1">
<TextView
android:id="#+id/left_one"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="7dp"
android:gravity="bottom"
android:layout_weight="0.3"
android:text="Left text "/>
<TextView
android:id="#+id/right_one"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:gravity="center"
android:maxLines="1"
android:ellipsize="end"
android:layout_weight="0.7"
android:layout_marginLeft="10dp"
android:text="edkjfcnrdskjvkjrdfvsxsdcndsjkvnjksdnvkj
sdjkvbksdbvkj zskjvn jsdnbjkvfdbde"/>
</LinearLayout>

Add:
android:layout_toLeftOf="#+id/right_one"
android:layout_marginRight="10dp"
to your left_one TextView.

Align to largest element in a RelativeLayout

I'm designing a simple layout using a RelativeLayout, i would like to avoid nested LinearLayouts or other nested viewgroups.
There are 9 views, it all shows like this:
I don't know how to correctly align seekbars to avoid text overlapping or wrapping lines.
Aligning from right: rgb images width is fixed, seekbars width (all the same) depends on the labels width, i want it to depend on the largest one.
How to know what label to refer to with android:layout_toRightOf or what?
The above image also shows two behaviours i'd like to avoid:
--aligning refers to first label (#id/text1)--
2nd row: android:layout_alignRight missing make a longer text overlap.
3rd row: android:layout_alignRight is present but longer text wraps.
Here's what i would like:
Should i measure the TextViews width to find the largest one (programmatically, of course...)?
Any idea for an XML solution?
Here's the code:
<RelativeLayout
android:id="#+id/addon"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#color/semi_transparent_background_controls"
android:visibility="visible" >
<TextView
android:id="#+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/seek1"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="Normal text"/>
<SeekBar
android:id="#+id/seek1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_toLeftOf="#+id/img1"
android:layout_toRightOf="#id/text1"/>
<ImageView
android:id="#id/img1"
android:layout_width="40dp"
android:layout_height="40dp"
android:src="#drawable/img1"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/seek2"
android:layout_alignParentLeft="true"
android:layout_below="#id/img1"
android:text="Longer text overlaps"/>
<SeekBar
android:id="#+id/seek2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/seek1"
android:layout_alignParentLeft="false"
android:layout_alignTop="#+id/img2"
android:layout_below="#id/seek1"
android:layout_toLeftOf="#id/img2"/>
<ImageView
android:id="#id/img2"
android:layout_width="40dp"
android:layout_height="40dp"
android:src="#drawable/img2"
android:layout_alignParentRight="true"
android:layout_below="#id/img1"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/seek3"
android:layout_alignParentLeft="true"
android:layout_alignRight="#+id/text1"
android:layout_below="#id/img2"
android:text="or wraps to a new line"/>
<SeekBar
android:id="#+id/seek3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/seek1"
android:layout_alignParentLeft="false"
android:layout_alignTop="#+id/img3"
android:layout_below="#id/seek2"
android:layout_toLeftOf="#id/img3"/>
<ImageView
android:id="#id/img3"
android:layout_width="40dp"
android:layout_height="40dp"
android:src="#drawable/img3"
android:layout_alignParentRight="true"
android:layout_below="#id/img2"
/>
</RelativeLayout>

Align left edges of vertical views in RelativeLayout

How can I make the 500 (TextView) match the left edge of checkbox above ?
I am using RelativeLayout
<ImageView
android:id="#+id/group_indicator"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:src="#drawable/expander_open_holo_dark" />
<TextView
android:id="#+id/lblListHeader"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:paddingLeft="?android:attr/expandableListPreferredItemPaddingLeft"
android:textSize="17sp" />
<CheckBox
android:id="#+id/GroupCheckBox"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_alignParentRight="true"
android:focusable="false"
android:paddingRight="10dp"
android:scaleX="2"
android:scaleY="2" />
<SeekBar
android:id="#+id/GroupSeekbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/lblListHeader"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="#+id/GroupSeekCount"
android:layout_below="#id/lblListHeader"
android:focusable="false"
android:max="1000"
android:paddingBottom="0dp"
android:paddingLeft="?android:attr/expandableListPreferredItemPaddingLeft"
android:paddingTop="20dp" >
</SeekBar>
<TextView
android:id="#+id/GroupSeekCount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:paddingRight="10dp"
android:paddingTop="20dp"
android:text="500"
android:layout_below="#id/GroupCheckBox"
/>

// try this way,hope this will help you...
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp">
<ImageView
android:id="#+id/group_indicator"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:src="#drawable/expander_open_holo_dark" />
<CheckBox
android:id="#+id/GroupCheckBox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:focusable="false"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:scaleX="2"
android:scaleY="2" />
<TextView
android:id="#+id/lblListHeader"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="?android:attr/expandableListPreferredItemPaddingLeft"
android:layout_alignParentTop="true"
android:layout_toRightOf="#id/group_indicator"
android:layout_toLeftOf="#id/GroupCheckBox"
android:textSize="17sp" />
<SeekBar
android:id="#+id/GroupSeekbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:focusable="false"
android:max="1000"
android:paddingBottom="0dp"
android:layout_below="#id/lblListHeader"
android:layout_toLeftOf="#id/GroupCheckBox"
android:layout_alignBaseline="#id/lblListHeader"
android:paddingLeft="?android:attr/expandableListPreferredItemPaddingLeft"
android:paddingTop="20dp" />
<TextView
android:id="#+id/GroupSeekCount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#id/GroupCheckBox"
android:layout_toRightOf="#id/GroupSeekbar"
android:paddingTop="10dp"
android:text="500"/>
</RelativeLayout>

I would go about this much differently.
Try grouping the expander and list header into a horizontal linearlayout, then group the Checkbox and 500 text into a vertical linearlayout. Finally, these two linearlayout's should be nested within a horizontal linearlayout.

First define the CheckBox, only THEN the TextView.
And then set the TextView's layout_width to match_parent (so that it takes the remaining space)
Also, the ImageView can become part of the TextView (compound drawable), to reduce the controls count:
To do so: in the TextView definition, set these attributes:
android:drawableLeft="#drawable/expander_open_holo_dark"
android:drawablePadding="8dp"
Then you can modify the group indicator by code:
Drawable drw = getContext().getResources().getDrawable(R.drawable.expander_open_holo_dark);
lblListHeader.setCompoundDrawablesWithIntrinsicBounds(drw, null, null, null);
Even better (always bearing in mind the purpose to optimize the design), you could use a CheckedTextView control, so to have the image, the text and the checkmark in a single control (since it extends the TextView, it can hold compound drawables as well as the TextView does).
Of course, you can move the tick mark to the right.

Custom dialog height to match content

This is my custom dialog, there are some textboxs and two buttons.
I'm using a RelativeLayout on it.
I'd like the dialog size to match the content, not all that blank space under there.
I don't want to use explicit pixel heights (it's not good practice).
Another thing, there's a way to have some space between every view?
This is my XML
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:id="#+id/txt_desc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="8pt"
android:textStyle="italic" />
<TextView
android:id="#+id/txt_date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_below="#+id/txt_desc"
android:textSize="8pt" />
<TextView
android:id="#+id/txt_place"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_below="#+id/txt_date"
android:textSize="8pt" />
<Button
android:id="#+id/btn_close"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#+id/txt_place"
android:layout_toRightOf="#+id/view"
android:text="#string/btn_close" />
<View
android:id="#+id/view"
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_centerHorizontal="true" />
<Button
android:id="#+id/btn_edit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/txt_place"
android:layout_toLeftOf="#+id/view"
android:drawableLeft="#android:drawable/ic_menu_edit"
android:text="#string/btn_edit" />
</RelativeLayout>

First question
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
Second question
Plus use android:marginTop="5dp" if you want to separate a View from Top for 5 dp.
marginLeft|Right|Bottom are also available.
<TextView
android:id="#+id/txt_place"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="5dp" <-----------------
android:layout_below="#+id/txt_date"
android:textSize="8pt" />
By the way, if I were you, I'd nest some layouts to make order. You can have a general Relative Layout, then 2 linear layouts: one horizontal for TextViews and one vertical for Buttons. You can definely play with your editor and try to make the best appearance for your dialog.
EDIT
Try this one:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#0000"
android:orientation="vertical"
android:paddingBottom="50dp" >
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/txt_desc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="prova"
android:textSize="8pt"
android:textStyle="italic" />
<TextView
android:id="#+id/txt_date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:text="prova"
android:textSize="8pt" />
<TextView
android:id="#+id/txt_place"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:text="prova"
android:textSize="8pt" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<Button
android:id="#+id/btn_edit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableLeft="#android:drawable/ic_menu_edit"
android:text="btn_edit" />
<Button
android:id="#+id/btn_close"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="btn_close" />
<View
android:id="#+id/view"
android:layout_width="0dp"
android:layout_height="1dp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
I've hard-coded the texts. The main idea is to use a big container layout in background, which is trasparent (background=#0000) and in top of that a layout in wrap_content containing your Views.
If this solution doesn't resolve your problem, I think you could edit height directly in your code. Try to relate to this question

Set your relative layout's height to wrap_content.
For example:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!-- More XML -->
</RelativeLayout>
Also be aware that fill_parent is deprecated for widths and heights.
You can add either margin (extra space outside a view) or padding (extra space inside a view) with android:layout_margin or android:padding respectively. There are also variants such as layout_marginTop that only apply to a specific side of the view.

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.