Android custom button margin

Question

I have a custom button layout

<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android">     <item android:state_pressed="true">         <shape>             <gradient android:startColor="@color/pres1"                 android:endColor="@color/pres2" android:angle="270" />             <stroke android:width="5dp" android:color="@color/stro3" />             <corners android:radius="5dp" />             <padding android:left="10dp" android:top="20dp"                 android:right="10dp" android:bottom="20dp" />         </shape>     </item>     <item android:state_focused="true">         <shape>             <gradient android:endColor="@color/focu1"                 android:startColor="@color/focu2" android:angle="270" />             <stroke android:width="5dp" android:color="@color/stro2" />             <corners android:radius="5dp" />             <padding android:left="10dp" android:top="20dp"                 android:right="10dp" android:bottom="20dp" />         </shape>     </item>     <item>         <shape>             <gradient android:endColor="@color/norm1"                 android:startColor="@color/norm2" android:angle="270" />             <corners android:radius="5dp" />             <padding android:left="10dp" android:top="20dp"                 android:right="10dp" android:bottom="20dp" />         </shape>     </item>  </selector> 

And for the below lay out

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     android:orientation="vertical" android:layout_width="fill_parent"     android:layout_height="fill_parent" android:background="@color/all_white">      <TextView android:layout_width="fill_parent"         android:layout_height="wrap_content" android:text="@string/hello"         android:textColor="@color/all_red" />      <Button android:id="@+id/mq_categories" android:layout_width="fill_parent"         android:layout_height="wrap_content" android:text="Browse Quiz Categories"         android:background="@drawable/custom_button" />     <Button android:id="@+id/mq_random" android:layout_width="fill_parent"         android:layout_height="wrap_content" android:text="Enter Random Quiz"         android:background="@drawable/custom_button" />  </LinearLayout> 

following output is generated

I need to add some margin between buttons, Any help appreciated..

Answer 1

Just do it this way

<Button android:id="@+id/mq_categories"     android:layout_width="fill_parent"     android:layout_height="wrap_content"     android:text="Browse Quiz Categories"     android:background="@drawable/custom_button"     android:layout_marginBottom="5dp"/> 

This way you set a margin of 5 density independent pixels on the bottom of your first button.

Answer 2

I had the same problem and the solution doesn't seems to be out there. After trying couple of things following did the trick for me,

1. Define Custom Button Layout as done in the question

2. Inside res>values>styles.xml file, add the new style as below,

   <style name="Widget.Button_Custom" parent="android:Widget">     <item name="android:layout_margin">5dp</item>     <item name="android:background">@drawable/button_custom</item> </style> 

3. Use the style in your layout

,

<?xml version="1.0" encoding="utf-8"?>  <Button android:id="@+id/mq_categories"          android:layout_width="fill_parent"         android:layout_height="wrap_content" android:text="         android:background="@drawable/custom_button"          style="@style/Widget.Button_Custom" /> 

That should do it. Besides margin, you can define many other properties in the style tag. Hope that helps!