Android Layout Weight

Question

I am new to Android development and I have a question about setting weight in a linear layout.

I am trying to create a row with two custom buttons and a custom edit text. The edit text should only take up as much room as its content, and the two buttons should expand horizontally to fill the rest of the available space in the row. Like this...

| [#Button++#] [#Button--#] [et] |

After several attempts this is the closest I can get to what I want, even though it seems overly complicated.

| [Button] [Button] [###ET###] |

<LinearLayout 
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:gravity="center_horizontal|center_vertical"
    android:layout_weight="1"
    >

    <LinearLayout 
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center_horizontal|center_vertical"
        >
        <RelativeLayout 
            android:id="@+id/btn_plus_container" 
            android:layout_width="fill_parent" 
            android:layout_height="wrap_content"
            >
            <ImageButton 
                android:layout_height="wrap_content"
                android:layout_width="fill_parent" 
                android:id="@+id/btn_plus" 
                android:background="@drawable/btn"
                android:layout_centerInParent="true"
                ></ImageButton>
            <TextView 
                android:textColor="#FAFAF4"
                android:id="@+id/tv_dice_plus" 
                android:text="@string/tv_plus" 
                android:layout_width="wrap_content" 
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                ></TextView>
        </RelativeLayout>
    </LinearLayout>
    <LinearLayout 
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center_horizontal|center_vertical"
        >
        <RelativeLayout 
            android:id="@+id/btn_minus_container" 
            android:layout_width="fill_parent" 
            android:layout_height="wrap_content"
            >
            <ImageButton 
                android:layout_height="wrap_content"
                android:layout_width="fill_parent" 
                android:id="@+id/btn_minus" 
                android:background="@drawable/btn"
                android:layout_centerInParent="true"
                ></ImageButton>
            <TextView 
                android:textColor="#FAFAF4"
                android:id="@+id/btn_minus" 
                android:text="@string/tv_minus" 
                android:layout_width="wrap_content" 
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                ></TextView>
        </RelativeLayout>
    </LinearLayout>
    <LinearLayout 
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center_horizontal|center_vertical"
        >
        <EditText 
            android:textColor="#FAFAF4"
            android:text="@string/et_output" 
            android:id="@+id/et_output" 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content"
            android:inputType="number"
            android:selectAllOnFocus="true" 
            android:minWidth="50sp"         
            android:maxWidth="50sp"
            android:background="@drawable/tv_black_background3"
            android:textColorHighlight="#c30505"
            ></EditText>
    </LinearLayout>
</LinearLayout>

As I understand setting [android:layout_weight="2"] for the linear layouts holding the buttons should make them take up more room than the edit text, but it does the opposite for me, making them both half the size.

| [Btn] [Btn] [#####et#####] |

I have tried so many different combinations I can't even remember them, and none have worked.

score 213 · Accepted Answer · edited Aug 03 '12 at 13:13

213

It doesn't work because you are using fill_parent as the width. The weight is used to distribute the remaining empty space or take away space when the total sum is larger than the LinearLayout. Set your widths to 0dip instead and it will work.

edited Aug 03 '12 at 13:13

Paresh Mayani

127,700
71
241
295

answered Feb 13 '11 at 21:44

Romain Guy

97,993
18
219
200

6

Setting the widths on the linear layouts to 0dip worked like I wanted. I did not know that was an option. It makes sense why that would work where wrap_content would not. Setting the width to wrap_content when there is no content makes it disappear, but setting it to 0dip allows it to stretch from nothing to however large it needs to be. Thank you very much. – UnluckyDevil Feb 15 '11 at 07:01
Setting layout_width to "fill_parent" and layout_weight to a float value like "0.2", "0.85" etc. also works. In this case the bigger the number the smaller size the view will take. could you please explain if this is an acceptable way to do it? – Yar Jun 11 '11 at 13:24
37

This worked for me as well. Thank you. (Although I have to say, does anyone else find the android layout system weird and unintuitive?) – tstyle Jul 13 '11 at 03:47
Thanks! I really had problems telling why my layout widths didn't show up as expected. It was the 0dip setting that did it :) – marlar Sep 17 '11 at 20:49
@tstyle android is easy if you want to do easy things. However if you want to do *more than* easy things, it becomes overly hard. – Pacerier Mar 13 '12 at 11:05
In the answer, "Total Sum is larger than the LinearLayout". Total sum of what is larger than LinearLayout's what? My guess is widths, is that correct? But that's contradictory. If you set widths to 0dp, then how's the sum of widths of elements greater than LinearLayout's width??? – Dheeraj Bhaskar Jan 16 '13 at 13:32
It's the sum of the widths indeed. The problem in the original question came from *not* using 0dp. LIke I mentioned using 0dp as the width fixes the problem. – Romain Guy Jan 16 '13 at 19:51
`The weight is used to distribute the remaining empty space` meaning width=1dp would work too. right? – Elad Benda Jul 28 '13 at 10:46
`ake away space when the total sum is larger than the LinearLayout` can you please give example? – Elad Benda2 Jul 30 '13 at 10:22
An IDE based warning would be greatly appreciated at this point. Just saying. – Neon Warge Mar 24 '16 at 04:29

score 14 · Answer 2 · edited Jul 25 '12 at 11:19

14

android:Layout_weight can be used when you don't attach a fix value to your width already like fill_parent etc.

Do something like this :

<Button>

Android:layout_width="0dp"
Android:layout_weight=1

-----other parameters
</Button>

edited Jul 25 '12 at 11:19

Korhan Ozturk

11,148
6
36
49

answered Sep 13 '11 at 05:51

learn_andrd

1,046
1
12
15

score 7 · Answer 3 · edited Nov 08 '11 at 20:14

7

Think it that way, will be simpler

If you have 3 buttons and their weights are 1,3,1 accordingly, it will work like table in HTML

Provide 5 portions for that line: 1 portion for button 1, 3 portion for button 2 and 1 portion for button 1

edited Nov 08 '11 at 20:14

chown

51,908
16
134
170

answered Nov 04 '11 at 15:48

George Nguyen

2,169
1
16
7

score 4 · Answer 4 · answered Apr 21 '14 at 11:47

In the linearLayout set the WeightSum=2;

And distribute the weight to its childs as you want them to display.. I have given weight ="1" to the child .So both will distribute half of the total.

 <LinearLayout
    android:id="@+id/linear1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:weightSum="2"
    android:orientation="horizontal" >

    <ImageView
        android:id="@+id/ring_oss"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:src="@drawable/ring_oss" />

    <ImageView
        android:id="@+id/maila_oss"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:src="@drawable/maila_oss" />
</LinearLayout>

score 2 · Answer 5 · answered May 30 '11 at 14:54

weight values 0-1 share distribution of available space (after setting layout_width="0px") in proportion to the weight value. View elements with weight not specified (no weight entry) get weight 0 which means they get no expansion.

A simple alternative with no weight entries needed is to attach marquee to a view with text which tells it to expand from minimum needed for the text (wrap_content) to space available EditText: android:layout_width="wrap_content" android:ellipsize="marquee"

score 0 · Answer 6 · answered Jan 18 '14 at 19:53

One more reason I found (vague as it may sound). The below did not work.

LinearLayout vertical

LinearLayout height fillparent + weight

LinearLayout height fillparent + weight

LinearLayout height fillparent + weight

EndLinearLayout

What did work was

RelativeLayout

LinearLayout vertical

LinearLayout height fillparent + weight

LinearLayout height fillparent + weight

LinearLayout height fillparent + weight

EndLinearLayout

EndRelativeLayout

It sounds vague by a root layout with Linear and weights under it did not work. And when I say "did not work", I mean, that after I viewed the graphical layout between various resolutions the screen consistency broke big time.

score 0 · Answer 7 · answered May 10 '16 at 10:08

<LinearLayout
    android:id="@+id/linear1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:weightSum="9"
    android:orientation="horizontal" >

    <ImageView
        android:id="@+id/ring_oss"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="3"
        android:src="@drawable/ring_oss" />

    <ImageView
        android:id="@+id/maila_oss"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="3"
        android:src="@drawable/maila_oss" />
<EditText
        android:id="@+id/edittxt"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="3"
        android:src="@drawable/maila_oss" />
</LinearLayout>

score 0 · Answer 8 · answered Feb 13 '11 at 21:15

0

i would suppose to set the EditTexts width to wrap_content and put the two buttons into a LinearLayout whose width is fill_parent and weight set to 1.

answered Feb 13 '11 at 21:15

Jonathan Roth

1,271
1
12
19

Android Layout Weight

8 Answers8

Linked