Why does MaterialButton text not containing full space?

Question

See:

Code:

<RelativeLayout
            android:id="@+id/circle_card_payment"
            android:layout_width="40dp"
            android:layout_height="40dp">

            <com.google.android.material.button.MaterialButton
                android:id="@+id/logo"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:backgroundTint="@color/colorBlack"
                android:insetLeft="0dp"
                android:insetTop="0dp"
                android:insetRight="0dp"
                android:insetBottom="0dp"
                android:text="W"
                android:textColor="#FFFFFF"
                android:textSize="16sp"
                app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay_ButtonCircle50"
                app:strokeWidth="0dp" />

        </RelativeLayout>

style.xml

 <style name="ShapeAppearanceOverlay_ButtonCircle50">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSize">20dp</item>
    </style>

For confirmation that material button is containing full space, I sat material button color to black. and inside text color is white.

Can anybody give me the exact solution according to my situation? Please note that you should not increase the relative layout size from 40 to 50 dp, I know that can solve the problem, but logo size will be bigger and that is not appropriate.

Please note, I must need to wrap this button in any root layout. That is mandatory. Like right now my material button is inside Relative layout.

Answer 1

Why does MaterialButton text not containing full space?

The problem is with the material button because by default material buttons have padding. you remove or override that padding by setting padding attribute in the xml itself, this should solve the problem.

just add android:padding = "0dp" to solve this. or as Ricardo.A suggest in comment set in the style <item name="android:padding">0dp</item>

<RelativeLayout
        android:id="@+id/circle_card_payment"
        android:layout_width="40dp"
        android:layout_height="40dp">

        <com.google.android.material.button.MaterialButton
            android:id="@+id/logo"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:backgroundTint="#323232"
            android:insetLeft="0dp"
            android:insetTop="0dp"
            android:insetRight="0dp"
            android:padding="0dp"
            android:insetBottom="0dp"
            android:text="W"
            android:textColor="#FFFFFF"
            android:textSize="16sp"
            app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay_ButtonCircle50"
            app:strokeWidth="0dp" />

    </RelativeLayout>

Result with default padding.

and Result with overriding padding to 0dp

Hope this helps, Happy Coding!!