Tech tip of this week

Android: Ripple Touch Effect

Introduced Ripple touch effect with Material design in Android 5.0 (API level 21).

Touch feedback in material design provides an instantaneous visual confirmation at the point of contact when users interact with UI elements. The default touch feedback animations for buttons use the new RippleDrawable class, which transitions between different states with a ripple effect.




So in general, ripple effect for regular buttons will work by default and for other touchable views can be achieved by specifying 


android:background="?android/attr:selectableItemBackground"

But if we have custom button with selected state, our text color changes depending on the state, etc. So default button background is not going to work for us here. We 
can add this feedback for own drawables and for custome buttons by simply wrapping them in a ripple element:

For Example:

<ImageButton
         android:width="wrap_content"
         android:height="wrap_content"
         android:background="ripple_selector"
</ImageButton>


ripple_selector.xml

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
            android:color="@color/accent_dark">
    <item>
         <shape
                   android:shape="oval">
                  <solid android:color="?android:colorAccent" />
         </shape>
    </item>
</ripple>



No comments:

Post a Comment