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?

score 0 · Accepted Answer · answered Jul 25 '21 at 19:03

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

score 0 · Answer 2 · answered Jul 25 '21 at 20:50

0

layout_weight will not solve your problem. Put a layout_marginRight and layout_marginLeft for your com.google.android.material.button.MaterialButton of say 20dp not for your <LinearLayout />

answered Jul 25 '21 at 20:50

Abey Bruck

532
5
7

Linearlayout with horizontal children with predefined width

2 Answers2