How to remove additional registration or margin in the material design button?

Question

I am trying to create a button attached to a TextView above a button, as shown in the image below.

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

Below is the code used to reach the user interface.

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 takes the field for all four sides, and the screenshot looks below.

If I remove the “android: theme” and provided the “android: background”, the user interface will look like the first image. But this will not give a ripple effect. So, how to achieve UI as the first ripple image.

Answer 1

Step 1: Put the code below 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 used # FF3E96 above) and the background color (I used # FF0000) for your button. You can also override textColor values ​​from the corresponding xml layout using the android:colorButtonNormal .

Step 2. Create a new XML file in the 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 pull it out 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.