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
As @MikeM commented, setting android:baselineAligned="false" on the <MaterialButtonToggleGroup>
solved the issue.