With selectableItemBackgroundBorderless you can do the following:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/nav_drawer" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_gravity="start" android:background="@android:color/holo_green_light" android:orientation="vertical"> <ImageView android:id="@+id/imageView4" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_alignParentTop="true" android:scaleType="fitXY" android:src="@drawable/device_bg" /> <ImageView android:layout_width="48dp" android:layout_height="48dp" android:layout_alignParentEnd="true" android:layout_alignParentTop="true" android:src="@drawable/sidebar_refresh" /> <LinearLayout android:layout_width="48dp" android:layout_height="48dp" android:layout_alignParentEnd="true" android:layout_alignParentTop="true"> <FrameLayout android:layout_weight="1" android:layout_width="0dp" android:layout_height="wrap_content" android:padding="7dp" android:background="@android:color/transparent"> <ImageView android:id="@+id/imageView3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:clickable="true" android:src="@drawable/sidebar_refresh" android:alpha="0" android:background="?attr/selectableItemBackgroundBorderless"/> </FrameLayout> </LinearLayout> </RelativeLayout>
The key must have its own layouts ( LinearLayout + FrameLayout ), then use alpha="0" to set the transparency of the image, which has ripples, to overlay the image, which is solid.
The problem with this code is:
- You need to hard code the indentation. If the filling or filling is too small, the ripple effect will be tied to a rectangular rather than a circle. Use formula 48 (height / width) / 7 to determine the gasket. If dividing by 7 does not work, reduce the divisor, for example. 6.
- Since it has padding, so you cannot touch the pad to cause a ripple effect. This is acceptable if it is a small button due to non-obviousness, but it matters if it is a large button.
The good news is an alternative way to model selectableItemBackgroundBorderless with the ripple tag in drawable/ripple.xml :
<?xml version="1.0" encoding="utf-8"?> <ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="?android:colorPrimary"> <item android:id="@android:id/mask"> <shape android:shape="oval"> <solid android:color="?android:colorPrimary"/> </shape> </item> </ripple>
From what I observed, it gives the same ripple effect (except that it does not have an overflow ripple), e.g. selectableItemBackgroundBorderless do, so there is no reason to insist on using the standard selectableItemBackgroundBorderless
Using this ripple.xml do the following:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/nav_drawer" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_gravity="start" android:background="@android:color/holo_green_light" android:orientation="vertical"> <ImageView android:id="@+id/imageView4" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_alignParentTop="true" android:scaleType="fitXY" android:src="@drawable/device_bg" /> <ImageView android:layout_width="48dp" android:layout_height="48dp" android:layout_alignParentEnd="true" android:layout_alignParentTop="true" android:src="@drawable/sidebar_refresh" /> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentEnd="true" android:layout_alignParentTop="true"> <FrameLayout android:layout_weight="1" android:layout_width="0dp" android:layout_height="wrap_content" android:background="@android:color/transparent"> <ImageView android:id="@+id/imageView3" android:layout_width="48dp" android:layout_height="48dp" android:clickable="true" android:src="@drawable/ripple" /> </FrameLayout> </LinearLayout> </RelativeLayout>
Only part of LinearLayout . No more hard-coded add-ons and alpha images. The only minor issue was a click in the corner, which would still cause a ripple effect. I found this thread , but I have not tried.
Two of the above ways of working are not even transparent.