sachi sachi - 6 months ago 84
Android Question

How to remove extra padding or margin in material design button?

I am trying to create an button which is attached to the TextView above the button as shown in the below image.

enter image description here

The above screenshot is taken from the Note 4 and the OS version is 5.0.1.

Below is the code is used to achieve the UI.

layout/xyz.xml

<Button
android:layout_width="250dp"
android:layout_height="50dp"
android:theme="@style/myButton"
android:text="Cancel"/>


values-v21/style.xml

<style name="myButton" parent="@style/Base.Widget.AppCompat.Button">
<item name="android:colorButtonNormal">#3578A9</item>
<item name="android:inset">0dp</item>
</style>


But if I run the same code in Nexus4 OS verison 5.1.1, the button is taking the margin for all the 4 sides and the screenshot looks like below.

enter image description here

If I remove the "android:theme" and provide the "android:background", the UI looks like the first image. But It won't give the ripple effect. So how the achieve the UI as first image with the ripple effect.

Answer

Step 1: Put the below code in styles.xml

    <style name="myColoredButton">
        <item name="android:textColor">#FF3E96</item>
        <item name="android:padding">0dp</item>
        <item name="android:minWidth">88dp</item>
        <item name="android:minHeight">36dp</item>
        <item name="android:elevation">1dp</item>
        <item name="android:translationZ">1dp</item>
        <item name="android:background">#FF0000</item>
    </style>

Here you can change the textColor( I have used #FF3E96 above) and background color (I have used #FF0000) for your button. You can also override textColor values from your Button related layout xml by using android:colorButtonNormal.

Step 2:Create a new XML file under drawables folder and add the following code: I named my XML file as primary.xml

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/colorPrimary">
    <item>
        <shape xmlns:android="http://schemas.android.com/apk/res/android">
            <corners android:radius="1dp" />
            <solid android:color="#8B8386" />
        </shape>
    </item>
</ripple>

Step 3: Use the style and drawable in your Button as follows.

    <Button
        style="@style/myColoredButton"
        android:layout_width="250dp"
        android:layout_height="50dp"
        android:text="Cancel"
        android:gravity="center"
        android:background="@drawable/primary_round"
        android:colorButtonNormal="#3578A9" />

Hope it solves your problem.

If this answer is useful to you, Accept the Answer.

Comments