Linearlayout with horizontal children with predefined width

Question

I've got a simple layout:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="30dp"
    android:weightSum="1"
    android:layout_marginRight="30dp"
    android:layout_marginTop="30dp"
    >

    <com.google.android.material.button.MaterialButton
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_weight="0.25"
        android:backgroundTint="@color/BrightYellowCrayola"
        android:insetLeft="0dp"
        android:insetTop="0dp"
        android:insetRight="0dp"
        android:insetBottom="0dp"
        android:padding="0dp"
        app:icon="@drawable/outline_two_wheeler_24"
        app:iconGravity="textStart"
        app:iconPadding="0dp"
        app:iconSize="24dp"
        app:iconTint="@null"
        app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.MyApp.Button.Circle" />

    <com.google.android.material.button.MaterialButton
        android:layout_width="50dp"
        android:layout_weight="0.25"

        android:layout_height="50dp"
        android:backgroundTint="@color/BrightYellowCrayola"
        android:insetLeft="0dp"
        android:insetTop="0dp"
        android:insetRight="0dp"
        android:insetBottom="0dp"
        android:padding="0dp"
        app:icon="@drawable/outline_two_wheeler_24"
        app:iconGravity="textStart"
        app:iconPadding="0dp"
        app:iconSize="24dp"
        app:iconTint="@null"
        app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.MyApp.Button.Circle" />


    <com.google.android.material.button.MaterialButton
        android:layout_width="50dp"
        android:layout_weight="0.25"
        android:layout_height="50dp"
        android:backgroundTint="@color/BrightYellowCrayola"
        android:insetLeft="0dp"
        android:insetTop="0dp"
        android:insetRight="0dp"
        android:insetBottom="0dp"
        android:padding="0dp"
        app:icon="@drawable/outline_two_wheeler_24"
        app:iconGravity="textStart"
        app:iconPadding="0dp"
        app:iconSize="24dp"
        app:iconTint="@null"
        app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.MyApp.Button.Circle" />

    <com.google.android.material.button.MaterialButton
        android:layout_width="50dp"
        android:layout_weight="0.25"
        android:layout_height="50dp"
        android:backgroundTint="@color/BrightYellowCrayola"
        android:insetLeft="0dp"
        android:insetTop="0dp"
        android:insetRight="0dp"
        android:insetBottom="0dp"
        android:padding="0dp"
        app:icon="@drawable/outline_two_wheeler_24"
        app:iconGravity="textStart"
        app:iconPadding="0dp"
        app:iconSize="24dp"
        app:iconTint="@null"
        app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.MyApp.Button.Circle" />

</LinearLayout>

Which looks lke this:

The issue, as seen above is that the predefined button width of "50dp" won't be used as the layout_weight attribute, for some reason, always corrects the size so that the width fits completely in the linearlayout. What I want, is the NOT the width is corrected but rather the margin between the 4 buttons, with the width staying the same.

So it should look more like this:

Can this be solved using layout_weightattribute?

Answer 1

Try this:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="30dp"
    android:layout_marginRight="30dp"
    android:layout_marginTop="30dp"
    >


    <com.google.android.material.button.MaterialButton
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:backgroundTint="@color/BrightYellowCrayola"
        android:insetLeft="0dp"
        android:insetTop="0dp"
        android:insetRight="0dp"
        android:insetBottom="0dp"
        android:padding="0dp"
        app:icon="@drawable/outline_two_wheeler_24"
        app:iconGravity="textStart"
        app:iconPadding="0dp"
        app:iconSize="24dp"
        app:iconTint="@null"
        app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.MyApp.Button.Circle" />


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



    <com.google.android.material.button.MaterialButton
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:backgroundTint="@color/BrightYellowCrayola"
        android:insetLeft="0dp"
        android:insetTop="0dp"
        android:insetRight="0dp"
        android:insetBottom="0dp"
        android:padding="0dp"
        app:icon="@drawable/outline_two_wheeler_24"
        app:iconGravity="textStart"
        app:iconPadding="0dp"
        app:iconSize="24dp"
        app:iconTint="@null"
        app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.MyApp.Button.Circle" />

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



    <com.google.android.material.button.MaterialButton
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:backgroundTint="@color/BrightYellowCrayola"
        android:insetLeft="0dp"
        android:insetTop="0dp"
        android:insetRight="0dp"
        android:insetBottom="0dp"
        android:padding="0dp"
        app:icon="@drawable/outline_two_wheeler_24"
        app:iconGravity="textStart"
        app:iconPadding="0dp"
        app:iconSize="24dp"
        app:iconTint="@null"
        app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.MyApp.Button.Circle" />


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


    <com.google.android.material.button.MaterialButton
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:backgroundTint="@color/BrightYellowCrayola"
        android:insetLeft="0dp"
        android:insetTop="0dp"
        android:insetRight="0dp"
        android:insetBottom="0dp"
        android:padding="0dp"
        app:icon="@drawable/outline_two_wheeler_24"
        app:iconGravity="textStart"
        app:iconPadding="0dp"
        app:iconSize="24dp"
        app:iconTint="@null"
        app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.MyApp.Button.Circle" />



</LinearLayout>

Using space is the way to go