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,

Answer 1

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

Answer 2

try setting the button color using this property

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

Answer 3

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 4

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 5

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

Like:

android:backgroundTint="#6567dc"

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

Answer 6

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>