Is it possible to evenly distribute buttons across the width of a LinearLayout

user_69983 0
Viewed 263056

I have a LinearLayout (oriented horizontally) that contains 3 buttons. I want the 3 buttons to have a fixed width and be evenly distributed across the width of the LinearLayout.

I can manage this by setting the gravity of the LinearLayout to center and then adjusting the padding of the buttons, but this works for a fixed width and won't work for different devices or orientations.

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

    <Button
        android:id="@+id/btnOne"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:width="120dp" />

    <Button
        android:id="@+id/btnTwo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:width="120dp" />


    <Button
        android:id="@+id/btnThree"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:width="120dp" />
</LinearLayout>
android-linearlayout android
23 Answers

The modern solution for this is Flexbox.

<com.google.android.flexbox.FlexboxLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:justifyContent="space_around"> <!-- or "space_between", "space_evenly" -->

    <Button 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:width="120dp" />

    <Button 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:width="120dp" />

    <Button 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:width="120dp" />
</com.google.android.flexbox.FlexboxLayout>

Make sure to import implementation 'com.google.android:flexbox:2.0.0'

Flexbox is far more powerful; it is a good complement to ConstraintLayout. This is a great resource to learn more.

Difference between space_around, space_between, and space_evenly

user_9740450

You should use an android:weightSum attribute linear layout. Give linear layout a weightSum equal to the number of Buttons inside the layout, then set android:layout_weight="1" and set width of the button android:layout_width="0dp" further, you can style the layout using paddings and layout margins.

<LinearLayout android:id="@+id/LinearLayout01"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:gravity="center"
    android:weightSum="3">
    
    <Button
        android:id="@+id/btnOne"
        android:layout_width="0dp"
        android:text="1"
        android:layout_height="wrap_content"
        android:width="120dip"
        android:layout_weight="1"
        android:layout_margin="15dp" 
        />
    
    <Button
        android:id="@+id/btnTwo"
        android:text="2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:width="120dip"
        android:layout_weight="1"
        android:layout_margin="15dp" />

    <Button
        android:id="@+id/btnThree"
        android:text="3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:width="120dip"
        android:layout_weight="1"
        android:layout_margin="15dp" />

</LinearLayout>

In order to do it dynamically

void initiate(Context context){
    LinearLayout parent = new LinearLayout(context);

    parent.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT));
    parent.setWeightSum(3);
    parent.setOrientation(LinearLayout.HORIZONTAL);

    AppCompatButton button1 = new AppCompatButton(context);
    button1.setLayoutParams(new LinearLayout.LayoutParams(0 ,LinearLayout.LayoutParams.WRAP_CONTENT,1.0f));

    AppCompatButton button2 = new AppCompatButton(context);
    button2.setLayoutParams(new LinearLayout.LayoutParams(0 ,LinearLayout.LayoutParams.WRAP_CONTENT,1.0f));

    AppCompatButton button3 = new AppCompatButton(context);
    button3.setLayoutParams(new LinearLayout.LayoutParams(0 ,LinearLayout.LayoutParams.WRAP_CONTENT,1.0f));
    
    parent.addView(button1);
    parent.addView(button2);
    parent.addView(button3);

}
user_105615530

In linearLayout Instead of giving weight to Button itself , set the weight to <Space> View this won't stretch the Button.

    <?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"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:weightSum="4"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.955">

        <Space
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_weight="1" />

        <Button
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:background="@drawable/ic_baseline_arrow_back_24" />

        <Space
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_weight="1" />

        <Button
            android:id="@+id/captureButton"
            android:layout_width="72dp"
            android:layout_height="72dp"
            android:background="@drawable/ic_round_camera_24" />

        <Space
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_weight="1" />

        <Button
            android:id="@+id/cameraChangerBtn"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:background="@drawable/ic_round_switch_camera_24" />

        <Space
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_weight="1" />
    </LinearLayout>

    </androidx.constraintlayout.widget.ConstraintLayout>

as I am using 4 <Space> I set the android:weightSum="4" In linear layout also this is the result ::

layout preview

user_118151540

Equally weighted children

To create a linear layout in which each child uses the same amount of space on the screen, set the android:layout_height of each view to "0dp" (for a vertical layout) or the android:layout_width of each view to "0dp" (for a horizontal layout). Then set the android:layout_weight of each view to "1".

In order for this to work in the LinearLayout view group the attribute values for android:layout_width and android:layout_height need to be equal to "match_parent"...

user_52073740

you can use this . it's so easy to understand : by https://developer.android

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content">

<TextView
    android:text="Tom"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:textSize="24sp" />

<TextView
    android:text="Tim"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:textSize="24sp" />

<TextView
    android:text="Todd"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:textSize="24sp" />

</LinearLayout>
user_128396590

If you want the 3 buttons to have a fixed width and be evenly distributed across the width of the layout... why not use constraintLayout?

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

        <Button
            android:id="@+id/btnOne"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:width="120dip"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toStartOf="@id/btnTwo">
            
        </Button>

        <Button
            android:id="@+id/btnTwo"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:width="120dip"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toStartOf="@id/btnThree"
            app:layout_constraintStart_toEndOf="@id/btnOne"></Button>


        <Button
            android:id="@+id/btnThree"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:width="120dip"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toEndOf="@id/btnTwo"
            app:layout_constraintEnd_toEndOf="parent">
            
        </Button>

</androidx.constraintlayout.widget.ConstraintLayout>
user_66580520

Width and be are evenly distributed across the width of the layout. Why not use constraintLayout?

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

 <Button android:id="@+id/btnOne" android:layout_width="wrap_content"
  android:layout_height="wrap_content" android:width="120dip"
  app:layout_constraintTop_toTopOf="parent"
  app:layout_constraintBottom_toBottomOf="parent"
  app:layout_constraintStart_toStartOf="parent"
  app:layout_constraintEnd_toStartOf="@id/btnTwo">
 </Button> 

 <Button android:id="@+id/btnTwo" android:layout_width="wrap_content"
  android:layout_height="wrap_content" android:width="120dip" 
  app:layout_constraintTop_toTopOf="parent" 
  app:layout_constraintBottom_toBottomOf="parent"
  app:layout_constraintEnd_toStartOf="@id/btnThree"
  app:layout_constraintStart_toEndOf="@id/btnOne"></Button> <Button 
  android:id="@+id/btnThree" android:layout_width="wrap_content"    
  android:layout_height="wrap_content" android:width="120dip" 
  app:layout_constraintTop_toTopOf="parent" 
  app:layout_constraintBottom_toBottomOf="parent" 
  app:layout_constraintStart_toEndOf="@id/btnTwo" 
  app:layout_constraintEnd_toEndOf="parent"> 
 </Button>

</androidx.constraintlayout.widget.ConstraintLayout>```
user_170879650 
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content">

<TextView
    android:text="Tom"
    android:layout_width="wrap_content"
    android:layout_height="200dp"
    android:textSize="24sp" />

<TextView
    android:text="Tim"
    android:layout_width="wrap_content"
    android:layout_height="200dp"
    android:textSize="24sp" />

<TextView
    android:text="Todd"
    android:layout_width="wrap_content"
    android:layout_height="200dp"
    android:textSize="24sp" />

user_89102730
Related