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.

Answer 1

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"

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