Raised and flat buttons with different background and highlight colors

问题

I'm creating application using com.android.support:appcompat-v7:23.0.1 library.

I define application theme in 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>

I use AppCompat Widget.AppCompat.Button.Colored style for raised button and and Widget.AppComap.Button.Borderless.Colored style for flat buttons.

colorAccent theme attribute defines raised button background color and flat button text color but I suppose that it's a bug because these colors should be defined by colorButtonNormal attribute, as it does for Widget.AppCompat.Button and Widget.AppComap.Button.Borderless styles.

colorControlHighlight theme attribute defines ripple color for both buttons.

Questions are:

How can I use raised buttons with different colors? For example, I want buttons with primary and accent colors.
My accent color is not light, so raised button has saturated background and colorControlHighlight should be light (#40ffffff). But flat button has transparent background and colorControlHighlight should be dark (#40000000) for it. How can I set different ripple colors for raised and flat buttons?

I added my current solution below, but I can't help feeling that I missed something.

回答1:

After some research and googling I defined separate themes for different raised and flat buttons:

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

Note, that I'm using buttonStyle attribute not android:buttonStyle because it will not work on pre-lollipop devices.

Use these themes in android:theme attribute:

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

来源：https://stackoverflow.com/questions/32542303/raised-and-flat-buttons-with-different-background-and-highlight-colors

标签

android

material-design

android-appcompat