How to remove padding around buttons in Android?

Question

In my Android app, I have this layout:

<?xml version="1.0" encoding="utf-8" ?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:orientation="vertical">

    <fragment
         android:id="@+id/map"
         android:layout_width="match_parent"
         android:layout_height="0dp" 
         android:layout_weight="1" 
         class="com.google.android.gms.maps.SupportMapFragment"/>

    <Button
        android:id="@+id/button_back"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:onClick="CloseActivity"
        android:padding="0dp"
        android:text="@+string/back" />

</LinearLayout>

In the preview and on the phone, it looks like:

As you can see on the button in the bottom area, there is some padding there.

How can I get rid of that, and let the button fully fill the bottom area?

Shalloon

DATerre's answer has been correct for two years. Can you mark it as so? – Stound

This question requires editing to have a better title. It has become the first result in Google Search whiile it doesn't really answer the question. – Nietzsche

Answer 1

For me the problem turned out to be minHeight and minWidth on some of the Android themes.

On the Button element, add:

<Button android:minHeight="0dp" android:minWidth="0dp" ...

Or in your button's style:

<item name="android:minHeight">0dp</item>
<item name="android:minWidth">0dp</item>

Vignola

Took a while until I realised I'm not dealing with some weird padding behaviour but rather minHeight. – Respire

I don't think this answer actually answers the original question at all. But I'm still glad I came across it because I couldn't figure out why my Button was still taking up so much space even after setting its android:background="@null". The fact that the Button's default style is responsible is a very good tip. – Enrobe

It's important use both android:minHeight="0dp" android:minWidth="0dp", and not only one of them. – Grayson

This removes the rounded corner and ripple effect from the button on Android Nougat, any idea what could be causing this behavior? – Fasto

This answer solved a problem with a GridLayout containing buttons with autoSize options on the text going berserk as I tried to get more buttons to fit into rows/columns. Simple answer that took me a long time to find... – Obovoid

Answer 2

My solution was set to 0 the insetTop and insetBottom properties.

<android.support.design.button.MaterialButton
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:insetTop="0dp"
        android:insetBottom="0dp"
        android:text="@string/view_video"
        android:textColor="@color/white"/>

Asyndeton

Answer 3

That's not padding, it's the shadow around the button in its background drawable. Create your own background and it will disappear.

Macao

I did. didn't disappear. – Aker

How can its size be measured? – Beneficiary

This is it, @Behr, changing the background to the button's color – Fencer

I just realized my background image has transparent padding – Hip

Answer 4

for MaterialButton, add below properties, it will work perfectly

<android.support.design.button.MaterialButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:insetTop="0dp"
    android:insetBottom="0dp"/>

Flurry

Answer 5

A workaround may be to try to use -ve values for margins like following:

<Button
    android:id="@+id/button_back"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:onClick="CloseActivity"
    android:padding="0dp"
    android:layout_marginLeft="-5dip"
    android:layout_marginRight="-5dip"
    android:layout_marginTop="-5dip"
    android:layout_marginBottom="-5dip"
    android:text="@string/back" />

It will make that space vanish. I mean you can choose the appropriate dip value, which makes it go away. It worked for me. Hope it works for you.

Centrosphere

I would be careful using this solution. What it does is just hidding button background (border + shadows) using negative margins. What is styling changes and border+shadow takes more then 5dp? I would rather use Delyan/Casey Murray solution to be on the safe side. – Basie

Also, negative margins are not officially supported in Android so I too would avoid this – Wrightson

Answer 6

To remove the Top and Bottom padding

<com.google.android.material.button.MaterialButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:minHeight="0dp"//to effect the following parameters, this must be added!
        android:insetTop="0dp"
        android:insetBottom="0dp"/>

To remove the Left and Right padding

<com.google.android.material.button.MaterialButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:minWidth="0dp"//to effect the following parameters, this must be added!
        android:insetLeft="0dp"
        android:insetRight="0dp"/>

Lakendra

Answer 7

For removing padding around toggle button we need set minWidth and minHeight 0dp.android:minWidth="0dp" android:minHeight="0dp"

  <ToggleButton
        android:id="@+id/toggle_row_notifications"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:minWidth="0dp"
        android:minHeight="0dp"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:padding="@dimen/_5sdp"
        android:textOn=""
        android:textOff=""
        android:background="@android:color/transparent"
        android:button="@drawable/toggle_selector"
        />

set your drawable file to button attribute like: android:button="@drawable/toggle_selector"

Below is my toggle_selecter.xml file

<?xml version="1.0" encoding="utf-8"?>
     <selector xmlns:android="http://schemas.android.com/apk/res/android">
            <item android:drawable="@drawable/notifications_toggle_on" 
                  android:state_checked="true"/>
            <item android:drawable="@drawable/notifications_toggle_off" 
                  android:state_checked="false"/>
     </selector>

Condor

Answer 8

Add these properties:

    android:insetTop="0dp"
    android:insetBottom="0dp"
    android:minWidth="0dp"
    android:minHeight="0dp"
    android:padding="0dp"

Emmert

Thanks! I didn't know android:padding="0dp" was also needed (together with paddingStart, paddingEnd to remove top and bottom paddings and keep left and right). – Crossway

Answer 9

I am new to android but I had a similar situation. I did what @Delyan suggested and also used android:background="@null" in the xml layout file.

Freehand

Answer 10

