Can't get proper layout with "fill_parent"

Question

I'm trying to create this simple layout in Android.

enter image description here

A should wrap to fit its content and left|center_vertical align.

B should expand as much as possible, filling all empty space.

C should be right-aligned, wrapping to fill its content and also being aligned center_vertical.

Here is my layout:

<?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:orientation="horizontal"
        android:gravity="left|center_vertical">
    <!-- A -->
    <ImageView android:id="@+id/example_item_icon"
            android:layout_width="48px"
            android:layout_height="48px"/>
    <!-- B -->
    <LinearLayout android:orientation="vertical"
             android:layout_width="wrap_content"
             android:layout_height="fill_parent"
             android:gravity="left|center_vertical"
             android:padding="5px">

        <TextView android:id="@+id/example_item_text"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textStyle="bold"/>

        <TextView android:id="@+id/example_item_level_text"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textStyle="bold|italic"
                android:lines="1"
                android:textSize="10px"/>
    </LinearLayout>
    <!-- C -->
    <TextView android:id="@+id/example_item_count_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textStyle="bold"
            android:textSize="14px"/>
</LinearLayout>

In this layout, C is pushed off-screen. How can I make this layout work?

score 20 · Accepted Answer · answered Mar 10 '11 at 00:29

20

fill_parent means "be as big as the parent," not "use the remaining empty space." Instead of fill_parent, just use android:layout_width="0dip" and android:layout_weight="1".

answered Mar 10 '11 at 00:29

Romain Guy

97,993
18
219
200

Oh, gotcha. I assumed that `fill_parent` meant `expand as much as possible to fill the parent`, unlike `match_parent`=`literally match the size of the parent`. – Naftuli Kay Mar 10 '11 at 00:44
1

match_parent is fill_parent's new name :) – Romain Guy Mar 10 '11 at 01:31
I know this is super old, but can you help me to understand why that works? – Marcus Nov 06 '13 at 04:24
5

@G_M The parent layout fills the screen because of its height and width set to `match_parent`. The point here is to organize A, B, and C so that they fill the space properly inside this parent view. This is exactly the purpose of weight. By giving B a weight of 1, and no weight to A and C, you're telling the parent layout to give all its space to B, compressing A and C to their minimum width (which is wrapping their content). The width attribute is therefore useless for B, so we set it to 0dp for better performance. I hope this answers your question. – Joffrey Feb 25 '14 at 08:24
why you are so genius :) – Fareed Alnamrouti Aug 02 '15 at 23:38

SteelBytes · Answer 2 · 2011-05-25T02:05:17.933

the trick, use a relative layout ... here's an example (off the top of me head - not checked and missing height fields and vertical align settings to make it easy to see the important stuff).

<relativelayout android:width="fillParent">
    <textview android:id="@+id/left" android:text="left" 
              android:width="wrap_content"
              android:layout_alignParentleft="true" />
    <textview android:id="@+id/right" android:text="right"
              android:width="wrap_content"
              android:layout_alignParentright="true" />
    <textview android:id="@+id/middle" android:text="middle"
              android:width="wrap_content"
              android:layout_alignleft="@id/right" android:layout_alignright="@id/left" />
</relativelayout>

edit: here it is with the typos cleaned (and it is tested as working)

<RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
<TextView
    android:id="@+id/left"
    android:text="left"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true" />
<TextView
    android:id="@+id/right"
    android:text="right"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true" />
<TextView
    android:id="@+id/middle"
    android:text="middle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_toLeftOf="@id/right"
    android:layout_toRightOf="@id/left" />
</RelativeLayout>

it does work with width=wrap_content on the middle textview. I've added a version with the typos corrected - try it. — SteelBytes, May 25 '11 at 02:06
Nice! It seems that using "toLeftOf"/"toRightOf" forces "middle" to expand until it fills all the empty space between "right" and "left", i.e it is the (approximate) equivalent of LinearLayout's layout_weight. Thanks! — Giorgos Kylafas, Oct 23 '12 at 11:24

score 0 · Answer 3 · answered Mar 10 '11 at 00:32

Try this. I replaced the ImageViews with TextViews to show up in the XML editor easier. Note that I kept the 48px width on "A" which is not something I think you really want to have. Replace it with wrap_content.

<?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:orientation="horizontal"
        android:gravity="center_vertical">

    <!-- A -->
    <TextView android:layout_height="48px"
    android:id="@+id/example_item_count_text2"
    android:textSize="14px"
    android:layout_weight="1"
    android:text="this is item a"
    android:textStyle="bold"
    android:layout_width="48px">
    </TextView>

    <!-- B -->
    <LinearLayout android:orientation="vertical"
             android:layout_width="wrap_content"
             android:layout_height="fill_parent"
             android:gravity="center_vertical"
             android:layout_weight="1"
             android:padding="5px">

        <TextView android:id="@+id/example_item_text"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="this is B"
                android:textStyle="bold"/>

        <TextView android:id="@+id/example_item_level_text"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="this should be underneath B"
                >
    </LinearLayout>

    <!-- C -->
    <TextView android:id="@+id/example_item_count_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="this is item c"
            android:layout_weight="1"
            android:textStyle="bold"
            android:textSize="14px"/>
</LinearLayout>

score 0 · Answer 4 · answered Mar 10 '11 at 00:50

Here's my answer. I just set the layout_weight on B to be 1. Evidently, layout_weight is something like a percentage-based layout approach. I don't know how it works, but here is my finished product, looking great:

<?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:orientation="horizontal"
        android:gravity="left|center_vertical">

    <ImageView android:id="@+id/example_item_icon"
            android:layout_width="48px"
            android:layout_height="48px"/>

    <LinearLayout android:orientation="vertical"
             android:layout_width="wrap_content"
             android:layout_height="fill_parent"
             android:gravity="left|center_vertical"
             android:layout_weight="1"
             android:padding="5px">

        <TextView android:id="@+id/example_item_text"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textStyle="bold"/>

        <TextView android:id="@+id/example_item_level_text"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textStyle="bold|italic"
                android:lines="1"
                android:textSize="10px"/>
    </LinearLayout>

    <TextView android:id="@+id/example_item_count_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textStyle="bold"
            android:textSize="14px"/>
</LinearLayout>

Can't get proper layout with "fill_parent"

4 Answers4

Linked