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?

Answer 1

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.

Answer 2

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

Like:

android:backgroundTint="#6567dc"

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

Answer 3

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.

Answer 4

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>