Android: Custom Button Style not recognizing margins

Question

I am creating a custom button style and applying it to all buttons in my theme, but the buttons don't seem to react to the part of the style that says to change their margins.

(Here's the tutorial I followed to learn this: http://www.androidcookbook.com/Recipe.seam?recipeId=3307)

Here's the shape I'm using for the button (not sure if it matters to you?):

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid
        android:color="#2AB571" />
    <padding android:left="7dp"
        android:top="7dp"
        android:right="7dp"
        android:bottom="7dp" />
    <corners android:bottomRightRadius="25dp" />
    <corners android:topLeftRadius="25dp" />
</shape>

And here's the style buttonStyle I've created (with the margin set at the bottom):

<style name="button" parent="@android:style/Widget.Button">
    <item name="android:gravity">center_vertical|center_horizontal</item>
    <item name="android:textColor">#FFFFFF</item>
    <item name="android:shadowColor">#FF0000</item>
    <item name="android:shadowDx">0</item>
    <item name="android:shadowDy">-1</item>
    <item name="android:shadowRadius">0.2</item>
    <item name="android:background">@drawable/button</item>
    <item name="android:minHeight">48dip</item>
    <item name="android:minWidth">88dip</item>
    <item name="android:layout_margin">50dp</item>
</style>

Then here is where I'm applying the buttonStyle to my theme:

<?xml version="1.0" encoding="utf-8"?>
<resources>
        <style name="GreenBlueTheme" parent="Theme.AppCompat.Light.DarkActionBar">
            <!-- Customize your theme here. -->
            <item name="colorPrimary">@color/colorPrimary</item>
            <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
            <item name="colorAccent">@color/colorAccent</item>
            <item name="android:buttonStyle">@style/button</item>
        </style>
</resources>

Then here is an image of what it looks like:

Why no margin of 50dp?

Thanks for your help, Rune.

Answer 1

Try this one

<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFFFFF" >
        <Button 
         android:text="button1"
         style="@style/button"/>
        <Button 
         android:text="button2"             
         style="@style/button" />
</LinearLayout>

Explanation: Attributes which begin with layout_ are LayoutParams, or one of its subclasses (e.g. MarginLayoutParams). LayoutParams are used by views to tell their parent ViewGroup how they want to be laid out. Each and every ViewGroup class implements a nested class that extends ViewGroup.LayoutParams. Therefore, LayoutParams are specific to the ViewGroup's type. What this means is that while a TableLayout and a LinearLayout may both have layout_margin as one of it's LayoutParams, they are considered to be completely different attributes.

So layout_margin is not just general attribute that can be applied anywhere. It must be applied within the context of a ViewGroup that specifically defines it as a valid argument. A view must be aware of the type of its parent ViewGroup when LayoutParams are applied.

Specifying layout_margin in a style, including that style in a theme, and attempting to apply that theme to an application/activity will result in the layout attributes being dropped, because no ViewGroup parent has been specified yet and so the arguments are invalid. However, applying the style to an EditText view that has been defined with a TableLayout works, because the parent ViewGroup (the TableLayout) is known.

Taken from Android - margins specified in custom style not taking effect

Sources:

Android documentation on Layout Parameters.

Answer 2

I found a workaround on this link: To use layout_marginLeft in a button style applied as a theme?

Do a search for 'inset'.

Applying an 'inset' markup around your 'shape' element allows you to apply something similar to margins. Seems to work just fine for me now.