Ripples on a shape with a transparent background Ripples on a shape with a transparent background android android

Ripples on a shape with a transparent background


After a few trial and errors it seems I have misunderstood the hierarchy of the selector and item.

The following works perfectly.

<ripple xmlns:android="http://schemas.android.com/apk/res/android"        android:color="@color/primary_light">        <item android:id="@android:id/mask">               <shape android:shape="oval">                       <solid android:color="@android:color/white"/>                       <size android:height="80dp" android:width="80dp"/>               </shape>        </item></ripple>


This works with a transparent background:

<?xml version="1.0" encoding="utf-8"?><ripple xmlns:android="http://schemas.android.com/apk/res/android"    android:color="?android:colorControlHighlight"    android:exitFadeDuration="@android:integer/config_shortAnimTime"><!-- Use this to define the shape of the ripple effect (rectangle, oval, ring or line). The color specified here isn't used anyway --><item android:id="@android:id/mask">    <shape android:shape="rectangle">        <corners android:radius="3dp"/>        <!-- This color is needed to be set - doesn't affect anything -->        <solid android:color="@android:color/white"/>    </shape></item><!-- This is the background for your button --><item>    <!-- Use the shape you want here -->    <shape android:shape="rectangle">        <!-- Use the solid tag to define the background color you want -->        <solid android:color="@android:color/transparent"/>    </shape></item></ripple>

This was modified a bit from this answer: Transparent ripple


Following code works for custom shape with ripple effect for transparent button -

main_activity_buttons_ripple_with_background.xml

<?xml version="1.0" encoding="utf-8"?><ripple xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:color="#888888"    tools:targetApi="lollipop">    <!-- Use this to define the shape of the ripple effect (rectangle, oval, ring or line). The color specified here isn't used anyway -->    <item android:id="@android:id/mask">        <shape android:shape="rectangle">            <corners android:radius="25dp" />            <!-- This color is needed to be set - doesn't affect anything -->            <solid android:color="#000" />        </shape>    </item>    <!-- This is the background for your button -->    <item>        <!-- Use the shape you want here -->        <shape android:shape="rectangle">            <!-- Use the solid tag to define the background color you want -->            <solid android:color="@android:color/transparent" />            <stroke                android:width="1dp"                android:color="#FFF" />            <corners android:radius="25dp" />        </shape>    </item></ripple>

styles.xml

<style name="MainActivityButtonsStyle">    <item name="android:background">@drawable/main_activity_buttons_ripple_with_background</item>    <item name="android:textAllCaps">false</item>    <item name="android:layout_margin">15dp</item>    <item name="android:paddingLeft">20dp</item>    <item name="android:paddingRight">20dp</item>    <item name="android:layout_centerHorizontal">true</item>    <item name="android:layout_width">wrap_content</item>    <item name="android:layout_height">50dp</item>    <item name="android:textColor">#FFF</item>    <item name="android:textSize">18sp</item></style>

activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical">    <RelativeLayout        android:layout_width="match_parent"        android:layout_height="0dp"        android:layout_weight="1">        <Button            android:layout_alignParentTop="true"            style="@style/MainActivityButtonsStyle"            android:text="@string/button_search_by_id" />        </RelativeLayout>    </LinearLayout>