How to set buttons on the same line for linear layout

Question

I am trying to align my buttons so they are all aligned with each other side by side, but for some reason the next button shows up on the linear below. I must use linear layout for this.

This is what I got:

<ImageButton
    android:layout_width="30dp"
    android:layout_height="30dp"
    android:gravity="top|left"
    android:background="@drawable/pic_icon"
    android:id="@+id/picButton"
    android:layout_gravity="left"/>

<ImageButton
    android:layout_width="30dp"
    android:layout_height="30dp"
    android:gravity="top|center"
    android:background="@drawable/cancel_pic"
    android:id="@+id/deletePicButton"
    android:layout_gravity="center"/>

Updated code:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center_horizontal|bottom"
android:orientation="horizontal"
android:background="#000000"
tools:context=".Visualizer"
android:id="@+id/homePage">

<ImageButton
    android:layout_width="30dp"
    android:layout_height="30dp"
    android:gravity="top|left"
    android:background="@drawable/pic_icon"
    android:id="@+id/picButton"
    android:layout_gravity="left"/>

<ImageButton
    android:layout_width="30dp"
    android:layout_height="30dp"
    android:gravity="top|center"
    android:background="@drawable/cancel_that_pic"
    android:id="@+id/deletePicButton"
    />

<ImageButton
    android:layout_width="30dp"
    android:layout_height="30dp"
    android:gravity="top|right"
    android:background="@drawable/visual_blueblue"
    android:id="@+id/visIcon"
    android:layout_gravity="right"
   />

<ListView
    android:id="@+id/song_list"
    android:layout_width="fill_parent"
    android:layout_height="500dp" >
</ListView>

<Space
    android:id="@+id/blank_space"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center_horizontal" />

Put both the buttons inside a `LinearLayout` and set the following attribut for the layout: `android:orientation="horizontal" ` — ihsan, May 04 '15 at 07:56

score 2 · Accepted Answer · answered May 04 '15 at 07:57

2

set the orientation for your linear layout :) put this line in your linear layout setting orientation for linear layout is important

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

answered May 04 '15 at 07:57

Preethi Rao

5,117
1
16
29

Thank you! Although they are on the same line now, how can I get it so that they are both at the top left/right corners? – mr nooby noob May 04 '15 at 08:04
remove this line in your second image button android:layout_gravity="center" – Preethi Rao May 04 '15 at 08:08
That doesnt seem to be working :( I have a text view list after these buttons and they start on the same line as them for some reason, even tho they should not...could that be the reason? Is there a way to set anything after my last pic to start on a new line? – mr nooby noob May 04 '15 at 08:27
@mrnoobynoob can you please post your layout code and update the question – Preethi Rao May 04 '15 at 08:53
I have posted my updated code. I am just trying to get the list view to display underneath all three buttons... – mr nooby noob May 04 '15 at 10:33
@mrnoobynoob you want the list view to be at the bottom of the 3 image buttons ? – Preethi Rao May 04 '15 at 10:34

score 1 · Answer 2 · answered May 04 '15 at 07:58

You should set the LinearLayout's orientation to horizontal.

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">
    <ImageButton
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:gravity="top|left"
        android:background="@drawable/pic_icon"
        android:id="@+id/picButton"
        android:layout_gravity="left"/>

    <ImageButton
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:gravity="top|center"
        android:background="@drawable/cancel_pic"
        android:id="@+id/deletePicButton"
        android:layout_gravity="center"/>
</LinearLayout>

How to set buttons on the same line for linear layout

2 Answers2