Develop Reference

Making the minimum width of a layout match the inner view's width

I have the following multiple-column layout on my app:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:mcare="http://schemas.android.com/apk/res/com.vodafone.mCare"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="3" >
<LinearLayout
android:id="#+id/container1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical" >
<TextView
android:id="#+id/label1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello world" />
</LinearLayout>
<LinearLayout
android:id="#+id/container2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical" >
<TextView
android:id="#+id/label2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Hi" />
<LinearLayout
android:id="#+id/container3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical" >
<TextView
android:id="#+id/label3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Hi" />
</LinearLayout>
...etc...
</LinearLayout>
All the columns are supposed to be evenly-spaced when enough space is available.
The goal here is to force container1's (and only container1's) minimum width to match the same width of its child view (label1). All the other columns should be resized evenly throughout the rest of the available space, regardless of whether there is enough space to display their contents or not. Here's a rough diagram of what I'm trying to do:
I've tried a lot of different approaches but nothing seems to work so far. Any ideas? Thanks in advance for any suggestion.
Edit: Note that the layout above is just a simplified version of the actual layout on the application. All containers actually have more that one View inside them - with the exception of container1. In other words, only label1 can be moved outside its respective container.

Remove nested TextView inside LinearLayout.
Try like this:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="3">
<TextView
android:id="#+id/label1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_horizontal"
android:background="#android:color/holo_red_light"
android:text="Hello world" />
<TextView
android:id="#+id/label2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_horizontal"
android:background="#android:color/holo_red_light"
android:text="Hi" />
<TextView
android:id="#+id/label3"
android:layout_width="0dp"
android:gravity="center_horizontal"
android:background="#android:color/holo_red_light"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Hi" />
</LinearLayout>
********Edited Answer*************
I have try it with `TextView` inside `LinearLayout` as well, it's working fine:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="3">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="horizontal">
<TextView
android:id="#+id/label1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:background="#android:color/holo_red_light"
android:text="Hello world" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="horizontal">
<TextView
android:id="#+id/label2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:background="#android:color/holo_red_light"
android:text="Hi" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="horizontal">
<TextView
android:id="#+id/label3"
android:layout_width="match_parent"
android:gravity="center_horizontal"
android:background="#android:color/holo_red_light"
android:layout_height="wrap_content"
android:text="Hi" />
</LinearLayout>
</LinearLayout>
Without your full XML file we can't help you.

Textview center-aligned based on percentage of screenwidth

I thought this will be a common question, but I couldn't find any answers......
Is it possible to center-aligned a (variable length) textview based on a percentage of the screen width?
In my case, I have 2 textview and I want to achieve something like this:
Another example:
The first textview is center-aligend 30% of the screenwidth, width=wrap_content, while the second textview takes up the rest of the space. The first textview's size should NOT be fixed (see picture above)
I do not want to do that programatically, as it will be expensive on my program. If possible it's better be in an xml layout file :)
Right now I can only achieve a "left-aligned" textview using layout_weight of LinearLayout (by putting a 30% dummy on the left), but I want center-alignment.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="3" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="7"
android:orientation="horizontal" >
<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:ellipsize="end"
android:singleLine="true"
android:text="another textview"
android:textColor="#FFFF0000"/>
</LinearLayout>
</LinearLayout>

With almost an hour testing this "..." layout, I succeeded with this :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="100" >
<RelativeLayout
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="40"
android:background="#android:color/transparent">
<RelativeLayout
android:id="#+id/left_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_margin="0dp"
android:gravity="center"
android:padding="0dp"
android:singleLine="true"
android:text="first textview"
android:textColor="#FFFF0000" >
<View
android:layout_width="1dp"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:background="#0000FF" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:background="#00FF00"
android:gravity="center"
android:text="textview"
android:textColor="#FFF" />
</RelativeLayout>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/left_layout"
android:background="#0000FF"
android:gravity="center"
android:text="textview"
android:textColor="#FFF" />
</RelativeLayout>
<TextView
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="60"
android:background="#FFFF0000"
android:gravity="right"
android:singleLine="true"
android:text="another textview"
android:textColor="#FFF" />
</LinearLayout>
Outputs
Finally in your Java, according to the green textview width or content length, you can change the layout_weight for other textviews programmatically.
This should help you
Have a nice day.

// try this way hope this will help you...
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<View
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_weight="0.15"/>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.85">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left"
android:text="first Textview"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="second textview demo text "/>
</LinearLayout>
</LinearLayout>
</LinearLayout>

