凸起和平面按钮具有不同的背景和突出显示的颜色

时间:2015-09-12 18:32:59

标签: android material-design android-appcompat appcompat-v7-r23

我正在使用com.android.support:appcompat-v7:23.0.1库创建应用程序。

我在values/styles.xml中定义了应用主题:

<style name="BaseAppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorPrimary">@color/primary</item>
    <item name="colorPrimaryDark">@color/primary_dark</item>
    <item name="colorAccent">@color/accent</item>
    <item name="colorControlHighlight">@color/highlight_dark</item>
    <item name="colorButtonNormal">@color/primary</item>
    <item name="android:textColorPrimary">@color/primary_text</item>
    <item name="android:textColorSecondary">@color/secondary_text</item>
</style>

<style name="AppTheme" parent="BaseAppTheme"></style>

我使用AppCompat Widget.AppCompat.Button.Colored样式用于凸起按钮,并使用Widget.AppComap.Button.Borderless.Colored样式用于平面按钮。

colorAccent主题属性定义了凸起的按钮背景颜色和平面按钮文本颜色,但我认为这是一个错误,因为这些颜色应该由colorButtonNormal属性定义,就像它对{{Widget.AppCompat.Button属性一样。 1}}和Widget.AppComap.Button.Borderless样式。

colorControlHighlight主题属性为两个按钮定义ripple颜色。

问题是:

  1. 如何使用不同颜色的凸起按钮?例如,我想要具有主色和强调色的按钮。
  2. 我的强调色不亮,因此凸起的按钮背景饱和,colorControlHighlight应该很亮(#40ffffff)。但是平面按钮具有透明背景,colorControlHighlight应该是暗的(#40000000)。如何为凸起和平面按钮设置不同的ripple颜色?
  3. 我在下面添加了我当前的解决方案,但我无法感觉到我错过了一些东西。

1 个答案:

答案 0 :(得分:14)

经过一些研究和谷歌搜索后,我为不同的凸起和平面按钮定义了不同的主题:

<style name="AppTheme.RaisedButton">
    <item name="buttonStyle">@style/Widget.AppCompat.Button.Colored</item>
</style>

<style name="AppTheme.RaisedButton.Primary">
    <item name="colorAccent">@color/primary</item>
</style>

<style name="AppTheme.RaisedButton.Accent">
</style>

<style name="AppTheme.FlatButton">
    <item name="buttonStyle">@style/Widget.AppCompat.Button.Borderless.Colored</item>
    <item name="colorControlHighlight">@color/highlight_light</item>
</style>

<style name="AppTheme.FlatButton.Primary">
    <item name="colorAccent">@color/primary</item>
</style>

<style name="AppTheme.FlatButton.Accent">
</style>

请注意,我使用的buttonStyle属性不是android:buttonStyle,因为它不适用于棒棒糖前设备。

android:theme属性中使用这些主题:

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/my_button"
    android:theme="@style/AppTheme.FlatButton.Primary" />