Why button gets bigger when the background is set in android

Question

I encountered a problem with the Button view when I set a background to it using the android:background attribute in xml. Before I set the background, the button has its default size. But when I apply a color as a background, it is getting bigger, even though I did not set a different width or height on it.

This is my xml layout before I set background attribute to button

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <Button
        android:background="@color/white"
        android:layout_gravity="center_horizontal"
        android:id="@+id/btn_row_option_done"
        android:text="Done"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <Button
        android:background="@color/white"
        android:layout_gravity="center_horizontal"
        android:text="Edit"
        android:id="@+id/btn_row_option_edit"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <Button
        android:layout_gravity="center_horizontal"
        android:text="Delete"
        android:id="@+id/btn_row_option_delete"
        android:background="@color/red"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <Button
        android:layout_gravity="center_horizontal"
        android:text="Cancel"
        android:id="@+id/btn_row_option_cancel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</LinearLayout>

So the cancel button is default size like in screenshot.

But when I set a color on the cancel button like this

 <Button
        android:background="@color/white"
        android:layout_gravity="center_horizontal"
        android:text="Cancel"
        android:id="@+id/btn_row_option_cancel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

Then the button gets bigger than default size, even though I did not make the width or height bigger.

This is the screenshot

As you can see above the cancel button became bigger. Actually I am setting background color. How can I fix it to get the default size even after I set the background color?

score 22 · Accepted Answer · answered Jan 27 '16 at 17:29

22

You have to distinguish between the size of the Button, its width and height, the whole area you can click on, and the image used for displaying the button.

The default button on android has a padding applied to its drawable - it seems like it is smaller. It actually has the same size.

If you make your own drawable and apply no padding, the background will draw within the whole bounds of the view, making it seem bigger.

You can always just use the default button but apply your own color by using AppCompat. This supports tinting the background of the default button.

<android.support.v7.widget.AppCompatButton
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:backgroundTint="#ffaa00"/> <!-- <--- Your color here  -->

...which will let you use the same appearence.

answered Jan 27 '16 at 17:29

David Medenjak

33,993
14
106
134

2

@WaiYanHein yes, because of the reasons explained above.You are replacing the **background** with a `ColorDrawable` which will fill the *whole* view. You need to either just use `backgroundTint` to change the color, or create a custom drawable and apply some padding – David Medenjak Jan 27 '16 at 17:36
Sorry . It worked. Thanks. It does not event break the existing java code. Right ? – Wai Yan Hein Jan 27 '16 at 17:37
@WaiYanHein if you use AppCompat it will work fine. That's what app compat is for – David Medenjak Jan 27 '16 at 17:38
I just deleted the previous comments as well. – Wai Yan Hein Jan 27 '16 at 17:38

score 5 · Answer 2 · answered Apr 10 '17 at 13:49

5

Use android:backgroundTint attribute in the XML <Button> tag.

Like:

android:backgroundTint="#6567dc"

No need to use <android.support.v7.widget.AppCompatButton> Button.

answered Apr 10 '17 at 13:49

Sankar Behera

831
10
10

I have same problem but I have to set the background to a xml file having default as well as android:itemPressed items so I can't use the backgroundTint. So any more suggestions? – AndroidEngineX Jul 01 '17 at 12:54
I have tried to solve ur problem and i got a solution, It might look weired but works. In your XML, inside tag add a who's color should be the background color of ur app screen. Like this: – Sankar Behera Jul 02 '17 at 06:05

score 2 · Answer 3 · answered Sep 12 '18 at 18:19

For people looking for doing it in the code (Not in XML), you can use this:

button.getBackground().setColorFilter(button.getContext().getResources().getColor(R.color.colorAccent), PorterDuff.Mode.MULTIPLY);

this didn't change the size of the button and works with the old android versions too. Several methods discussed here, but this one worked perfect.

score 1 · Answer 4 · answered Jul 10 '20 at 11:45

Another option if you want to support anything below API Level 21 is to create a custom drawable with a transparent stroke around a colored shape. This gives you the flexibility of also adding block colors and gradients.

Note the stroke with and transparency which shrinks the button size

button_background.xml

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

    <corners android:radius="5dp" />
    <padding
        android:left="10dp"
        android:right="10dp"
        android:top="0dp"
        android:bottom="0dp"/>

    <!-- This is where the magic happens -->
    <stroke android:color="#00FF0000" android:width="10dp"/>

    <solid android:color="#000000" />
</shape>

Button

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/button_background"
    android:text="Click Me"/>

score 0 · Answer 5 · answered Jan 27 '16 at 17:29

It's because you are using wrap content for widht and height.

You have several options. Quick and simple way? Set the value of the buttons specifying a size in DP like:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <Button
        android:background="@color/white"
        android:layout_gravity="center_horizontal"
        android:id="@+id/btn_row_option_done"
        android:text="Done"
        android:layout_width="200dp"
        android:layout_height="200dp" />

    <Button
        android:background="@color/white"
        android:layout_gravity="center_horizontal"
        android:text="Edit"
        android:id="@+id/btn_row_option_edit"
        android:layout_width="200dp"
        android:layout_height="200dp" />

    <Button
        android:layout_gravity="center_horizontal"
        android:text="Delete"
        android:id="@+id/btn_row_option_delete"
        android:background="@color/red"
        android:layout_width="200dp"
        android:layout_height="200dp" />

    <Button
        android:layout_gravity="center_horizontal"
        android:text="Cancel"
        android:id="@+id/btn_row_option_cancel"
        android:layout_width="100dp"
        android:layout_height="100dp" />
</LinearLayout>

I think defining the width and height is the only option. I set padding, not working. I used AppCompatButton , not working. — Wai Yan Hein, Jan 27 '16 at 17:35
You can use relative layout instead of linear layout as well — Victor Viola, Jan 28 '16 at 10:33
But this solution is not useful when we don't know the text value inside the button. Which is generally the case when you translate the app. So this solution is not ideal. — AndroidEngineX, Jul 01 '17 at 12:56

score 0 · Answer 6 · answered Dec 31 '20 at 10:52

0

try setting the button color using this property

button.setBackgroundTintList(ColorStateList.valueOf(Color.GREEN));

answered Dec 31 '20 at 10:52

vinay shetty

895
1
9
15

Why button gets bigger when the background is set in android

6 Answers6

Linked