10

I have a RelativeLayout with two buttons at bottom which are side by side. My goal is to have those buttons side by side but filling the screen width. Can somebody tell me how to do it?

My layout file is:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

    <Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Left Button"
    android:id="@+id/button"
    android:layout_alignParentTop="false"
    android:layout_weight="1"
    android:layout_marginTop="77dp"
    android:layout_alignParentLeft="true"
    android:layout_alignParentBottom="true"
    android:layout_alignParentEnd="false"
    android:layout_alignParentStart="false" />

    <Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Right Button"
    android:id="@+id/button2"
    android:layout_weight="1"
    android:layout_toRightOf="@id/button"
    android:layout_alignParentBottom="true"
    android:layout_alignParentEnd="false"
    android:layout_alignParentStart="false" />
</RelativeLayout>
2
  • You need a LinearLayout with a horizontal orientation. The buttons then should split the widths between them while their parent LinearLayout has a match parent width. Commented Jul 29, 2015 at 9:28
  • 2
    2 second googling turned up this post: stackoverflow.com/questions/22982566/…
    – GordonW
    Commented Jul 29, 2015 at 9:30

5 Answers 5

14
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity">

<TextView
    android:id="@+id/dummyView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true" />

<Button
    android:id="@+id/button"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_toLeftOf="@id/dummyView"
    android:text="Left Button" />

<Button
    android:id="@+id/button2"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_toRightOf="@id/dummyView"
    android:text="Right Button" />

5
  • Can be done without weight which is heavy in xml. Just try with relative layout itself. Commented Jul 29, 2015 at 9:39
  • 2
    This should have been the chosen answer. It's better to avoid nested Linear Layouts Commented Jun 29, 2017 at 7:02
  • I like your solution.. layout weight sometimes break when using textviews. This is better solution! Anyway a view separator could be used instead of textview to give much feel to the UI.! :)
    – sanjeev
    Commented Feb 1, 2019 at 9:11
  • this is a memory-efficient answer. Commented Mar 6, 2020 at 9:44
  • Perfect answer.
    – Vincent
    Commented Jun 26 at 8:34
13

Put your Buttons in a LinearLayout which has horizontal orientation. And assign weight to your buttons.

Here's your code but modified.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:tools="http://schemas.android.com/tools"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:paddingBottom="@dimen/activity_vertical_margin"
            android:paddingLeft="@dimen/activity_horizontal_margin"
            android:paddingRight="@dimen/activity_horizontal_margin"
            android:paddingTop="@dimen/activity_vertical_margin"
            tools:context=".MainActivity">\

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:orientation="horizontal">

    <Button
        android:id="@+id/button"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="false"
        android:layout_weight="0.5"
        android:text="Left Button"
        />

    <Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="0.5"
        android:text="Right Button"
        />
</LinearLayout>

1
  • Better luck next time :-)
    – nomanr
    Commented Jul 29, 2015 at 9:34
2

Try this.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity" >

    <TableRow
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:weightSum="2" >

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Left Button"
            android:id="@+id/button"
            android:layout_alignParentTop="false"
            android:layout_marginTop="77dp"
            android:layout_alignParentLeft="true"
            android:layout_alignParentBottom="true"
            android:layout_alignParentEnd="false"
            android:layout_alignParentStart="false" />


        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="Right Button"
            android:id="@+id/button2"
            android:layout_weight="1"
            android:layout_toRightOf="@id/button"
            android:layout_alignParentBottom="true"
            android:layout_alignParentEnd="false"
            android:layout_alignParentStart="false" />

    </TableRow>
</RelativeLayout>
1

It's very simple, if you see in the palette for the buttons you can see the attribute: "layout:alignComponent" very useful to align all views in a RelativeLayout; So you can align a left side of button2 to right side of button1... Simple... No LinearLayout needed...

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Right Button"
    android:id="@+id/button2"
    android:layout_weight="1"
    android:layout_toRightOf="@+id/button"
    android:layout_alignParentBottom="false"
    android:layout_alignParentEnd="false"
    android:layout_alignParentStart="false" />

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Left Button"
    android:id="@+id/button"
    android:layout_alignParentTop="false"
    android:layout_weight="1"
    android:layout_alignParentLeft="false"
    android:layout_alignParentBottom="false"
    android:layout_alignParentEnd="false"
    android:layout_alignParentStart="false"
    android:layout_alignTop="@+id/button2" />
1

My goal is to have those buttons side by side but filling the screen width.

If that's what you want , use a LinearLayout with android:orientation="horizontal" and for buttons use android:layout_width="0dp" , android:weight="1" in order to take up exactly equal space for each button.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"        
    android:layout_width="match_parent"
    android:layout_height="match_parent"     android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin" 
android:orientation="horizontal"
tools:context=".MainActivity">

    <Button
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="Left Button"
    android:id="@+id/button"
    android:layout_alignParentTop="false"
    android:layout_weight="1"
    android:layout_marginTop="77dp"
    android:layout_alignParentLeft="true"
    android:layout_alignParentBottom="true"
    android:layout_alignParentEnd="false"
    android:layout_alignParentStart="false" />

    <Button
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="Right Button"
    android:id="@+id/button2"
    android:layout_weight="1"
    android:layout_toRightOf="@id/button"
    android:layout_alignParentBottom="true"
    android:layout_alignParentEnd="false"
    android:layout_alignParentStart="false" />
</RelativeLayout>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.