Three buttons evenly divided linear layout

Question

So, I am trying to use a linear layout to hold three different buttons, each should take up 33% of the width on one line. This linear layout will be below all the other content in my relative layout, which holds all the other widgets on this activity. Unfortunately, when I add the third button into the layout, the other two have a white bar along the bottom of them and the third button (in this case the home button) is positioned higher than the others.

Can someone explain this behavior and how to rectify it? Thanks.

This is the XML file for the linear layout, I've removed all the text for the other widgets. If that would be helpful, I can post it as well.

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true"
    android:layout_alignParentEnd="true">

    <Button
        android:layout_width="0dp"
        android:layout_weight=".33"
        android:layout_height="wrap_content"
        android:text="@string/adfazsdfasdfadfsagjlfkdlgjklfsadgfjgps"
        android:onClick="resetDates"
        android:background="@drawable/sumbitstyleing"
        android:id="@+id/resetDatesButton" />

    <Button
        android:layout_width="0dp"
        android:layout_weight=".33"
        android:layout_height="wrap_content"
        android:text="@string/home"
        android:onClick="home"
        android:id="@+id/homeButtonSearch"
        android:background="@drawable/generalbutton" />

    <Button
        android:layout_weight=".33"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="@string/submitchanges"
        android:onClick="submitChanges"
        android:background="@drawable/sumbitstyleing"
        android:id="@+id/submitchanges" />

</LinearLayout>

The first picture is WITHOUT the third button, the second picture is WITH the third button.

Don't use alignParentEnd and alignParentRight. First off, those two will conflict in LTR languages. Secondly, since you match_parent in width you will automatically align to both sides of the parent. (The alignParentBottom is fine, it doesn't conflict). — Gabe Sechan, Jul 05 '16 at 02:26
Add `android:baselineAligned="false"` to the `LinearLayout` to get the `Button`s to line up. I'm not sure what the white line is. Some sort of rendering glitch? Is this in an emulator, or a layout designer, possibly? — Mike M., Jul 05 '16 at 02:27
Possible duplicate of [is it possible to evenly distribute buttons across the width of an android linearlayout](http://stackoverflow.com/questions/3470420/is-it-possible-to-evenly-distribute-buttons-across-the-width-of-an-android-linea) — mbmc, Jul 05 '16 at 02:46

score 1 · Accepted Answer · edited Jul 05 '16 at 03:50

Try this, I have removed Properties you should use with RelativeLayout and unnecessary with LinearLayout, and buttons aligned horizontally,

    android:layout_alignParentRight="true"
    android:layout_alignParentEnd="true"

and assigned Weightsum to LinearLayout along with button height to match parents

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:weightSum="1">

        <Button
            android:id="@+id/resetDatesButton"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight=".33"
            android:onClick="resetDates"
            android:text="Rese check dates" />

        <Button
            android:id="@+id/homeButtonSearch"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight=".33"
            android:onClick="home"
            android:text="home" />

        <Button
            android:id="@+id/submitchanges"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight=".33"
            android:onClick="submitChanges"
            android:text="submit changes" />

    </LinearLayout>

</RelativeLayout>

Result

Riten · Answer 2 · 2016-07-05T11:46:41.243

Here you can go this way :

 <?xml version="1.0" encoding="utf-8"?>
 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

  android:layout_width="match_parent"   android:layout_height="match_parent"
android:background="@color/white"
>
<LinearLayout
    android:layout_width="300dp"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:layout_centerHorizontal="true"/>
    <!--Buttons -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:weightSum="3"
        >

        <android.support.v7.widget.AppCompatButton
            android:id="@+id/motor_team_send_sms_btn"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="@string/send_sms"

            />

        <android.support.v7.widget.AppCompatButton
            android:id="@+id/motor_team_sleep_btn"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="@string/sleep"

            />

        <android.support.v7.widget.AppCompatButton
            android:id="@+id/motor_team_rise_btn"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="@string/rise"

            />
    </LinearLayout>

Output is:

This might help you.

score 0 · Answer 3 · answered Jul 05 '16 at 02:39

Try this, in your LinearLayout add android:gravity="center"

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:gravity="center">
...
</LinearLayout>

Three buttons evenly divided linear layout

3 Answers3