Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Create Circular Reveal Animation And Ripple Effect like Whatsapp

2,894 views

Published on

Learn how to create Circular Reveal Animation And Ripple Effect like Whatsapp. For download full source code refer: http://pulse7.net/

Published in: Technology
  • Be the first to comment

Create Circular Reveal Animation And Ripple Effect like Whatsapp

  1. 1. Android : Create Circular Reveal Animation And Ripple Effect like Whatsapp http://pulse7.net/
  2. 2. * Up till now we have seen articles on Material Design like: 1.) How to Use RecyclerView with CardView in Android application 2.) How to Create Collapsing Toolbar Layout like Whatsapp in Android Application. * Today we are going to learn another concept How to create Circular Reveal Animation And Ripple Effect like Whatsapp. http://pulse7.net/
  3. 3. * When I tap “Attach” button of Whatsapp then it displays the menu with circular animation. This effect is known as Circular Reveal Animation and Ripple Effect. http://pulse7.net/ * Android Lollipop introduced a really great new Animator, the Circular Reveal Animation, and Ripple Effect.
  4. 4. * Let’s see the feature of these two terminologies. 1.) Circular Reveal Animation – Reveal animations provide users visual continuity when you show or hide a group of UI elements. 2.) Ripple Effect – 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. http://pulse7.net/
  5. 5. * Let’s see how to perform circular reveal animation and ripple effect like WhatsApp. This example is only for lollipop version. You can also refer Android – Create Circular Reveal Animation for pre-lollipop version. Prerequisites: ● Android Studio version: 1.4 ● Minimum SDK version: 21 http://pulse7.net/
  6. 6. * I will tell you steps for how to Create Circular Reveal Animation And Ripple Effect like Whatsapp in Android Application Follow steps: Your minimum SDK version must be 21. 1. First, add Support Design Library in build.gradle: http://pulse7.net/
  7. 7. 2. Create color.xml in values folder. http://pulse7.net/
  8. 8. 3. Modify your style.xml(v21) fie in values folder for effective changes. http://pulse7.net/
  9. 9. 4. Create new layout file activity_toolbar.xml in resources layout (res/layout). activity_toolbar.xml http://pulse7.net/
  10. 10. 5. Let’s create a layout similar to that of WhatsApp’s Attach option. Create activity_main.xml in resources layout (res/layout). http://pulse7.net/
  11. 11. 5. http://pulse7.net/ Continue...
  12. 12. 5. http://pulse7.net/ Continue...
  13. 13. 5. http://pulse7.net/ Continue...
  14. 14. 5. http://pulse7.net/ Continue...
  15. 15. 5. http://pulse7.net/ Continue...
  16. 16. 5. http://pulse7.net/
  17. 17. 5. http://pulse7.net/ Continue...
  18. 18. Performing the Reveal Effect: 6. Create “menu_main.xml” in res /menu and add the menu item in it. menu_main.xml http://pulse7.net/
  19. 19. 7. To perform animation we need following parameters: The radius of the circular reveal and X, Y coordinates to start the animation from. * The radius can be obtained using this method: * To achieve Reveal effect from the top right. * To find the center of clipping circle, change cy as: http://pulse7.net/
  20. 20. 7. * To find the center of clipping circle, change cy as: 8. To perform circular reveal, we will useViewAnimationUtils.createCircularReveal (View view, int centerX, int centerY, float startRadius, float endRadius). This method enables us to animate a clipping circle to reveal or hide a view. http://pulse7.net/ Continue...
  21. 21. It takes following parameters: VIEW - The View will be clipped to the animating circle. CENTERX - The x coordinate of the center of the animating circle, relative to view. CENTERY - The y coordinate of the center of the animating circle, relative to view. STARTRADIUS - The starting radius of the animating circle. ENDRADIUS - The ending radius of the animating circle http://pulse7.net/
  22. 22. 9. Create MainActivity.java and inflate activity_main.xml and menu_main.xml in it. MainActivity.java http://pulse7.net/
  23. 23. 10. In MainActivity.java, we will give circular reveal effect to an icon. The animation will be toggled when we tap the Attach button. The contents of the Linear layout will be displayed, and hidden alternatively. * When we tap menu icon, start radius will be zero and end radius will be width and height of the layout and layout will be visible to the users. So, in onOptionsItemSelected(MenuItem item), perform following operations on id of action_attachment. http://pulse7.net/ Continue...
  24. 24. 10. http://pulse7.net/
  25. 25. 11 To perform reverse animation , change the starting radius to the radius or the extent to which circular reveal animation is to be shown and ending radius to zero. In our case, it is the width and height length of linear layout. http://pulse7.net/
  26. 26. 12. So, Full code of MainActivity.java will be as follows: A boolean variable is used to handle the visibility of linear layout. http://pulse7.net/ Continue...
  27. 27. 12. http://pulse7.net/ Continue...
  28. 28. 12. http://pulse7.net/ Continue...
  29. 29. 12. http://pulse7.net/ Continue...
  30. 30. 12. http://pulse7.net/ Continue...
  31. 31. 12. http://pulse7.net/ Continue...
  32. 32. 12. http://pulse7.net/
  33. 33. 13. Now execute application, we get this type of output: http://pulse7.net/
  34. 34. Download Full Source Code And Subscribe (Facebook, Twitter, Google+) for more article http://pulse7.net/ http://pulse7.net/

×