Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Android L ripple touch effect on shape?

I have a rounded rectangle with elevation that casts a shadow, just like in the example here: http://developer.android.com/preview/material/views-shadows.html#shadows

Here is my shape:

<shape xmlns:android="http://schemas.android.com/apk/res/android"     android:shape="rectangle">     <solid android:color="@android:color/white" />     <corners android:radius="6dp" /> </shape> 

I want to get the nice "ripple" touch effect that everything else has, but when that's set as the view's background, no touch feedback is given. The shape stays white.

So, I made it into a layer-list:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">     <item>         <shape xmlns:android="http://schemas.android.com/apk/res/android"             android:shape="rectangle">             <solid android:color="@android:color/white" />             <corners android:radius="6dp" />         </shape>     </item>     <item android:drawable="?android:selectableItemBackground" /> </layer-list> 

Now I get nice touch feedback when I tap it, but there's a problem.

The outline of the rounded rectangle shape was lost. It still draws the white rounded rectangle fine, but the shadow is cast as a non-rounded rectangle (square edges), and the ripple goes all the way out past the corners:

Bad corners

It doesn't look too horrible on here, but on the device it's pretty ugly and off-putting.

Is there a way to fix this? The Outline section of the first link seems to be what I want, but I can't figure out how to implement it.

like image 999
Steven Schoen Avatar asked Jul 02 '14 09:07

Steven Schoen


1 Answers

Try that one:

ripple.xml

<?xml version="1.0" encoding="utf-8"?> <ripple android:color="@color/COLOR_WHILE_PRESSING" xmlns:android="http://schemas.android.com/apk/res/android">  <item android:drawable="@drawable/background"></item> </ripple> 

background.xml

<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android">  <solid android:color="@color/BACKGROUND_COLOR" />  <corners android:radius="6dp" /> </shape> 

Or maybe this post will help you: Android L FAB Button shadow

I explained there, how to implement the new FAB button, I also used the outline for that.

like image 123
yannickpulver Avatar answered Sep 21 '22 17:09

yannickpulver