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>