I had the same problem and it seems that it is because of the background color of the button. Try changing the background color to another color eg:

android:background="@color/colorActive"

and see if it works. You can then define a style if you want for the button to use.

Pinzler

This removes the highlighting/animation capability of the button. – Forefinger

Answer 11

In the button's XML set android:includeFontPadding="false"

Delmerdelmor

Answer 12

It's not a padding but or the shadow of the background drawable or a problem with the minHeight and minWidth.

If you still want the nice ripple affect, you can make your own button style using the ?attr/selectableItemBackground:

<style name="Widget.AppTheme.MyCustomButton" parent="Widget.AppCompat.Button.Borderless">
    <item name="android:minHeight">0dp</item>
    <item name="android:minWidth">0dp</item>
    <item name="android:layout_height">48dp</item>
    <item name="android:background">?attr/selectableItemBackground</item>
</style>

And apply it to the button:

<Button 
    style="@style/Widget.AppTheme.MyCustomButton"
    ... />

Gamp

Answer 13

You can use Borderless style in AppCompatButton like below. and use android:background with it.

style="@style/Widget.AppCompat.Button.Borderless.Colored"

Button code

<androidx.appcompat.widget.AppCompatButton
        android:id="@+id/button_visa_next"
        android:background="@color/colorPrimary"
        style="@style/Widget.AppCompat.Button.Borderless.Colored"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/spacing_normal"
        android:text="@string/next"
        android:textColor="@color/white"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

Output:

Sasha

Answer 14

It doesn't seem to be padding, margin, or minheight/width. Setting android:background="@null" the button loses its touch animation, but it turns out that setting the background to anything at all fixes that border.

---

I am currently working with:

minSdkVersion 19
targetSdkVersion 23

Urology

Answer 15

A standard button is not supposed to be used at full width which is why you experience this.

Background

If you have a look at the Material Design - Button Style you will see that a button has a 48dp height click area, but will be displayed as 36dp of height for...some reason.

This is the background outline you see, which will not cover the whole area of the button itself.
It has rounded corners and some padding and is supposed to be clickable by itself, wrap its content, and not span the whole width at the bottom of your screen.

Solution

As mentioned above, what you want is a different background. Not a standard button, but a background for a selectable item with this nice ripple effect.

For this use case there is the ?selectableItemBackground theme attribute which you can use for your backgrounds (especially in lists).
It will add a platform standard ripple (or some color state list on < 21) and will use your current theme colors.

For your usecase you might just use the following:

<Button
    android:id="@+id/sign_in_button"
    style="?android:attr/buttonBarButtonStyle"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Login"
    android:background="?attr/selectableItemBackground" />
                   <!--  /\ that's all -->

There is also no need to add layout weights if your view is the only one and spans the whole screen

If you have some different idea on what your background should look like you have to create a custom drawable yourself, and manage color and state there.

This answer copied from Question: How to properly remove padding (or margin?) around buttons in Android?

Wickner

Answer 16

For <androidx.appcompat.widget.AppCompatButton>

           <androidx.appcompat.widget.AppCompatButton
                .
                .
                android:minHeight="0dp"
                android:minWidth="0dp" 
               >

            </androidx.appcompat.widget.AppCompatButton>

Presentable

Answer 17

Give your button a custom background: @drawable/material_btn_blue

Excaudate

Answer 18

After hours of digging around multiple answers I finally found a solution that doesn't use a different element, manipulate minHeight or minWidth, or even wrapping Button around a RelativeLayout.

<Button
    android:foreground="?attr/selectableItemBackground"
    android:background="@color/whatever" />

The main takeaway here is the setting of the foreground instead of background as many of the answers stipulate. Changing the background itself to selectableItemBackground will just overwrite any changes you made to the button's color/background, if any.

Changing the foreground gives you the best of both worlds: get rid of the "invisible" padding and retain your button's design.

Forefinger

Answer 19

To remove AppCompatButton paddings programmatically:

button.setPadding(0, 0, 0, 0)
button.minHeight = 0
button.minimumHeight = 0

Cissy

Answer 20

If you use (now material) Button with style, add there parameters:

<style name="SomeButton" parent="Widget.MaterialComponents.Button.TextButton">
    <item name="android:insetTop">0dp</item>
    <item name="android:insetBottom">0dp</item>
    <!-- Margins between buttons -->
    <item name="android:layout_marginTop">4dp</item>
    <item name="android:layout_marginBottom">4dp</item>
    <!-- Remove extra paddings -->
    <item name="android:minHeight">0dp</item>
</style>

<Button
    style="@style/SomeButton"
    ...

In case you set a drawable as a background and want to add some margins, don't use upper code. You should add top and bottom margins to the drawable:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Top and bottom margins -->
    <item
        android:bottom="4dp"
        android:top="4dp">
        <!-- Below follows your drawable -->
        <selector>
            <item android:state_enabled="false">
                <shape>
                    <solid android:color="#f0f0f0" />
                </shape>
            </item>
            <item android:state_enabled="true">
                <shape>
                    <solid android:color="#ffff80" />
                </shape>
            </item>
        </selector>
    </item>
</layer-list>

<Button
    android:background="@drawable/some_drawable"
    app:backgroundTint="@null"
    ...

Crossway

Answer 21

You can also do it with layout_width(height) parameters.

E.g. I have deleted top and bottom space with android:layout_height="18dp" code.

Glib