Search code examples
androidxmlbuttonimagebutton

How do you put 4 buttons side by side (2 on top, 2 on bottom) for Android?


I am trying to create 4 image buttons so that their positioning is like this: top left --- top right

bottom left --- bottom right

I am using a LinearLayout if it matters. Here is what I got so far (all 4 have the same code):

<ImageButton
    android:background="@drawable/pic"
    android:id="@+id/multiButton"
    android:layout_width="150dip"
    android:layout_height="150dip"
    android:text="cool"
    android:textSize="50sp"
    android:textStyle="bold"/>

I have also tried setting the layout_width to "fill_parent" and the layout_height to "wrap_content" but that still did not help.


Solution

  • Just copy this xml into your layout and you'll see all the buttons aligned in 4 different corners.

    enter image description here

        <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >
    
    
        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button1" />
    
        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button2" 
            android:layout_alignParentRight="true"/>
    
        <Button
            android:id="@+id/button3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button3"
            android:layout_alignParentBottom="true" />
    
        <Button
            android:id="@+id/button4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button4"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true" />
    
    </RelativeLayout>