CODEWITHSUNDEEP
androidandroid-layout
Blaze
Blaze

Reputation: 2329

Android RelativeLayout : Placing buttons side by side next to one another

I am trying to place buttons side by side next to one another in three buttons to one row using a RelativeLayout.

This is the relative layout placed inside a linear layout with the group of buttons

main.xml

<LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:orientation="vertical" >
        <RelativeLayout
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:background="#CC8FD8D8"
                android:gravity="center"
                android:orientation="vertical"
                android:paddingBottom="20px" >
         </RelativeLayout> 
 </LinearLayout>

These are the group of button found inside the layouts

<Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:drawableTop="@drawable/snap"
            android:textColor="#FFFFFF"
            android:background="#00FFFFFF"
            android:id="@+id/shutterButton"
            android:text="SNAP"></Button>

                   <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:drawableTop="@drawable/up"
            android:textColor="#FFFFFF"
            android:background="#00FFFFFF"
            android:id="@+id/Up"
            android:text="xxxx"></Button>

                   <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:drawableTop="@drawable/ic_action_borrow"
            android:textColor="#FFFFFF"
            android:background="#00FFFFFF"
            android:id="@+id/xxxx"
            android:text="xxxxx"></Button>

                   <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:drawableTop="@drawable/xxxx"
            android:textColor="#FFFFFF"
            android:background="#00FFFFFF"
            android:id="@+id/xxxx"
            android:text="xxxx"></Button>

                   <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:drawableTop="@drawable/xxxx"
            android:textColor="#FFFFFF"
            android:background="#00FFFFFF"
            android:id="@+id/xxxx"
            android:text="xxxx"></Button>

OUTPUT enter image description here Please how can I place the buttons one after another in 3 buttons to one row. Kindly assist!

Upvotes: 0

Views: 2546

Answers (5)

Sumit Pathak
Sumit Pathak

Reputation: 529

Try this

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#CC8FD8D8"
        android:gravity="center"
        android:orientation="vertical"
        android:paddingBottom="20px" >

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:drawableTop="@drawable/snap"
            android:textColor="#FFFFFF"
            android:background="#00FFFFFF"
            android:id="@+id/shutterButton"
            android:text="SNAP"></Button>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:drawableTop="@drawable/up"
            android:textColor="#FFFFFF"
            android:background="#00FFFFFF"
            android:id="@+id/Up"
            android:text="xxxx"
            android:layout_alignParentTop="true"
            android:layout_toLeftOf="@+id/xxxxx"
            android:layout_toStartOf="@+id/xxxxx"
            android:layout_marginRight="27dp"
            android:layout_marginEnd="27dp"></Button>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:drawableTop="@drawable/ic_action_borrow"
            android:textColor="#FFFFFF"
            android:background="#00FFFFFF"
            android:id="@+id/xxxxx"
            android:text="xxxxx"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"></Button>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:drawableTop="@drawable/xxxx"
            android:textColor="#FFFFFF"
            android:background="#00FFFFFF"
            android:id="@+id/xxxxxx"
            android:text="xxxx"
            android:layout_alignParentTop="true"
            android:layout_toLeftOf="@+id/xxxx"
            android:layout_toStartOf="@+id/xxxx"
            android:layout_marginRight="50dp"
            android:layout_marginEnd="50dp"></Button>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:drawableTop="@drawable/xxxx"
            android:textColor="#FFFFFF"
            android:background="#00FFFFFF"
            android:id="@+id/xxxx"
            android:text="xxxx"
            android:layout_centerVertical="true"
            android:layout_alignParentRight="true"
            android:layout_alignParentEnd="true"></Button>

    </RelativeLayout>
</LinearLayout>

Upvotes: 0

Jimit Patel
Jimit Patel

Reputation: 4297

Try LinearLayout with android:orientation="horizontal". Check this below -

<?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:background="#CC8FD8D8"
    android:gravity="center"
    android:orientation="horizontal"
    android:paddingBottom="20px">

    <Button
        android:id="@+id/shutterButton"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="#00FFFFFF"
        android:drawableTop="@drawable/snap"
        android:text="SNAP"
        android:textColor="#FFFFFF" />

    <Button
        android:id="@+id/Up"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="#00FFFFFF"
        android:drawableTop="@drawable/up"
        android:text="xxxx"
        android:textColor="#FFFFFF" />

    <Button
        android:id="@+id/xxxx"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="#00FFFFFF"
        android:drawableTop="@drawable/ic_action_borrow"
        android:text="xxxxx"
        android:textColor="#FFFFFF" />

    <Button
        android:id="@+id/xxxx"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="#00FFFFFF"
        android:drawableTop="@drawable/xxxx"
        android:text="xxxx"
        android:textColor="#FFFFFF" />

    <Button
        android:id="@+id/xxxx"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="#00FFFFFF"
        android:drawableTop="@drawable/xxxx"
        android:text="xxxx"
        android:textColor="#FFFFFF" />

</LinearLayout>

Upvotes: 0

Darshak
Darshak

Reputation: 2316

Try this:

XML:

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

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#CC8FD8D8"
        android:gravity="center"
        android:orientation="horizontal"
        android:paddingBottom="20px">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="#00FFFFFF"
            android:text="SNAP"
            android:textColor="#FFFFFF"></Button>
        <!--android:drawableTop="@drawable/snap"-->
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="#00FFFFFF"
            android:text="xxxx"
            android:textColor="#FFFFFF"></Button>

        <Button
            android:id="@+id/xxxx"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="#00FFFFFF"
            android:text="xxxxx"
            android:textColor="#FFFFFF"></Button>

    </LinearLayout>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#CC8FD8D8"
        android:gravity="center"
        android:orientation="horizontal"
        android:paddingBottom="20px">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="#00FFFFFF"
            android:text="xxxx"
            android:textColor="#FFFFFF"></Button>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="#00FFFFFF"
            android:text="xxxx"
            android:textColor="#FFFFFF"></Button>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="#00FFFFFF"
            android:text="xxxx"
            android:textColor="#FFFFFF"
            android:visibility="invisible"></Button>
    </LinearLayout>
</LinearLayout>

Output will be:

enter image description here

Upvotes: 1

Praveen Kumar
Praveen Kumar

Reputation: 567

the following code creates 4 buttons side by side horizontally

   <LinearLayout
    android:layout_marginTop="1dp"
    android:layout_marginBottom="1dp"
    android:id="@+id/lay"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="50dp">

    <Button
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:id="@+id/button1"
        android:text="Button1"
        android:layout_weight="1"
        android:padding="5dp" />

    <Button
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:id="@+id/button2"
        android:text="Button2"
        android:layout_weight="1"
        android:padding="5dp" />

    <Button
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:id="@+id/button3"
        android:text="Button3"
        android:layout_weight="1"
        android:padding="5dp" />

    <Button
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:id="@+id/button4"
        android:text="Button4"
        android:layout_weight="1"
        android:padding="5dp" />

</LinearLayout>

Upvotes: 1

N6t9N
N6t9N

Reputation: 21

You should linear layout for this kind of horizontal buttons and don't forget to make the orientation of inside LinearLayout to horizontal. Like

<LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:background="#CC8FD8D8"
            android:gravity="center"
            android:orientation="horizontal" 
            android:paddingBottom="20px" >

Then add buttons inside this linear layout, all the buttons will come side by side.

Upvotes: 0

Related Questions