Search code examples
androidbuttonandroid-5.0-lollipoprippledrawable

android ripple button with background


I successfully created a ripple button in android 5.0 using XML. My code is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- the flat button to be used in app -->
<!-- define the ripple -->
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?android:colorControlHighlight">
    <!-- the ripple object -->
    <item android:id="@android:id/mask">
        <!-- button shape (w/ radius) -->
        <shape android:shape="rectangle">
            <!-- radius of vertices -->
            <corners
                android:topLeftRadius="7dp"
                android:topRightRadius="7dp"
                android:bottomLeftRadius="7dp"
                android:bottomRightRadius="7dp" />
            <!-- color accent (not working) -->
            <solid android:color="?android:colorAccent" />
        </shape>
    </item>
</ripple>

I have a problem with the button: the background color of the button won't change. I have also tried:

<solid android:color="#0000ff" />

The background still continues to stay transparent (the colorAccent isn't working either).

How should I go about setting the rectangle's (the button's) background to blue if not through the

<solid/>

property?

Thanks


Solution

  • Using the @android:id/mask identifier sets the layer as a mask, which is only used for clipping bounds and is not drawn. Removing the id attribute should give you what you're looking for. Also, you can just use the android:radius attribute if the corners are all the same radius.

    <?xml version="1.0" encoding="utf-8"?>
    <ripple xmlns:android="http://schemas.android.com/apk/res/android"
            android:color="?android:attr/colorControlHighlight">
        <item>
            <shape android:shape="rectangle">
                <corners android:radius="7dp" />
                <solid android:color="?android:attr/colorAccent" />
            </shape>
        </item>
    </ripple>