为什么在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>

Answer 5

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 6

尝试使用此属性设置按钮颜色

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