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

Gurleen Sethi

How can I tell you about myself in just a few lines, to get to know me you can reach out to me, email, text, call, or any other method of communication you like. I am always there for you!


sunny kumar aditya · February 5, 2018 at 6:35 pm

I was just thinking a few days back how people achieved this scaling and moving content with drawer. Great post Man!

Rushikesh Kardile · February 19, 2018 at 10:59 am

Brother, Awesome Post.
Came here from Udacity GoogleIndiaScholarship.
Keep up the Good work.

kyle · April 15, 2018 at 8:56 am

Looks complicated but its pretty straightforward in reality. This gives me courage. Thank you

kayode shobalaje · September 15, 2018 at 12:33 am

I have been thinking of how to implement this in android native code since I have been seeing it in ui/ux trends which I also do. You are of great help. Thanks man. Great Post!

harga epoxy lantai · November 2, 2018 at 5:07 pm

Right here is the perfect website for anyone who hopes
to find out about this topic. You realize a whole lot
its almost hard to argue with you (not that I actually will need to…HaHa).
You definitely put a new spin on a topic that has been discussed for many years.
Excellent stuff, just excellent!

    Gurleen Sethi · November 9, 2018 at 2:00 pm

    Support like this keeps me going 🔥. Much appreciation.

Jeong-Heon Lee · November 12, 2018 at 7:22 am

Awesome Awesome!! its saved my time. Thank you

raza · January 24, 2019 at 5:03 am

Great job brother

Aytaj Dadashova · February 27, 2019 at 5:17 pm

The awesome, perfect tutorial really. It was exactly what I need today. Thank you a lot.
One thing which I need to implement is: it is opening when I slide to the right side. But I want it opens when I clicked to the button on my custom toolbar. How can I achieve this?

    Leng · May 30, 2019 at 8:58 am


      Leng · May 30, 2019 at 8:59 am


Amna · April 17, 2019 at 4:16 am

hey there, Thank you so much for this amazing code , i was wondering if i want to do this on click of a menu icon , how can i achieve that !

Faysal Ahmed · May 12, 2019 at 2:52 pm

How to move content to right side in Drawer Layout Android

Like this – http://i.imgur.com/jqufsAz.png

Chintan · July 22, 2019 at 8:20 am

Awesome Post

Costantino · May 1, 2020 at 9:52 am

Hey man! Great tutorial, I was wondering if I can inflate this kind of side sheet drawer within any kind of root element; for example, is it possible to achieve this behavior within a bottom sheet on swipe?

Fakhruddin · July 8, 2020 at 4:44 pm

Works like a charm.
Thank you so much

How to use Room in Android - All you need to know to get started - TheTechnoCafe · February 19, 2018 at 6:42 pm

[…] Move content to side in Drawer Layout Android […]

Leave a Reply

Your email address will not be published. Required fields are marked *

nineteen − 6 =