androidxmlandroid-buttonmaterial-components-androidmaterialbutton

Android MaterialButtonToggleGroup buttons are getting offset when they have more than one line of text


I am using a MaterialButtonToggleGroup with MaterialButton buttons in it. I am trying to fit 2 lines of text into some of the buttons, but the buttons get shifted down a bit if they have more than one line of text in them.

The last button is lower than the others, because it has 2 lines of text

Here is the button group and all of the buttons:

<GridLayout
    android:id="@+id/linearLayout1"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_above="@+id/linearLayout2"
    android:layout_alignParentStart="true"
    android:layout_alignParentEnd="true"
    android:columnCount="1"
    android:measureWithLargestChild="false"
    android:orientation="horizontal">
        <com.google.android.material.button.MaterialButtonToggleGroup
            android:id="@+id/gateToggleGroup"
            android:layout_width="wrap_content"
            android:layout_height="100dp"
            android:layout_gravity="center_horizontal"
            android:theme="@style/ThemeOverlay.MaterialComponents"
            android:layout_marginLeft="16sp"
            android:layout_marginTop="10sp"
            android:layout_marginRight="16sp">
            <com.google.android.material.button.MaterialButton
                style="?attr/materialButtonOutlinedStyle"
                android:id="@+id/toggle1"
                android:layout_width="wrap_content"
                android:layout_height="70dp"
                android:text="Vhod 1x"
                android:textSize="16sp"
                />
            <com.google.android.material.button.MaterialButton
                style="?attr/materialButtonOutlinedStyle"
                android:id="@+id/toggle2"
                android:layout_width="wrap_content"
                android:layout_height="70dp"
                android:text="Izhod"
                android:textSize="16sp"
                />
            <com.google.android.material.button.MaterialButton
                style="?attr/materialButtonOutlinedStyle"
                android:id="@+id/toggle3"
                android:layout_width="wrap_content"
                android:layout_height="70dp"
                android:text="Vhod"
                android:textSize="16sp"
                />
            <com.google.android.material.button.MaterialButton
                style="?attr/materialButtonOutlinedStyle"
                android:id="@+id/toggle4"
                android:layout_width="wrap_content"
                android:layout_height="70dp"
                android:text="Izhod 1x"
                android:textSize="16sp"
                />
        </com.google.android.material.button.MaterialButtonToggleGroup>
    </GridLayout>

I must add that using maxLines property in xml didn't work beacuse the MaterialButton overrides this setting and sets it to 1. On this thread I found out that you have to set it programtically: StackOverFlow thread.

        var button : MaterialButton = findViewById(R.id.toggle1)
        button.maxLines = 2
        button = findViewById(R.id.toggle2)
        button.maxLines = 2
        button = findViewById(R.id.toggle3)
        button.maxLines = 2
        button = findViewById(R.id.toggle4)
        button.maxLines = 2

I tried solving this by manually setting the margin, fixed heights of the buttons but it did not work. I tried to change the line height of the buttons and setting it to 0 solved the issue of the 2 line buttons being lower than the others but of course this meant that all the text was just smushed together.

This is how the button looks like with lineHeight set to 0sp


Solution

  • As @MikeM commented, setting android:baselineAligned="false" on the <MaterialButtonToggleGroup> solved the issue.