try this one
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="3"
android:gravity="center_horizontal"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="7"
android:gravity="center_horizontal"
android:orientation="vertical" >
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout>
Work perfect checked by me.

How to mirror text position?

I'm trying to lay some text out on left and right that have a mirroring position as below.
What's happening here is that the last row in the right column ("Some more text") is the widest so it pushes the two rows above further to the right. For the sake of symmetry, the left column is pushed further to the left. The text values are supposed to be dynamic. Does anyone know how the layouts should be designed?
Here's my code (sadly, it doesn't even align to the right!):
<LinearLayout
android:layout_height="0dp"
android:layout_width="match_parent"
android:layout_weight="1">
<RelativeLayout android:layout_height="match_parent"
android:layout_width="0dp"
android:layout_weight="1">
<RelativeLayout android:id="#+id/description_30"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true">
<TextView android:id="#+id/title_30"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="30 DAYS"/>
<TextView android:id="#+id/num_ds_30"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/title_30"/>
<TextView android:id="#+id/num_bs_30"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/num_ds_30"/>
</RelativeLayout>
</RelativeLayout>
<RelativeLayout android:id="#+id/description_today"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_toRightOf="#id/description_30">
<TextView android:id="#+id/title_today"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:text="TODAY"/>
<TextView android:id="#+id/num_ds_today"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_below="#id/title_today"/>
<TextView android:id="#+id/num_bs_today"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:layout_below="#id/num_ds_today"/>
</RelativeLayout>
</LinearLayout>

You can achieve something like that by nesting LinearLayouts. The outer LinearLayout would have an orientation=horizontal, and the two inner LinearLayout an orientation of vertical with each having a layout_weight=1 and the second (right) LinearLayout would also have gravity="right".
The code would be something like this.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="1">
<TextView
... />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="1">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="right">
<TextView
... />
</LinearLayout>
</LinearLayout>
</LinearLayout>

I think using a RelativeLayout and aligning the TextViews to the left/right is a good approach. Like this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:id="#+id/Text1_Left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true" />
<TextView
android:id="#+id/Text2_Left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#id/Text1_Left" />
<TextView
android:id="#+id/Text3_Left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#id/Text2_Left" />
<TextView
android:id="#+id/Text1_Right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_toRightOf="#id/Text1_Left"
android:gravity="right" />
<TextView
android:id="#+id/Text2_Right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#id/Text1_Right"
android:layout_toRightOf="#id/Text2_Left"
android:gravity="right" />
<TextView
android:id="#+id/Text3_Right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#id/Text2_Right"
android:layout_toRightOf="#id/Text1_Left"
android:gravity="right" />
</RelativeLayout>

How I can put "Imagenview" under all the elements?

Hi, I commented that I have this layout and if you can see there is a line on the right which should go below the text
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout_promocion_item0"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#363636"
android:padding="10dip" >
<LinearLayout
android:id="#+id/contenido"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<LinearLayout
android:id="#+id/contenido_Nombre"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".75"
android:orientation="horizontal"
>
<TextView
android:id="#+id/nombre_promo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Vodka + Nectar"
android:textColor="#ffffff"
android:textSize="25sp"
android:tag="bold" />
</LinearLayout>
<LinearLayout
android:id="#+id/contenido_precio"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".25"
android:orientation="horizontal" >
<ImageView
android:id="#+id/separador_lateral"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:src="#drawable/vertical"
android:layout_gravity="left"/>
<TextView
android:id="#+id/precio"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="$2200"
android:textColor="#ffffff"
android:textSize="24dp"
/>
</LinearLayout>
<ImageView
android:id="#+id/separador"
android:layout_width="0dp"
android:layout_height="19dp"
android:layout_weight=".50"
android:src="#drawable/divierblanco"
android:layout_alignParentLeft="true"/>
</LinearLayout>
</LinearLayout>
.. so is something like:
NAME: PRICE
I can not locate the image below the text .... Can you help me?

