MaterialButton wider than it should be

Issue

After implementing a MaterialButton, its width doesn't seem to wrap to the text inside for some reason leaving extra space to the right. Does the MaterialButton need to be inside a ConstraintLayout for this to work? Or is there something in my code that is incorrect?

button layout

<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.button.MaterialButton
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/myBtn"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="start|center_vertical"
    android:padding="12dp"
    android:layout_margin="12dp"
    style="@style/Widget.MaterialComponents.Button.OutlinedButton" />

Solution

MaterialButton uses a style that, deep in its hierarchy, inherits from Base.Widget.AppCompat.Button, which defines this attribute:

<item name="android:minWidth">88dip</item>

You can override this in your own style/theme or directly on your <Button> tag:

android:minWidth="1dp"

You can see this by viewing the quick documentation for the Widget.MaterialComponents.Button style (scroll to the bottom):

Answered By - Ben P.