How to remove extra padding or margin in material design button?
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
.
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.
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" />