Search code examples
androidxmlkotlinmaterial-uimaterialbutton

MaterialButton wider than it should be warning

I use in my Android app, xml files to render the UI.

In my xml files I use Google's MaterialButton from com.google.android.material.button to render a button at the bottom of a screen.

More specifically I define it in a ConstraintLayout like this:

 <com.google.android.material.button.MaterialButton
    android:id="@+id/continue_button"
    style="@style/MyTheme.MaterialComponents.Button"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_margin="16dp"
    android:padding="16dp"
    android:text="@string/continue"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent" />

I notice that Android Studio (I'm using Android Studio Electric Eel | 2022.1.1) reports this Layout Validation warning:

The button continue_button is too wide

The button MaterialButton is wider than 320dp in 4 preview configurations. Material Design recommends buttons to be no wider than 320d

Questions:

  • What does this warning actually mean? I'm not sure where I can find these "preview configurations" it's mentioning.
  • How can I resolve this warning?
Solution

  • By defining the layout_width="0dp" & end & start to parent.

    That means the button is as wide as the ConstraintLayout. (- 64dp padding + margin) This is a lint check that looks at how the layout will look in various screen sizes. Checking for things like overlapping widgets etc.

    If your design intent is to have a 320dp wide button on a 384dp or greater then ignore. (there is probably a tool attribute) But it is typically a strange UI look to have a very wide button in Android.

    You can also set the maximum width you want by setting the app:layout_constraintWidth_max="..." attribute.