Have you noticed how some android applications move the content inward when you open the navigation drawer? Isn’t that a cool effect! In this tutorial I am going to show you exactly how you can achieve the same. Below is the effect that we are going to create in this tutorial.

Setting up the layout

You must know the basics of DrawerLayout, having said that, below is the layout file that we will pay with.

By default the effect when navigation drawer is opened/closed looks like this.

(I have kept the drawer size small, 200dp, you can set the size equal to whatever you want).

Everything we do from here on is going to be in our JAVA file. So lets get a reference to our views.

Removing the Scrim

Do you notice, when we open the drawer, the screen on the right side goes dark, this is called scrim, we don’t want this, so lets remove it. In your java file add the following line.

By doing this we have removed the scrim colour. If you want to keep the scrim colour or change it to something else, its totally on you.

Moving the content!

Now we will move the content towards the positive x-axis whenever the drawer starts moving out. For that we will use the onDrawerSlide  function provided by ActionBarDrawerToggle . Create an instance of ActionBarDrawerToggle , and override the onDrawerSlide  function.

onDrawerSlide : When ever you start opening the drawer this function is called with arguments drawerView  and  slideOffset . drawerView is the content of the drawer you defined in the xml file( android:id="@+id/drawer ). slideOffset  is a float value that changes when you open or close the drawer, it goes from 0 to 1 as you open the drawer and from 1 to 0 as you close it. So a value equal to 0 means the drawer is completely closed, value equal to 1 means the drawer is completely opened and value equal to 0.5 means drawer is in mid way of opening/closing.

So to slide the content towards right when drawer opens and vice versa, just add the following two lines of code in the onDrawerSlide  function.

Also attach the  actionBarDrawerToggle to the drawer by passing it in  addDrawerListener() .

By doing this we get the following effect, finally the content moved!

The logic used is simple, as the drawer opens, we move the content using  setTranslationX() function along the x-axis. We calculate the value that we have to move by multiplying the width of the drawer with the  slideOffset .

Scaling the content

The final step is scale the content to get the desired effect. As the drawer opens we will scale down the content along x-axis and y-axis, and scale back up as the drawer closes. We know that the value of slideOffset  goes from 0 to 1 as we open the drawer, we need to scale the content downwards as we open the drawer, so will subtract the value of  slideOffset from 1.

Add the following lines to scale the content.

This is how its looks after scaling the content.

Whops!! Our content is completely disappearing when we open the drawer, although this effect is cool, it is not what we are looking for. The reason why this is happening is because our value of  1 - slideOffset goes from 1 to directly 0. We want it to start from 1 but not go to 0. The solution is to divide the slideOffset  by a value which decreases it, so the final value inside the scale functions doesn’t evaluate to 0.

We will divide slideOffset by 6 (I found this optimal value by hit and trial). Update the code as follows.

By doing this we have achieved our desired effect. Yippee!

Play around with the value of scaleFactor , use different values for both X and Y scaling/translation to create different effects.

Sometimes the drawer comes with a shadow, which can be removed by adding the following line.

Complete Code:

That is it for this tutorial, here are some other articles that you might be interested in.

How to add Bottom Sheet in Android

Making a moving gradient background in Android

How to hide Floating Action Button when scrolling in Recycler View

Scanning and generating barcode in Android

One Response

Leave a Reply

Your email address will not be published.

17 − 8 =