You have way too many nested LinearLayouts, IMHO, which can be bad for performance and decrease readability. I would use a RelativeLayout and 1 nested LinearLayout
<RelativeLayout
...>
<LinearLayout
android:id="#+id/someId"
....
<TextView
...>
<ImageView
...>
<TextView
...>
</LinearLayout>
<ImageView
android:layout_below="id/someId"
...>
Something like this should work.
Alternatively if this doesn't work for you, then placing that ImageVIew outside of the first child LinearLayout should also work
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout_promocion_item0"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#363636"
android:padding="10dip" >
<LinearLayout
android:id="#+id/contenido"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/contenido_Nombre"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".75"
android:orientation="horizontal" >
<TextView
android:id="#+id/nombre_promo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Vodka + Nectar"
android:textColor="#ffffff"
android:textSize="25sp"
android:tag="bold" />
</LinearLayout>
<LinearLayout
android:id="#+id/contenido_precio"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".25"
android:orientation="horizontal" >
<ImageView
android:id="#+id/separador_lateral"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:src="#drawable/vertical"
android:layout_gravity="left"/>
<TextView
android:id="#+id/precio"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="$2200"
android:textColor="#ffffff"
android:textSize="24dp" />
</LinearLayout>
</LinearLayout>
<ImageView
android:id="#+id/separador"
android:layout_width="0dp"
android:layout_height="19dp"
android:layout_weight=".50"
android:src="#drawable/divierblanco"
android:layout_alignParentLeft="true"/> // this doesn't do anything in a LinearLayout
</LinearLayout>

Your imageView (with the id separador) is inside a linearLayout with an orientation set to "horizontal". Move the imageView to the outermost linearlayout like so:
EDIT: The xml that's displayed below is completely different than what I typed in my answer. What's up with that? Regardless, move the imageView down an element.
<LinearLayout
android:id="#+id/contenido"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/contenido_Nombre"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".75"
android:orientation="horizontal" >
<TextView
android:id="#+id/nombre_promo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:tag="bold"
android:text="Vodka + Nectar"
android:textColor="#ffffff"
android:textSize="25sp" />
</LinearLayout>
<LinearLayout
android:id="#+id/contenido_precio"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".25"
android:orientation="horizontal" >
<ImageView
android:id="#+id/separador_lateral"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_gravity="left"
android:src="#drawable/vertical" />
<TextView
android:id="#+id/precio"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="$2200"
android:textColor="#ffffff"
android:textSize="24dp" />
</LinearLayout>
</LinearLayout>
<ImageView
android:id="#+id/separador"
android:layout_width="0dp"
android:layout_height="19dp"
android:layout_alignParentLeft="true"
android:layout_weight=".50"
android:src="#drawable/divierblanco" /></LinearLayout>

Android fix the image size

In my screen I am having 3 buttons and in next row below those buttons I am having 3 names (name corresponding to those buttons) but my problem is that when ever name changes then size of buttons also changes but I do want to fix the size of buttons here is my code please help me
<TableLayout android:background="#drawable/toptab"
android:layout_width="fill_parent" android:id="#+id/tableLayout"
android:layout_height="wrap_content"
android:stretchColumns="1" android:gravity="center_vertical"
android:layout_alignParentBottom="true">
<TableRow>
<ImageButton android:id="#+id/btnPrev" android:background="#drawable/imgPrev"
android:layout_marginLeft="5dp"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>
<ImageButton android:id="#+id/btnRefresh"
android:layout_gravity="center" android:background="#drawable/refreshbutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<ImageButton android:id="#+id/btnNext"
android:background="#drawable/imgNext"
android:layout_width="5dp"
android:layout_height="20dp"
android:layout_marginRight="5dp" />
</TableRow>
<TableRow >
<TextView android:id="#+id/prev" android:text="Hk" android:layout_marginLeft="5dp" />
<TextView android:id="#+id/refresh" android:text="Refresh" android:layout_gravity="center" />
<TextView android:id="#+id/next" android:text="RS" android:layout_marginRight="5dp" />
</TableRow>
</TableLayout>

If you want to avoid fixing button size, then I would recommend using different layout than TableLayout, maybe RelativeLayout and TextViews with property alignBaseline or LinearLayout with weight properties could do the trick.

You should use linearlayout instead of table layout and use Weight property for aligning buttons and text view in equal dimensions, so here if you write more text in text view , button size will not increase. Also you can add more buttons in same manner. Below is the XML file and screen shot.
<?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:orientation="horizontal" >
<LinearLayout
android:id="#+id/linearLayout4"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" android:layout_weight="1" android:gravity="center_horizontal">
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextViewTextTextViewTextTextView" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" android:layout_weight="1" android:gravity="center_horizontal">
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout3"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" android:layout_weight="1" android:gravity="center_horizontal">
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
</LinearLayout>
</LinearLayout>