Customizing Button Colors in Android with Material Design and AppCompat: Solutions and Practices

Introduction

In Android development, Material Design offers a modern visual language for applications, while the AppCompat library ensures backward compatibility. However, developers often face inconsistencies when customizing button colors across different versions. Based on Stack Overflow Q&A data, this article systematically reviews related solutions, focusing on official fixes and supplementing with other practical methods.

Problem Background and Historical Evolution

Before AppCompat updates, developers could modify button colors on Android L (API 21+) using the android:colorButtonNormal attribute, but this was ineffective on older versions. After updating, with the Theme.AppCompat.Light.DarkActionBar theme, buttons might disappear or fail to change color. This stemmed from incomplete support for Material buttons in early AppCompat versions. For example, dynamic code like button.getBackground().setColorFilter(getResources().getColor(R.color.red), PorterDuff.Mode.MULTIPLY); could cause rendering issues in some cases.

Official Fix Solution (Answer 1)

Support Library rev.22 (March 13, 2015) officially fixed this issue, with the relevant Google Code issue resolved. The core solution involves unifying button colors through theme configuration:

• Set <item name="colorButtonNormal">@color/button_color</item> in theme.xml, applicable to all versions.
• Set <item name="android:colorButtonNormal">@color/button_color</item> in v21/theme.xml, optimized for API 21+ devices.

This method leverages AppCompat's attribute system to ensure color consistency across Android versions. In code examples, @color/button_color can be replaced with specific color resources, such as red (#FF0000).

Custom Background Implementation (Answer 2)

Before the official fix, developers could simulate Material buttons through custom XML backgrounds. Steps include:

1. Copy btn_default_material.xml from Android source to the drawable-v21 folder, creating custom_btn.xml with ripple effect: <ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="?attr/colorControlHighlight"><item android:drawable="@drawable/btn_default_mtrl_shape" /></ripple>.
2. Obtain and modify the shape file btn_default_mtrl_shape.xml, setting <solid android:color="?attr/colorButtonNormal" />.
3. Copy dimension resources dimens_material.xml to ensure consistent button sizing.
4. Create drawable/custom_btn.xml for older versions, using a selector to define different states (e.g., pressed, focused, normal), such as the normal state: <solid android:color="@color/NORMAL_STATE_COLOR" />.

This approach achieves ripple effects on Lollipop devices and touch responses on older versions, but the code is complex and suitable for deep customization scenarios.

New Version Enhancements (Answer 3)

AppCompat v23.0.0 introduced the Widget.AppCompat.Button.Colored theme, simplifying button color customization. Configuration steps:

• Add dependency: compile('com.android.support:appcompat-v7:23.0.0'), set targetSdkVersion = 23.
• In values/theme: <item name="android:buttonStyle">@style/BrandButtonStyle</item>.
• Define style: <style name="BrandButtonStyle" parent="Widget.AppCompat.Button.Colored"><item name="colorButtonNormal">@color/yourButtonColor</item><item name="android:textColor">@color/White</item></style>, and use android:colorButtonNormal in values-v21.

This solution automatically handles text color, but note color issues in disabled states, which can be resolved by explicitly setting text color.

Background Tint Attribute (Answer 4)

From Support Library 22.1.0, Button supports the backgroundTint attribute, providing a quick method: <Button android:backgroundTint="@color/bg_remove_btn_default" />. This is suitable for simple color overlays but may not support complex Material effects.

Practical Recommendations and Conclusion

It is recommended to prioritize the official fix solution (Answer 1) for its simplicity and cross-version compatibility. For new projects, combine with Answer 3's Widget.AppCompat.Button.Colored theme. Custom methods (Answer 2) are suitable for scenarios requiring fine-grained control but have higher maintenance costs. Dynamic settings should be used cautiously to avoid rendering issues from direct background modifications. In summary, through proper theme and style configuration, developers can easily customize Material Design button colors, enhancing application consistency and user experience.