Align two-button layout left and right in Android

I want to align two buttons with a linear layout, one on the left, and one on the right, like the next and previous buttons on an image gallery. I tried to align them but it doesn't work.

XML layout code:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:background="@android:color/white"
    android:gravity="bottom" >


    <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/black" >

        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="prev"
            android:layout_alignParentRight="true" />

        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="next" />

    </LinearLayout>

</LinearLayout>

Actual output:

Expected output:

How can I fix it?


Use a RelativeLayout. There you can set android:layout_alignParentLeft and android:layout_alignParentRight. This should work for you:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:background="@android:color/white"
    android:gravity="bottom" >


    <RelativeLayout
        android:id="@+id/relativeLayout1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/black" >

        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="prev"
            android:layout_alignParentLeft="true" />

        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="next"
            android:layout_alignParentRight="true"/>

    </RelativeLayout>

</LinearLayout>

With Linear Layout

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1">

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Prev"/>
        </LinearLayout>


        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Next"/>

</LinearLayout>

With Relative Layout

<RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Prev"
            android:layout_alignParentLeft="true"/>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Next"
            android:layout_alignParentRight="true"/>
</RelativeLayout>

Use Relative layout in your LinearLayout;

Also add android:layout_alignParentLeft="true" to "prev" Button

and android:layout_alignParentRight="true" to "next" Button

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@android:color/white"
    android:gravity="bottom"
    android:orientation="vertical" >

    <RelativeLayout
        android:id="@+id/relativeLayout1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/black" >

        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"    <---- ADD this prop
            android:text="prev" />

        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"    <----- ADD this prop
            android:text="next" />
    </RelativeLayout>

</LinearLayout>

Something like this:

<?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="vertical" >

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:gravity="right" >

        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:text="Button" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_toLeftOf="@+id/button1"
            android:orientation="vertical" >

            <Button
                android:id="@+id/button2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button" />
        </LinearLayout>
    </RelativeLayout>

</LinearLayout>

The idea is, to create a RelativeLayout as container and put first Button and then stick it to the right of parent view. After that, add Another button inside LinearLayout and set this LinearLayout into the left of first Button.

Here's the result.

enter image description here