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

Question

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

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.

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.

Y r u giving margin to Button in ur xyz.xml if u want Button below TextView w/o any space. — Chintan Bawa, Jan 25 '16 at 10:18
This problem is due to different size of screen you are testing @sachi — Amit Vaghela, Jan 25 '16 at 10:24
@ChintanBawa I have updated the code. But still it won't work as expected. I am facing the problem only with the OS 5.1.1 and above. — sachi, Jan 25 '16 at 10:26
have you made different xml files for different devices ? @sachi — Amit Vaghela, Jan 25 '16 at 11:45
okay in your single xml you have created different dimen files that are used for different devices for fonts,margin etc right ?@sachi — Amit Vaghela, Jan 25 '16 at 12:21
look this answer https://stackoverflow.com/a/43298421/526523 — Conan, Jul 24 '17 at 10:37

score 34 · Answer 1 · answered Mar 26 '20 at 13:23

34

android:insetBottom="0dp"

<com.google.android.material.button.MaterialButton
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:text="Edit"
        app:cornerRadius="0dp"
        android:insetBottom="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

answered Mar 26 '20 at 13:23

Meysam Keshvari

1,141
12
14

setting insetBottom to 0dp worked in single activity architecture where all buttons aligned to bottom were leaving small gap at bottom. – Chandan Pednekar Aug 08 '20 at 18:26

score 9 · Accepted Answer · edited Dec 13 '16 at 18:01

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.

score 2 · Answer 3 · answered Oct 18 '21 at 12:48

I also had issue related to top and bottom spacing for Apply button as you can see above image.

I wanted to show button with uniform background without any spacing as you can see for "Reset" button. But I have to set both property button background as well as background Tint to same color to achieve this. If I reuse this buttons at more than one place then I have to programmatically change 2 property to change background color of button.

You can try below solution:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <com.google.android.material.button.MaterialButton
        android:id="@+id/btnLeftOk"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:filterTouchesWhenObscured="true"
        android:gravity="center"
        android:text="@string/apply"
        android:textColor="@color/white"
        app:backgroundTint="@color/primary_dark_gray"
        app:cornerRadius="0dp" />

    <com.google.android.material.button.MaterialButton
        android:id="@+id/btnRightCancel"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:filterTouchesWhenObscured="true"
        android:gravity="center"
        android:text="@string/reset"
        android:insetTop="0dp"
        android:insetBottom="0dp"
        android:textColor="@color/white"
        app:cornerRadius="0dp"
        app:backgroundTint="@color/btn_background_gray" />
</LinearLayout>

After applying below property to "Reset" button.

android:insetTop="0dp"
android:insetBottom="0dp"

Button spacing will be removed from top and bottom. It will occupy spacing with button color. (like in Reset button)
Button background can be changed using one property app:backgroundTint.

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

3 Answers3

Linked