How to make background Activity smaller while opening the Navigation Drawer?

Question

I want to make my background Activity a little bit smaller while opening the Navigation Drawer, Simulate the effect that exists in the Airbnb application. I guess the best explanation would be a screenshot:

But the point is not to make the View just smaller, but to make it an animation that is synchronized to the Drawer Open/Close animation. So if you started to open the Drawer an in the middle decided to stop and go back, the background Activity scale will be affected accordingly.

How can this be done using the build in DrawerLayout? Is there some implementation for this?

Answer 1

You can perform this effect using the ActionBarDrawerToggle in the support library v4.

All you have to do is to Override onDrawerSlide method to retrieve the opening % of the drawer menu, and then scale your FrameLayout where your fragment is placed in.

Example with code:

main_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">

    <FrameLayout android:id="@+id/content_frame"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>    

    <ListView android:id="@+id/left_drawer"
    android:layout_width="240dp"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:choiceMode="singleChoice"
    android:divider="@android:color/transparent"
    android:dividerHeight="0dp"/>

</android.support.v4.widget.DrawerLayout>

Now in your Activity which holds the Drawer:

public class ConfigurerActivity extends ActionBarActivity 
{
    private DrawerLayout mDrawerLayout;
    private ListView mDrawerList;
    private ActionBarDrawerToggle mDrawerToggle;
    private FrameLayout frame;
    private float lastScale = 1.0f;

    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main_layout);

        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        mDrawerList = (ListView) findViewById(R.id.left_drawer);
        frame = (FrameLayout) findViewById(R.id.content_frame);

        mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, R.drawable.ic_drawer, R.string.acc_drawer_open, R.string.acc_drawer_close) 
        {            
            @SuppressLint("NewApi")
            public void onDrawerSlide(View drawerView, float slideOffset)
            {
                float min = 0.9f;
                float max = 1.0f;
                float scaleFactor = (max - ((max - min) * slideOffset));

                if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) 
                {
                    frame.setScaleX(scaleFactor);
                    frame.setScaleY(scaleFactor);
                }
                else
                {               
                    ScaleAnimation anim = new ScaleAnimation(lastScale, scaleFactor, lastScale, scaleFactor, frame.getWidth()/2, frame.getHeight()/2);
                    anim.setDuration(0);
                    anim.setFillAfter(true);
                    frame.startAnimation(anim);

                    lastScale = scaleFactor;
                }
            }
        };

        mDrawerLayout.setDrawerListener(mDrawerToggle);

        // ... more of your code
    }
}

Note that i use 2 different methods to scale, because setScaleX/Y are not available in PRE - Honeycomb Android versions.

With this, you can set your own scaleFactor (i think 0.9f its small enough) or maybe try new effects (change color) based on the opening % of the drawer.

Hope it helps.

Answer 2

Hey you can also give best effect for smaller activity . Check ResideMenu

demo with library.

Answer 3

if you have a look at the third-party library SlidingMenu, that should have everything you want.

The bit you are interested in is the behindScrollScale, which says this:

behindScrollScale - a float representing the relationship between the above view scrolling and the behind behind view scrolling. If set to 0.5f, the behind view will scroll 1px for every 2px that the above view scrolls. If set to 1.0f, the behind view will scroll 1px for every 1px that the above view scrolls. And if set to 0.0f, the behind view will never scroll; it will be static. This one is fun to play around with. Default is 0.25f.