Search code examples
androidandroid-buttonandroid-gridlayout

Buttons are changing position inside GridLayout when changing text in Buttons

I have a GridLayout filled with buttons and the text changes quite often. And always after a text change, the buttons sometimes move up or down a little, even though they should not. I see also some coincidence with the size of the text in the button (I have autosizing text inside the button). I also spotted, that the extent of the movement rises with the height of the button. There is a gif of the movements:

Screenshots of movements of buttons

There is also the fragment xml in which there are the buttons:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context=".FragmentTypeA">

    <androidx.gridlayout.widget.GridLayout
        android:layout_width="match_parent"
        android:layout_height="200dp"
        app:columnCount="3"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:rowCount="5"

        app:autoSizeTextType="uniform"
        app:autoSizeMinTextSize="9sp"
        app:autoSizeMaxTextSize="16sp"
        app:autoSizeStepGranularity="2sp">

        <Button
            android:id="@+id/button1"
            android:layout_width="90dp"
            android:layout_height="45dp"
            android:layout_marginLeft="15dp"
            android:layout_marginRight="15dp"
            android:layout_marginBottom="15dp"
            android:background="@color/colorPrimaryLight"
            android:onClick="answerButtonClicked"
            android:text="@string/button"
            tools:layout_editor_absoluteX="253dp"
            tools:layout_editor_absoluteY="317dp"

            app:autoSizeTextType="uniform"
            app:autoSizeMinTextSize="9sp"
            app:autoSizeMaxTextSize="16sp"
            app:autoSizeStepGranularity="2sp"/>

        <Button
            android:id="@+id/button2"
            android:layout_width="90dp"
            android:layout_height="45dp"
            android:layout_marginLeft="15dp"
            android:layout_marginRight="15dp"
            android:layout_marginBottom="15dp"
            android:background="@color/colorPrimaryLight"
            android:onClick="answerButtonClicked"
            android:text="@string/button"
            tools:layout_editor_absoluteX="253dp"
            tools:layout_editor_absoluteY="381dp"

            app:autoSizeTextType="uniform"
            app:autoSizeMinTextSize="9sp"
            app:autoSizeMaxTextSize="16sp"
            app:autoSizeStepGranularity="2sp"/>

        <Button
            android:id="@+id/button3"
            android:layout_width="90dp"
            android:layout_height="45dp"
            android:layout_marginLeft="15dp"
            android:layout_marginRight="15dp"
            android:layout_marginBottom="15dp"
            android:background="@color/colorPrimaryLight"
            android:onClick="answerButtonClicked"
            android:text="@string/button"
            tools:layout_editor_absoluteX="133dp"
            tools:layout_editor_absoluteY="258dp"

            app:autoSizeTextType="uniform"
            app:autoSizeMinTextSize="9sp"
            app:autoSizeMaxTextSize="16sp"
            app:autoSizeStepGranularity="2sp"/>

        <Button
            android:id="@+id/button4"
            android:layout_width="90dp"
            android:layout_height="45dp"
            android:layout_marginLeft="15dp"
            android:layout_marginTop="15dp"
            android:layout_marginRight="15dp"
            android:layout_marginBottom="15dp"
            android:background="@color/colorPrimaryLight"
            android:onClick="answerButtonClicked"
            android:text="@string/button"
            tools:layout_editor_absoluteX="253dp"
            tools:layout_editor_absoluteY="258dp"

            app:autoSizeTextType="uniform"
            app:autoSizeMinTextSize="9sp"
            app:autoSizeMaxTextSize="16sp"
            app:autoSizeStepGranularity="2sp"/>

        <Button
            android:id="@+id/button5"
            android:layout_width="90dp"
            android:layout_height="45dp"
            android:layout_marginLeft="15dp"
            android:layout_marginTop="15dp"
            android:layout_marginRight="15dp"
            android:layout_marginBottom="15dp"
            android:background="@color/colorPrimaryLight"
            android:onClick="answerButtonClicked"
            android:text="@string/button"
            tools:layout_editor_absoluteX="28dp"
            tools:layout_editor_absoluteY="258dp"

            app:autoSizeTextType="uniform"
            app:autoSizeMinTextSize="9sp"
            app:autoSizeMaxTextSize="16sp"
            app:autoSizeStepGranularity="2sp"/>

        <Button
            android:id="@+id/button6"
            android:layout_width="90dp"
            android:layout_height="45dp"
            android:layout_marginLeft="15dp"
            android:layout_marginTop="15dp"
            android:layout_marginRight="15dp"
            android:layout_marginBottom="15dp"
            android:background="@color/colorPrimaryLight"
            android:onClick="answerButtonClicked"
            android:text="@string/button"
            tools:layout_editor_absoluteX="28dp"
            tools:layout_editor_absoluteY="381dp"

            app:autoSizeTextType="uniform"
            app:autoSizeMinTextSize="9sp"
            app:autoSizeMaxTextSize="16sp"
            app:autoSizeStepGranularity="2sp"/>

        <Button
            android:id="@+id/button7"
            android:layout_width="90dp"
            android:layout_height="45dp"
            android:layout_marginLeft="15dp"
            android:layout_marginTop="15dp"
            android:layout_marginRight="15dp"
            android:layout_marginBottom="15dp"
            android:background="@color/colorPrimaryLight"
            android:onClick="answerButtonClicked"
            android:text="@string/button"
            tools:layout_editor_absoluteX="133dp"
            tools:layout_editor_absoluteY="317dp"

            app:autoSizeTextType="uniform"
            app:autoSizeMinTextSize="9sp"
            app:autoSizeMaxTextSize="16sp"
            app:autoSizeStepGranularity="2sp"/>

        <Button
            android:id="@+id/button8"
            android:layout_width="90dp"
            android:layout_height="45dp"
            android:layout_marginLeft="15dp"
            android:layout_marginTop="15dp"
            android:layout_marginRight="15dp"
            android:layout_marginBottom="15dp"
            android:background="@color/colorPrimaryLight"
            android:onClick="answerButtonClicked"
            android:text="@string/button"
            tools:layout_editor_absoluteX="133dp"
            tools:layout_editor_absoluteY="381dp"

            app:autoSizeTextType="uniform"
            app:autoSizeMinTextSize="9sp"
            app:autoSizeMaxTextSize="16sp"
            app:autoSizeStepGranularity="2sp"/>

        <Button
            android:id="@+id/button9"
            android:layout_width="90dp"
            android:layout_height="45dp"
            android:layout_marginLeft="15dp"
            android:layout_marginTop="15dp"
            android:layout_marginRight="15dp"
            android:layout_marginBottom="15dp"
            android:background="@color/colorPrimaryLight"
            android:onClick="answerButtonClicked"
            android:text="@string/button"
            tools:layout_editor_absoluteX="28dp"
            tools:layout_editor_absoluteY="317dp"

            app:autoSizeTextType="uniform"
            app:autoSizeMinTextSize="9sp"
            app:autoSizeMaxTextSize="16sp"
            app:autoSizeStepGranularity="2sp"/>
    </androidx.gridlayout.widget.GridLayout>

