Android Studio - How do I put buttons next to each other in linear layout in android studio?

eyalhaimov
January 25, 2022
344 views
5 votes
5 Answers

Hello I am trying to put two buttons next to eachother in android studio with linearlayout:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center"
tools:context=".MainActivity">

<ImageView
    android:id="@+id/imageView"
    android:layout_width="222dp"
    android:layout_height="237dp"
    app:srcCompat="@drawable/ic_launcher_background"
    tools:layout_editor_absoluteX="246dp"
    tools:layout_editor_absoluteY="322dp" />

<com.google.android.material.button.MaterialButton
    android:id="@+id/cameraBtn"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:text="@string/camera"
    android:layout_marginTop="8dp"
    app:strokeColor="@color/teal_700"
    app:cornerRadius="100dp"
    style="@style/Widget.MaterialComponents.Button.OutlinedButton"/>

<com.google.android.material.button.MaterialButton
    android:id="@+id/galleryBtn"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Gallery"
    android:layout_marginTop="8dp"
    app:cornerRadius="100dp"
    style="@style/Widget.MaterialComponents.Button.OutlinedButton"
    />

the output currently is:

I have tried with relativelayout – didn’t work and also using horizontal in linearlayout.

I have tried putting also the android:layout_weight as 1 and the buttons disappeared.

I want to have the imageview in the center and the two buttons below and the two buttons are next to each other.

Answers

If you are intending to keep this view inside of a LinearLayout this is how you will do it. You will add a new LinearLayout below your ImageView and set its orientation or horizontal. Then add your buttons inside of that LinearLayout.

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

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="222dp"
        android:layout_height="237dp"
        app:srcCompat="@drawable/ic_launcher_background" />

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

        <com.google.android.material.button.MaterialButton
            android:id="@+id/cameraBtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="@string/camera"
            android:layout_marginTop="8dp"
            app:strokeColor="@color/teal_700"
            app:cornerRadius="100dp"
            style="@style/Widget.MaterialComponents.Button.OutlinedButton"/>

        <com.google.android.material.button.MaterialButton
            android:id="@+id/galleryBtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Gallery"
            android:layout_marginTop="8dp"
            app:cornerRadius="100dp"
            style="@style/Widget.MaterialComponents.Button.OutlinedButton"
            />

    </LinearLayout>

</LinearLayout>

If you are interested in using ConstraintLayout this is how you would do it:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="222dp"
        android:layout_height="237dp"
        app:srcCompat="@drawable/ic_launcher_background"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

    <com.google.android.material.button.MaterialButton
        android:id="@+id/cameraBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="@string/camera"
        android:layout_marginTop="8dp"
        app:strokeColor="@color/teal_700"
        app:cornerRadius="100dp"
        style="@style/Widget.MaterialComponents.Button.OutlinedButton"
        app:layout_constraintTop_toBottomOf="@+id/imageView"
        app:layout_constraintEnd_toStartOf="@+id/galleryBtn"
        app:layout_constraintStart_toStartOf="parent"/>

    <com.google.android.material.button.MaterialButton
        android:id="@+id/galleryBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Gallery"
        android:layout_marginTop="8dp"
        app:cornerRadius="100dp"
        style="@style/Widget.MaterialComponents.Button.OutlinedButton"
        app:layout_constraintTop_toBottomOf="@+id/imageView"
        app:layout_constraintStart_toEndOf="@+id/cameraBtn"
        app:layout_constraintEnd_toEndOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

You can use another Linear Layout inside the parent layout and set its orientation to horizontal to achieve the desired output.

Code For Desired Output:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical"
tools:context=".MainActivity">

<ImageView
    android:id="@+id/imageView"
    android:layout_width="222dp"
    android:layout_height="237dp"
    app:srcCompat="@drawable/ic_launcher_background"
    tools:layout_editor_absoluteX="246dp"
    tools:layout_editor_absoluteY="322dp" />

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_gravity="center"
    android:gravity="center">

    <com.google.android.material.button.MaterialButton
        android:id="@+id/cameraBtn"
        style="@style/Widget.MaterialComponents.Button.OutlinedButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:layout_gravity="center"
        android:gravity="center"
        android:text="@string/camera"
        app:cornerRadius="100dp"
        app:strokeColor="@color/teal_700" />

    <com.google.android.material.button.MaterialButton
        android:id="@+id/galleryBtn"
        style="@style/Widget.MaterialComponents.Button.OutlinedButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="8dp"
        android:text="Gallery"
        app:cornerRadius="100dp" />
</LinearLayout>

In your current layout, all the elements are in one container, that is your LinearLayout.

One idea to achieve what you want with a LinearLayout is to separate the image and buttons in 2 different LinearLayouts.
The orientation of the LinearLayout that will host your buttons should be horizontal.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="222dp"
        android:layout_height="237dp"
        app:srcCompat="@drawable/ic_launcher_background"
        tools:layout_editor_absoluteX="246dp"
        tools:layout_editor_absoluteY="322dp" />

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

        <com.google.android.material.button.MaterialButton
            android:id="@+id/cameraBtn"
            style="@style/Widget.MaterialComponents.Button.OutlinedButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:gravity="center"
            android:text="@string/camera"
            app:cornerRadius="100dp"
            app:strokeColor="@color/teal_700" />

        <com.google.android.material.button.MaterialButton
            android:id="@+id/galleryBtn"
            style="@style/Widget.MaterialComponents.Button.OutlinedButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:text="Gallery"
            app:cornerRadius="100dp" />
    </linearLayout>
</LinearLayout>

If the LinearLayout isn’t a hard requirement, I would suggest to use ConstraintLayout. By using that, you can position everything in a much better and easy way.

You need to use another linear layout to put two button besides each other,
Here is the code for this.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="222dp"
        android:layout_height="237dp"
        app:srcCompat="@drawable/ic_launcher_background"
        tools:layout_editor_absoluteX="246dp"
        tools:layout_editor_absoluteY="322dp" />

    <androidx.appcompat.widget.LinearLayoutCompat
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <com.google.android.material.button.MaterialButton
            android:id="@+id/cameraBtn"
            style="@style/Widget.MaterialComponents.Button.OutlinedButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="16dp"
            android:layout_marginTop="8dp"
            android:layout_weight="1"
            android:gravity="center"
            android:text="Camera"
            app:cornerRadius="100dp"
            app:strokeColor="@color/teal_700" />

        <com.google.android.material.button.MaterialButton
            android:id="@+id/galleryBtn"
            style="@style/Widget.MaterialComponents.Button.OutlinedButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="16dp"
            android:layout_marginTop="8dp"
            android:layout_weight="1"
            android:text="Gallery"
            app:cornerRadius="100dp" />
    </androidx.appcompat.widget.LinearLayoutCompat>
</LinearLayout>

Here is the screenshot of the desired output.
you can give desired margins to set the buttons in the layout.

- Fatima
- June 28, 2022 at 12:29 am
- 0 votes
0
The outer (main) layout has a vertical orientation, so all the elements inside this layout will be arranged vertically, So in order to have these two buttons next to each other you have to use inner
linearlayout (inside the main layout) and set its ‘orientation’ to horizontal.

Login or Signup to reply.