Search code examples
androidandroid-studioandroid-linearlayout

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.


Solution

  • 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>