CODEWITHSUNDEEP
javaandroidbutton
omega
omega

Reputation: 43843

How to remove padding around buttons in Android?

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?

Upvotes: 272

Views: 189604

Answers (21)

CoolMind
CoolMind

Reputation: 28793

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"
    ...

Upvotes: 0

Fawzi Abd-Elaal
Fawzi Abd-Elaal

Reputation: 263

Add these properties:

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

Upvotes: 14

Mikhail Sharin
Mikhail Sharin

Reputation: 4065

To remove AppCompatButton paddings programmatically:

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

Upvotes: 0

Maduro
Maduro

Reputation: 725

For <androidx.appcompat.widget.AppCompatButton>

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

            </androidx.appcompat.widget.AppCompatButton>

Upvotes: 2

Prakash Reddy
Prakash Reddy

Reputation: 1002

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"/>

Upvotes: 41

Ali Rezaiyan
Ali Rezaiyan

Reputation: 3309

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"/>

Upvotes: 25

Shihab Uddin
Shihab Uddin

Reputation: 6931

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:

enter image description here

Upvotes: 3

Alec Gerona
Alec Gerona

Reputation: 2897

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.

Upvotes: 0

sochas
sochas

Reputation: 2501

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"/>

Upvotes: 225

golkarm
golkarm

Reputation: 1014

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?

Upvotes: 2

Allan Veloso
Allan Veloso

Reputation: 6369

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"
    ... />

Upvotes: 5

Neuron
Neuron

Reputation: 1129

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.

Upvotes: -1

Mike6679
Mike6679

Reputation: 6117

Give your button a custom background: @drawable/material_btn_blue

Upvotes: 1

Panagiotis
Panagiotis

Reputation: 93

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.

Upvotes: 7

Yashoda Bane
Yashoda Bane

Reputation: 399

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>

Upvotes: 16

user1005462
user1005462

Reputation: 332

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

Upvotes: 6

juil
juil

Reputation: 2488

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

Upvotes: 2

Casey Murray
Casey Murray

Reputation: 1582

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.

Upvotes: 8

D. A. Terre
D. A. Terre

Reputation: 6242

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>

Upvotes: 592

Shobhit Puri
Shobhit Puri

Reputation: 26007

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.

Upvotes: 27

Delyan
Delyan

Reputation: 8911

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

Upvotes: 55

Related Questions