How to set specific color for background when being clicked on borderless button?

Question

Short question:

Suppose I use this style on a button:

    <Button
        style="@style/Widget.AppCompat.Button.Borderless.Colored" ...

(or without the "Colored" part).

How do I set the background of it to be a selector that has a different color when being pressed? The default one is quite a bold color on pre-Lollipop...

I want to have all of the style working as the default (including padding), except for the color of the selector.

Answer 1

I think the easiest would be to create a typical multi-state drawable and replicate Android's default button drawable properties for padding, etc...

From the Android SDK AppCompat theme:

<!-- Colored bordered ink button -->
    <style name="Base.Widget.AppCompat.Button.Colored">
        <item name="android:background">@drawable/abc_btn_colored_material</item>
        <item name="android:textAppearance">@style/TextAppearance.AppCompat.Widget.Button.Inverse</item>
    </style>

They use the drawable abc_btn_colored_material, whose source is like this: https://github.com/dandar3/android-support-v7-appcompat/blob/master/res/drawable/abc_btn_borderless_material.xml

You can see it's just a layer list with the following multi-state drawable:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_focused="true" android:drawable="@drawable/abc_btn_default_mtrl_shape"/>
    <item android:state_pressed="true" android:drawable="@drawable/abc_btn_default_mtrl_shape"/>
    <item android:drawable="@android:color/transparent"/>
</selector>

https://github.com/dandar3/android-support-v7-appcompat/blob/master/res/drawable/abc_btn_default_mtrl_shape.xml

<inset xmlns:android="http://schemas.android.com/apk/res/android"
       android:insetLeft="@dimen/abc_button_inset_horizontal_material"
       android:insetTop="@dimen/abc_button_inset_vertical_material"
       android:insetRight="@dimen/abc_button_inset_horizontal_material"
       android:insetBottom="@dimen/abc_button_inset_vertical_material">
    <shape android:shape="rectangle">
        <corners android:radius="@dimen/abc_control_corner_material" />
        <solid android:color="@android:color/white" />
        <padding android:left="@dimen/abc_button_padding_horizontal_material"
                 android:top="@dimen/abc_button_padding_vertical_material"
                 android:right="@dimen/abc_button_padding_horizontal_material"
                 android:bottom="@dimen/abc_button_padding_vertical_material" />
    </shape>
</inset>

So just make it yours :) Copy the drawable xml into your app and customize it.

I don't know if you will be able to access the @dimen/... from outside the SDK package, those values are defined in the SDK Values.xml , take a look at https://github.com/dandar3/android-support-v7-appcompat/blob/master/res/values/values.xml . If it's not possible, just create your own version of the dimens in your values.xml

If there's a cleaner solution any android guru can point out, I'll be glad to know!

Requested Update

Another trick is to apply a ColorFilter to the whole Button View. It's a very simple thing but not useful for all situations, as the color filter will blindly change the view as a whole (including Font color, borders, etc...). However, smartly selecting Alpha on the colors, could work for specific situations.

I'd suggest a LightningColorFilter . To apply a color filter to the Button, or to any view, you can do something like

myButton.getBackground().setColorFilter(new LightingColorFilter(Color.WHITE, Color.RED));

Check out what every color means here: http://developer.android.com/reference/android/graphics/LightingColorFilter.html