CODEWITHSUNDEEP
androidmaterial-design
Priyanka Singh
Priyanka Singh

Reputation: 303

Why does MaterialButton text not containing full space?

See:

enter image description here

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.

Upvotes: 4

Views: 1284

Answers (1)

Jayanth
Jayanth

Reputation: 6277

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.

enter image description here

and Result with overriding padding to 0dp enter image description here

Hope this helps, Happy Coding!!

Upvotes: 8

Related Questions