When I decided to implement Navigation Drawer into our Application, I was not satisfied with the implementations that I have seen in other applications or concepts in Dribbble.I was looking for something simple and catchy at the same time so I found this cool concept and hope you also like this.
Firstly see the demo Navigation Drawer with Wave Animation concept:
Android Navigation Drawer with Wave Animation
The idea is to create wave transitions below the header when the user opens the Navigation Drawer, the transitions have to be meaningful so I created a loop of 5 different waves that synched with each other in a series order using Android’s VectorDrawable.
See this: How to add Amazing Side Menu Animation in Android?
Why use a VectorDrawable?
Vectors work much like SVG there is no lose quality as they are scaled up or down. Unlike popular image formats like Bitmap, JPEG, GIF, and PNG, plus you can define animations on path commands on (how to draw lines and arcs) and just like Path commands when working with Canvas, drawing and rendering. If you try to do animations with PNG files or using GIF files for our animation we will end up with hundreds of PNGS or huge files size for GIFs.
You must see: How to Create own ViewPager Transformations Animation?
Let’s Build Navigation Drawer with Wave Animation!
First, we need to create the paths for each wave transition we have 2 waves per transition lets call the first Wave “Front” and the second wave “Back”.
But how we create Path Data Commands? well after spending quite a time to understand to how to create them, it was fairly easy to understand the basics such as drawing lines but if you try to draw a complex design like the waves we are trying to create here, it’s almost impossible to imagine mathematically how to draw that , but VectorDrawables have a lot of similarities of SVG files and Path data is almost identical in both formats (you can convert directly SVG file to Vector Drawable through Android Studios), we going to use GIMP as tool for SVG Creation then we going to import that into Vector Drawable.