Place 3 buttons in a LinearLayout to occupy equal amount of space

Question

i would like to have three buttons taking equal amount of available space horizontally in a row. I used android:layout_gravity. What is the problem?

layout xml :

<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:weightSum="1.0"
    >

    <Button android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/Bg"
            android:background="@drawable/button_red"
            android:layout_weight=".2"
            android:layout_gravity="left"
    />
    <Button android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/Bm"
            android:background="@drawable/button_red"
            android:layout_weight=".2"
            android:textColor="#ffffff"
            android:layout_gravity="center"
    />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/button_red"
        android:layout_weight=".2"
        android:text="@string/Bf"
        android:layout_gravity="right"
    />

</LinearLayout>

if someone see whats wrong, thanks.

and make sure you give different id to buttons.. – Ron Jul 26 '12 at 12:34 — Ron, Jul 26 '12 at 12:34

score 121 · Accepted Answer · answered Jul 26 '12 at 12:32

121

The following layout should work. weights are for LinearLayouts..

<LinearLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="3"
>

    <Button android:id="@+id/button1"
            ...
            android:layout_weight="1"/>

    <Button android:id="@+id/button2"
            ...
            android:layout_weight="1"/>

    <Button
        android:id="@+id/button3"
        ...
        android:layout_weight="1"/>

</LinearLayout>

answered Jul 26 '12 at 12:32

Ron

24,175
8
56
97

Thanks:)Worked Liked Charm:) – Pranesh Sahu Jul 01 '17 at 05:43
it generally works but not for FloatingActionButtons – qwlice Jun 13 '23 at 14:10

score 14 · Answer 2 · answered Mar 07 '13 at 15:09

besides of setting a layout_weight you have to set layout_width or layout_height to 0dp. So if you want for example to distribute the buttons horizontally , layout_width should be 0dp and layout_weight .2 or any number as long as is equal through the buttons you have.

so your layout should be like this

<LinearLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>

<Button android:id="@+id/button"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="@string/Bg"
        android:background="@drawable/button_red"
        android:layout_weight="1"
/>
<Button android:id="@+id/button"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="@string/Bm"
        android:background="@drawable/button_red"
        android:layout_weight="1"
        android:textColor="#ffffff"
/>

<Button
    android:id="@+id/button"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:background="@drawable/button_red"
    android:layout_weight="1"
    android:text="@string/Bf"
/>
</LinearLayout>

score 2 · Answer 3 · answered Jul 26 '12 at 12:24

2

Divide the weight sum to equal proportion in all buttons.

Remove layout_gravity property and add android:layout_weight=0.33.

It will work

answered Jul 26 '12 at 12:24

moDev

5,248
4
33
63

It's what i'm looking for but we can see at the right some pixel. I don't know how to explain but that take only 99% of the parent. i'm not sure if i explain correctly – user1527152 Jul 26 '12 at 12:29
2

Change total sum to 3 and divide amongst button to 1. – moDev Jul 26 '12 at 12:32
1

OH yeah why i don't think that before -_-" you save me lot of thanks. I was looking for a solution for an hour. – user1527152 Jul 26 '12 at 12:37

score 1 · Answer 4 · edited Sep 16 '15 at 10:23

1

Check out this:

<RelativeLayout 
    android:id="@+id/layout"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content">

    <Button 
        android:id="@+id/button1"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"/>
    <RelativeLayout 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true">
        <Button 
            android:id="@+id/button2"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@+id/button1"/>
    </RelativeLayout>
    <Button 
        android:id="@+id/button3"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"/>
</RelativeLayout>

edited Sep 16 '15 at 10:23

Jared Rummler

37,824
19
133
148

answered Jul 26 '12 at 12:18

AkashG

7,868
3
28
43

Duh.. I am not the downvoter. But I think he did that, bcoz you have provided an idea based on RelativeLayout, but the question was to solve it using Linear Layout. Doesn't that sound to be a reason for the downvote? – Andro Selva Jul 26 '12 at 12:40
@AndroSelva using linear layout you can set 3 three buttons linearly but when screen size changes,it wont remain in a manner that will be middle of the screen.Through relative layout you can maintain for all screen resolutions. – AkashG Jul 26 '12 at 12:42
@AndroSelva i provided the code which last for any sort of device.the three buttons will remain linear throughout and wont leave their place even resolution changes – AkashG Jul 26 '12 at 12:44
But that's the reason why we use layout_weight attribute isn't it? To divide the width equally irrespective of the width? – Andro Selva Jul 26 '12 at 12:44
Still, relativeLayout has been used. The idea is to solve with existing LinearLayout itself.. – Andro Selva Jul 26 '12 at 12:45

score 1 · Answer 5 · edited Oct 21 '18 at 12:45

Give android:layout_weight="1" for each Button

Here Android Developer Guide:

Layout Weight

LinearLayout also supports assigning a weight to individual children with the android:layout_weight attribute. This attribute assigns an "importance" value to a view in terms of how much space it should occupy on the screen. A larger weight value allows it to expand to fill any remaining space in the parent view. Child views can specify a weight value, and then any remaining space in the view group is assigned to children in the proportion of their declared weight. Default weight is zero.

