How to properly remove padding (or margin?) around buttons in Android?

Question

Currently, I have the following bottom log in button.

When button is not being pressed

When button is being pressed

The XML loo

Answer 1

I have been through what you are going through. Long story short, you just cannot do it cleanly with a <Button> tag alone, while ensuring backwards compatibility.

The simplest and the most widely practiced method is to use a <RelativeLayout> underlay, around a <Button>.

Button Code:

        <RelativeLayout
            android:id="@+id/myButtonUnderlay"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/colorPrimary"
            android:visibility="visible">

            <Button
                android:id="@+id/myButton"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="?attr/selectableItemBackgroundBorderless"
                android:text="I am as cute as a Button"/>

        </RelativeLayout>

Wherever you need to use a button, you use this complete code.

Here is the breakdown:

---

1. OnClick events will be hooked to myButton.
2. Control dimensions of your button, by changing attributes of myButtonUnderlay.
3. In myButton, android:background="?attr/selectableItemBackgroundBorderless". This will make it a transparent button with just the text, and backwards compatible ripples.
4. In myButtonUnderlay, you will do all the other background applications, like setting the color of the button, margins, paddings, borders, gradients, and shadows etc.
5. If manipulation of the button's visibility (programmatic or not) is wish, you do it on myButtonUnderlay.

Note: To ensure backwards compatibility, make sure that you use

android:background="?attr/selectableItemBackgroundBorderless", and NOT

android:background="?android:attr/selectableItemBackgroundBorderless"

Answer 2

Set the Button background as android:background="?selectableItemBackground"

<LinearLayout
    android:background="?attr/welcomeBottomNavBarBackground"
    android:orientation="horizontal"
    android:id="@+id/sign_in_bottom_nav_bar"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true">

    <Button
        style="?android:attr/buttonBarButtonStyle"
        android:background="?selectableItemBackground"
        android:id="@+id/sign_in_button"
        android:layout_width="0dp"
        android:width="0dp"
        android:layout_weight="1.0"
        android:layout_height="48dp"
        android:gravity="center"
        android:layout_gravity="center"
        android:enabled="true"
        android:textAllCaps="true"
        android:text="@string/log_in" />

</LinearLayout>

Answer 3

The best solution these days is just to use MaterialButton in place of Button.

Note: MaterialButton is visually different from Button and AppCompatButton. One of the main differences is that AppCompatButton has a 4dp inset on the left and right sides, whereas MaterialButton does not. To add an inset to match AppCompatButton, set android:insetLeft and android:insetRight on the button to 4dp, or change the spacing on the button’s parent layout.

When replacing buttons in your app with MaterialButton, you should inspect these changes for sizing and spacing differences.

Source: https://material.io/develop/android/components/material-button/

Answer 4

As @David Medenjak answer you can read the Google Material design Button-style to its developer site. Use button style as @David Medenjak explained in his answer. You can also do by the following way also It is not a padding or margin but it is actually background effect of button. If you want to remove that then you can do as following.

Option 1:

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>

Step 2:Create a new XML file under drawables folder and add the following code: I named my XML file as button_prime.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/button_prime"
        android:colorButtonNormal="#3578A9" />

Option 2:

With the Support Library v7, all the styles are actually already defined and ready to use, for the standard buttons, all of these styles are available.So you can set your button style like this

<Button
    style="@style/Widget.AppCompat.Button.Borderless"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:text="BUTTON"
    android:gravity="center"
    android:minHeight="0dp"
    android:minWidth="0dp"
    android:background="@color/colorAccent"/>

For more detail of Button style please check this answer

I think you will check this answer also. I hope you will get your solution.

Answer 5

The padding and margin may be a result of the original resources used in the button.

So you could try to change the resources used, using a selector:

<selector
  xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@drawable/btn_action_hover" />
    <item android:state_selected="true" android:drawable="@drawable/btn_action_hover" />
    <item android:state_focused="true" android:drawable="@drawable/btn_action_hover" />
    <item android:drawable="@drawable/btn_action_normal" />
</selector>

That would change the default images/shapes for your buttons, so you could try using drawables and set every item to a drawable. The drawable being either a bitmap, or a .xml file(style file) defining the look of the button in its current state. I assume there still are some native styles included even though you have set the button-style yourself. This may be because you aren't using a custom theme. So the issue may also be solved by defing

theme="@style/myNewTheme"

where myNewTheme is your theme, and it should have any parents(parent="" should not be defined).

Take any given theme(designed by Google/Android, for an instance Theme.AppCompat.[name]), it does also come with a buttonStyle. This is a part of Theme.Holo.Light:

    <!-- Button styles -->
    <item name="buttonStyle">@style/Widget.Holo.Light.Button</item>

    <item name="buttonStyleSmall">@style/Widget.Holo.Light.Button.Small</item>
    <item name="buttonStyleInset">@style/Widget.Holo.Light.Button.Inset</item>

    <item name="buttonStyleToggle">@style/Widget.Holo.Light.Button.Toggle</item>
    <item name="switchStyle">@style/Widget.Holo.Light.CompoundButton.Switch</item>
    <item name="mediaRouteButtonStyle">@style/Widget.Holo.Light.MediaRouteButton</item>

    <item name="selectableItemBackground">@drawable/item_background_holo_light</item>
    <item name="selectableItemBackgroundBorderless">?attr/selectableItemBackground</item>
    <item name="borderlessButtonStyle">@style/Widget.Holo.Light.Button.Borderless</item>
    <item name="homeAsUpIndicator">@drawable/ic_ab_back_holo_light</item>

As you see, this theme defines how your buttons will look/work in basic features. You can override parts of it, but you haven't overridden the important parts(being buttonStyle and similar). So if you create a new theme yourself and style it to your liking and set the theme(using theme="themename") and that theme does not inherit any theme, you should be able to style your buttons to your liking without having to worry about the default styles in the theme

Basically:

calling padding/margin="0dp" will not help. The default drawable defined by the theme has this in the button drawable, meaning you cannot change it. So you have to either change the button style, or change the theme completely. Make sure that theme does not have any parents, because many themes define the button style. You do not want the button style defined by the theme.

Answer 6

I don't really know whether I should call it padding or margin.

The button is enacting surface elevation for providing visual feedback in response to touch. It is one of two feedbacks used for surface reaction; the first one being the ripple effect. For example, a raised button has resting state elevation of 2dp and pressed state elevation of 8dp (See raised button under Shadows). The button meets the finger as it touches the surface.

May I know what is the best way to remove button padding during pressed, yet retain the material designed pressed visual effect?

Having answered the first part, I do not believe you are having all of the material design if you wish to remove the surface elevation effect.

Anyways, here is how to remove surface elevation visual feedback:

Add animator file button_raise.xml to animator directory under res directory having the following code:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:state_enabled="true"
        android:state_pressed="true">

        <objectAnimator
            android:duration="@android:integer/config_shortAnimTime"
            android:propertyName="translationZ"
            android:valueTo="0dp"
            android:valueType="floatType" />
    </item>
</selector>

Refer newly created animator in the button using stateListAnimator property:

<Button
    ...
    android:stateListAnimator="@animator/button_raise"
    ... />

Hope this helps.