Why button gets bigger when the background is set in android
当我使用xml中的
This is my xml layout before I set background attribute to button
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <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.
但是当我像这样在取消按钮上设置颜色时,
1 2 3 4 5 6 7 | <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" /> |
然后,即使我没有使宽度或高度变大,按钮也会变得大于默认大小。
This is the screenshot
如您所见,取消按钮变大了。实际上,我正在设置背景色。设置背景颜色后,如何修复它以获取默认大小?
您必须区分
android上的默认按钮在其可绘制对象上应用了填充-似乎较小。它实际上具有相同的大小。
如果您使自己的可绘制对象不应用填充,则背景将在视图的整个边界内绘制,从而使其看起来更大。
您始终可以只使用默认按钮,但可以使用AppCompat应用自己的颜色。这支持对默认按钮的背景进行着色。
1 2 3 4 5 | <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 --> |
...这将使您使用相同的外观。
在XML
赞:
无需使用
对于希望在代码中执行此操作的人(不是XML),您可以使用以下命令:
1 | button.getBackground().setColorFilter(button.getContext().getResources().getColor(R.color.colorAccent), PorterDuff.Mode.MULTIPLY); |
这并没有改变按钮的大小,并且也适用于旧的android版本。
这里讨论了几种方法,但是这种方法很完美。
尝试使用此属性设置按钮颜色
1 | button.setBackgroundTintList(ColorStateList.valueOf(Color.GREEN)); |
如果要支持低于API级别21的任何内容,另一个选择是创建一个自定义可绘制对象,并在彩色形状周围使用透明笔触。这使您也可以灵活地添加块颜色和渐变。
请注意
button_background.xml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <?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> |
按钮
1 2 3 4 5 | <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/button_background" android:text="Click Me"/> |
这是因为您要使用包裹内容来显示宽度和高度。
您有几种选择。快速简单的方法?设置指定DP中大小的按钮的值,例如:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <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> |