For example, if there are three text fields and two of them declare a weight of 1, while the other is given no weight, the third text field without weight will not grow and will only occupy the area required by its content. The other two will expand equally to fill the space remaining after all three fields are measured. If the third field is then given a weight of 2 (instead of 0), then it is now declared more important than both the others, so it gets half the total remaining space, while the first two share the rest equally.

Source

The Android Developer Guide did not exist when the question was asked. — user1527152, Oct 23 '18 at 18:25

score 0 · Answer 6 · answered Jul 26 '12 at 12:16

0

Put the buttons in a relative layout. add properties to the buttons allignParentleft = true, another allignParentcenter= true and the allignParentRight = true to each button.

answered Jul 26 '12 at 12:16

ShineDown

1,881
3
21
29

Sorry try this to the center button android:layout_centerInParent="true". – ShineDown Jul 26 '12 at 12:30
That will align them in a row, but it will not make them take all the space available and make each button of equal size – banzai86 Jul 26 '12 at 12:51

score 0 · Answer 7 · answered Jun 07 '17 at 07:19

Please consider the following layout snippet:

<LinearLayout
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:weightSum="3">

    <ImageView
        android:src="@drawable/logo1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:layout_gravity="left|center_vertical" />

    <TextView
        android:id="@+id/toolbar_title"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Some Title"
        android:textColor="@android:color/black"
        android:layout_gravity="center"
        android:gravity="center"
        android:layout_weight="1" />

    <ImageView
        android:src="@drawable/logo2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:layout_gravity="right|center_vertical" />

</LinearLayout>

2 things to note above.

A. I created a LinearLayout with weightSum of 3.

B. Then inside that I create 3 elements each having layout_weight of 1 so that I can have my child elements distribute the entire space among themselves evenly.

score 0 · Answer 8 · answered Aug 26 '17 at 10:24

I have make it pragmatically without weight

 float width = CommonUtills.getScreenWidth(activity);
    int cardWidth = (int) CommonUtills.convertDpToPixel(((width) / 3), activity);

    LinearLayout.LayoutParams params =
        new LinearLayout.LayoutParams(cardWidth,
            LinearLayout.LayoutParams.MATCH_PARENT);

    btnOne.setLayoutParams(params);
    btnTwo.setLayoutParams(params);
    btnThree.setLayoutParams(params);

    public class CommonUtills {
        public static float getScreenWidth(Context context) {
            float width = (float) 360.0;
            DisplayMetrics displayMetrics = context.getResources().getDisplayMetrics();
            width = displayMetrics.widthPixels / displayMetrics.density;
            return width;
        }
    }



    <LinearLayout
    android: layout_width = "match_parent"
    android: layout_height = "50dp"    
    android: orientation = "horizontal" >


        <Button
    android: id = "@+id/btnOne"
    android: layout_width = "wrap_content"
    android: layout_height = "match_parent" > </Button>


        <Button
    android: id = "@+id/btnTwo"
    android: layout_width = "wrap_content"
    android: layout_height = "wrap_content" > </Button>



        <Button
    android: id = "@+id/btnThree"
    android: layout_width = "wrap_content"
    android: layout_height = "wrap_content" > </Button> 
        </LinearLayout>

Did you try your solution? If `width` is not a multiple of three then there will be a reminder. This can offset the buttons. Also the pixel(s)remaining will be black and likely to be noticeable. — user1527152, Aug 27 '17 at 14:46
I had tried with six buttons and its working good in both landscape and portrait. Also i checked in many devices and its working fine if you put card view outside each button then its looking much good — Rajesh N, Aug 29 '17 at 08:16

Madi · Answer 9 · 2016-10-06T06:26:49.233

You can divide it like this: `

            <RelativeLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true"
                android:layout_alignParentStart="true"
                android:layout_centerVertical="true"
                android:layout_toLeftOf="@+id/imageButtonLikedPost">

                <ImageButton
                    android:id="@+id/imageButtonMyPost"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerHorizontal="true"
                    android:layout_centerVertical="true"
                    android:background="@drawable/mypost_tab_bg" />
            </RelativeLayout>

            <ImageButton
                android:id="@+id/imageButtonLikedPost"
                android:layout_width="40dp"
                android:layout_height="30dp"
                android:layout_centerHorizontal="true"
                android:layout_centerVertical="true"
                android:background="@drawable/mylike_tab_bg" />

            <RelativeLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentEnd="true"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:layout_toRightOf="@+id/imageButtonLikedPost">

                <ImageButton
                    android:id="@+id/imageButtonMyBlog"
                    android:layout_width="30dp"
                    android:layout_height="30dp"
                    android:layout_centerHorizontal="true"
                    android:layout_centerVertical="true"
                    android:background="@drawable/tab4_bg" />
            </RelativeLayout>
        </RelativeLayout>`

Hi do you mind explaining your answer? You are using RelativeLayout when the question ask for LinearLayout. I didn't test your solution but the question ask for equal width and one of your button is 40dp and another 30dp. can you explain this too pls. — user1527152, Oct 06 '16 at 01:44

Place 3 buttons in a LinearLayout to occupy equal amount of space

9 Answers9

Layout Weight

Linked