Create view similar to navigation drawer from right

Android Navigation drawer like layout from right side

 

In this post I shall be writing about how to create a Navigation Drawer like layout on android but from the right side of the screen. You can additionally move android Navigation drawer to the right side utilizing the gravity, however for this situation I as of now had one on the left side and wanted to make another from the right side.

I additionally don’t know whether its conceivable to include 2 route drawers, one from left another from Right, so I just went ahead to my way to deal with making one. Its not that impeccable as the Android one but rather still works.

The first step is to extend a layout, add it to the XML with some defined width like say 200 dip, and once its attached to the window move it onto the right side of the screen leaving some offset. This can likewise be accomplished utilizing the Gravity as a part of XML, yet I did it in the code.

 

In this above code, when this view is attached I am doing few tasks like setting listener, making it fully transparent, and moving it to right.

So now we have moved it on to right but left some padding also, represented by Offset, this will be used to detect the touch when user touches near the edges of screen.

Now its time to write some code, when user touches it.
We will need to make it visible and as user moves his finger to left, we will have to move the view also.

 

In the above code you can see, when user touches (ACTION_DOWN) we have added an overlay to dim out rest of the layout on screen, and changed the Alpha of this view.

Now on ACTION_MOVE ( in default section of switch) we are changing the X coordinates of view as per the user touch, and at the same time changing the Alpha of the overlay view, to make it more visible with time.

At some point we have to stop the view also and that’s what the first line in default case of switch is doing.

Below is the complete code.

 

Here is how you can use the same in XML:

Here is the end result of the above code:

Hope you liked it, for more stay connected on to my Facebook page.

Leave a Reply