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

Question

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 Please how can I place the buttons one after another in 3 buttons to one row. Kindly assist!

LinearLayout with orientation="horizontal" would be so much easy. Although if you still wanna use RelativeLayout use android:layout_toEndOf and/or android:layout_toRightOf property. — camelCaseCoder
– camelCaseCoder, Commented Apr 13, 2016 at 11:58
There were placed vertically but did not stop at the third button — Blaze
– Blaze, Commented Apr 13, 2016 at 12:02

Darshak · Accepted Answer · 2016-04-13 12:11:38Z

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:

Praveen Kumar · Accepted Answer · 2016-04-13 12:01:54Z

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>

N6t9N · Accepted Answer · 2016-04-13 12:01:44Z

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.

Jimit Patel · Accepted Answer · 2016-04-13 12:19:07Z

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>

Please how can I place the buttons one after another in 3 buttons to one row. Kindly assist!
Can you give me pictorial presentation of how you want? Because I am not able to understand what you trying to say.
Answer wants by @JnG. I already answered it. just check image below.
Yeap .. now you got his question. Answer accepted. Just check it.

Sumit Pathak · Accepted Answer · 2016-04-13 13:26:00Z

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>

Collectives™ on Stack Overflow

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

5 Answers 5

2 Comments

1 Comment

Comments

5 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

1 Comment

Comments

5 Comments

Comments

Related