Guimareshh Guimareshh - 4 months ago 257
Android Question

Feature discovery animations for Android

Since May

Google
has updated his
Material Design
website. I have seen an interesting and cool design pattern in the new section named Feature discovery

I would like to implement the animation we can see for discovering the Navigation Drawer button (https://material-design.storage.googleapis.com/publish/material_v_8/material_ext_publish/0B4kv-3uZbS1qM2QtX2xJem50NUk/engagement-featurediscovery-single-flow.webm)

As often, for Android animation,
Google
provide nice and awesome UI Guideline but we don't have any further information for developing it on our app. Do you know if there are native solution with android libraries to implement these kind of animations ? If yes, is it available under Android 5 (at least Android 4.1 +) ?

Thanks !

EDIT (July 7) : I saw the implementation in the last update of Google Fit, for the navigation drawer and floating button

Answer

You need to make custom animation or else you can use Ripple Effect + Reveal and set it to navigation drawer icon,

Circular Reveal Animation

void enterReveal() {
    // previously invisible view
    final View myView = findViewById(R.id.my_view);

    // get the center for the clipping circle
    int cx = myView.getMeasuredWidth() / 2;
    int cy = myView.getMeasuredHeight() / 2;

    // get the final radius for the clipping circle
    int finalRadius = Math.max(myView.getWidth(), myView.getHeight()) / 2;

    // create the animator for this view (the start radius is zero)
    Animator anim =
        ViewAnimationUtils.createCircularReveal(myView, cx, cy, 0, finalRadius);

    // make the view visible and start the animation
    myView.setVisibility(View.VISIBLE);
    anim.start();
}
Comments