</FrameLayout>

If you need some more info, just write and I will add it. Thank you a lot.

Solution

  • Avoid hard coding the dimensions in your layout_height, layout_width in your layout for the obvious reason that it's going be different for different devices.

    To solve the 'button alignment' issues due to the different length of the buttons' text, use a combination of nested LinearLayout and layout_weight attribute like this:

      <androidx.gridlayout.widget.GridLayout
    app:columnCount="3"
    app:rowCount="5"
    app:autoSizeTextType="uniform"
    app:autoSizeMinTextSize="9sp"
    app:autoSizeMaxTextSize="16sp"
    app:autoSizeStepGranularity="2sp"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <LinearLayout
      android:orientation="vertical"
      android:layout_width="match_parent"
      android:layout_height="wrap_content">

      <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="45dp">

        <Button
          android:text="@string/button1"
          android:layout_height="match_parent"
          android:layout_weight="1"
          android:layout_width="0dp"/>

        <Button
          android:text="@string/button2"
          android:layout_height="match_parent"
          android:layout_weight="1"
          android:layout_width="0dp"/>

        <Button
          android:text="@string/button3"
          android:layout_height="match_parent"
          android:layout_weight="1"
          android:layout_width="0dp"/>

      </LinearLayout>

      <LinearLayout
        <!-- same as above, but for button 4,5,6 -->
      </LinearLayout>

      <LinearLayout
        <!-- same as above, but for button 7,8,9 -->
      </LinearLayout>

    </LinearLayout>

  </androidx.gridlayout.widget.GridLayout>

    The above layout works, but the 'text autosizing' does not. To make it work, need to add the 'sizing' attributes to all buttons. This can be done using custom style.

      <Button
    style="@style/MyButtonStyle"
    android:text="@string/button1"
    android:layout_height="@dimen/max_height_btn"
    android:layout_weight="1"
    android:layout_width="0dp"/>

      <style name="MyButtonStyle" parent="Widget.AppCompat.Button">
    <item name="autoSizeTextType">uniform</item>
    <item name="autoSizeMinTextSize">9sp</item>
    <item name="autoSizeMaxTextSize">16sp</item>
    <item name="autoSizeStepGranularity">2sp</item>
  </style>