CODEWITHSUNDEEP
androidandroid-studioandroid-linearlayout
eyal haimov
eyal haimov

Reputation: 29

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

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:

enter image description here

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.

Upvotes: 0

Views: 2656

Answers (5)

Fatima
Fatima

Reputation: 11

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.

Upvotes: 0

DevinM
DevinM

Reputation: 1322

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>

Upvotes: 1

Jay Panchal
Jay Panchal

Reputation: 423

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. Desired output

Upvotes: 1

Filip Petrovski
Filip Petrovski

Reputation: 444

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.

Upvotes: 1

Kamal Nayan
Kamal Nayan

Reputation: 1718

You can use another Linear Layout inside the parent layout and set its orientation to horizontal to achieve the desired output. 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>

Upvotes: 1

Related Questions