Ripple Animation Tutorial with Example in Android

 

Material Design Animations

1.Touch Feedback- Ripple Animation
2. Activity Transition Animations
-Explode Animation
- Slide Animation
-Fade Animation
-Shared Element Transition Animation
3. Circular Reveal Animation
In this article, we are going to talk about Touch feedback / Ripple Animation

Introduction to Ripple Animation:
    Ripple animation looks like Ripple effect of water. By default ripple animation is enabled on Button view in Android. For other views, we have to explicitly enable the Ripple effect for that we. We will see how to do that in this article. Ripple animation is added for API level 21 and above. SO for how to achieve backward compatibility please refer “Android Material Design with Design Support Library Part 1”
Ripple effect can be categorized as follows

Based on customization:
     1. Default
      2. Customized

Based on border:
      1. Bounded Ripple
      2. Border less Ripple.
    Default Ripple effect:

    It has 2 types , as mentioned earlier

    1. Bounded Ripple:
         Ripple confined to View border itself. It means Ripple animation is shown inside the border of the View. To enable Default Bounded Ripple effect, we just need to add following attribute for View  in xml file.
    android:background=”?android:attr/selectableItemBackground”
    So the Ripples will end at the border of the View.


    2. BorderLess Ripple:
        Ripple that extend beyond the View border. It means Ripple animation is shown without any border specified. To enable Default Bounded Ripple effect, we just need to add following attribute   for View  in xml file.
    android: background =”?android:attr/selectableItemBackgroundBorderLess”
    So the Ripples are going to cross the edges of the view.


    Now regardless of  Default Ripple types you can customize color for Ripple Animation as below(optional ):

    Under res->values-> styles.xml we can add following attribute to style/theme declaration
    <item name=”android:colorControlHighLight”>#colorcode</item>
    This # code is highlight color for ripple effect. I have set #FF0000 which is # code for color RED


    Custom Ripple Effect:

    It also has 2 types
    1. Border Custom Ripple
    2. BorderLess  Custom Ripple
    For Custom  Border Ripple Animation  follow below steps:

    1. Write a *.xml file under “res->drawable” folder; with <ripple> tag at its root. 
    Now for custom bordered ripple effect you need to add mask; the use of  “@android:id/mask” declares that animation will have the border as that of the view. 

     2. Set “android:color “ attributes defines color of Ripple effect.


    3. in “res->layout” folder the activity layout file will have <TextView> tag with  “android:background” set as drawable defined as above.


    Folder structure looks like below:


    For Custom  Border Less  Ripple Animation  
    Just don’t add mask in xml defined in drawable.  All steps are similar as  above.


    and in “res->layout” folder the activity layout file will have <TextView> tag with “android:background” set as drawable defined as above.


    Folder structure looks like below:


    That’s all about Ripple animation.  Below is demo video of what we covered so far.




    Download Ripple Animation Project

    No comments:
    Write comments

    Popular Posts