Content abstract

Record Ripple usage after 5.0.

  • 1. Why use Ripple
  • 2. How to use Ripple effect
  • 3.Ripple effect color value changes
  • 4. The Ripple range changes
  • 5.Ripple Add an item whose ID is @android: ID /mask

1. Why use Ripple

  • Improve user experience, better visual feedback to users
  • This indirectly increases the time that users stay in the application

2. How to use Ripple effect

On models 5.0, the button will have a Ripple click effect. But often developers need to modify the click effect to modify Android: Backgroud, and the Ripple effect will change. So the key to using Ripple is set up in Android: Backgroud.

Click effects are mainly divided into two categories:

  • Boundary ripple

    XMLCode: 
    android:background="? android:attr/selectableItemBackground"Copy the code

    Click on the effect of





    Boundary ripple

  • Out-of-boundary ripple (circle)

    XMLCode: 
    android:background="? android:attr/selectableItemBackgroundBorderless"Copy the code

    Click effect:





    Out-of-boundary ripple

Note:

  • Beyond the boundary ripple, API requirements 21 +
  • If the click effect is not enabled, it is likely that the control itself is not enabled. Set the following properties 
    android:clickable="true"Copy the code

3.Ripple effect color value changes

Many apps now have their own theme color, but if the Ripple effect color is still the default gray, it will look out of place. Now let’s change the color of the Ripple effect.

Set the drawable of the ripple label

<? The XML version = "1.0" encoding = "utf-8"? > <ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="?android:colorPrimaryDark"> </ripple>Copy the code

Click on the effect of





Change the color of Ripple

Note that the color may be covered, the effect is not very ideal

4. The Ripple range changes

From the above we know that, in addition to the out-of-bounds mode, there is also a boundary bound. Since we want to limit the bounds, we need to provide it with a range, which is to add an Item tag.

  • Color as Mask

    XMLCode: 
    <ripple xmlns:android="http://schemas.android.com/apk/res/android"        
android:color="?android:colorPrimaryDark">    
  <item android:drawable="@color/colorAccent">
  </item>
</ripple>Copy the code

    Click effect:





    Color as Mask

  • Shape as Mask

    XMLCode: 
    <ripple xmlns:android="http://schemas.android.com/apk/res/android"        
android:color="?android:colorPrimaryDark">   
   <item >        
      <shape android:shape="oval">           
        <solid android:color="@color/colorAccent"></solid>        
     </shape>   
   </item>
</ripple>Copy the code

    Click effect:





    Shape as Mask

  • Picture as Mask

    XMLCode: 
    <ripple xmlns:android="http://schemas.android.com/apk/res/android"        
android:color="?android:colorPrimaryDark">    
     <item         android:drawable="@drawable/ic_launcher">    
     </item>
</ripple>Copy the code

    Click effect:





    Picture as Mask


    Pay attention to

    The image must be complete or it will flicker.

5. Add an item whose ID is @android:id/mask

Compare the above picture as the example of Mask, just add an ID, the code is as follows:

<ripple xmlns:android="http://schemas.android.com/apk/res/android"        
android:color="?android:colorPrimaryDark">    
       <item android:id="@android:id/mask"        android:drawable="@drawable/ic_launcher">    
       </item>
</ripple>Copy the code

But the effect has changed:





Picture as Mask

It is obvious to see at the beginning that the image is hidden, i.e. :

  • If @android:id/mask is not specified, the drawable specified by item will be displayed.
  • If the id is @android:id/mask, the drawable will not be displayed by default, but will appear when clicked.

6. Refer to blog posts

  • Use of Android L Ripple
  • Android Material Design animation
  • Chapter 12 Android5.X new features in detail