Java – how to make the background activity smaller when opening the navigation bar?

I want my background activity to slightly open the navigation drawer to simulate the impact in the airbnb application I think the best explanation is the screenshot:

But the point is not to make the view smaller, but to make it synchronized with the drawer open / close animation So if you start to open the drawer and decide to stop in the middle, the background activity scale will be affected accordingly

How do I use the build in drawerlayout? Is there any implementation?

Thank you in advance

Solution

You can use actionbardrawertoggle in the support library V4 to perform this effect

All you need to do is override the ondrawerslide method to retrieve the open% of the drawer menu, and then scale your clip to place it in your FrameLayout

Code example:

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 hold the drawer in your activity:

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,frame.getWidth()/2,frame.getHeight()/2);
                    anim.setDuration(0);
                    anim.setFillAfter(true);
                    frame.startAnimation(anim);

                    lastScale = scaleFactor;
                }
            }
        };

        mDrawerLayout.setDrawerListener(mDrawerToggle);

        // ... more of your code
    }
}

Please note that I use 2 different methods for scaling because setscalex / y is not available in the pre – honeycomb Android version

In this way, you can set your own scalefactor (I think 0.9f is small enough) or maybe try a new effect (change the color) according to the opening% of the drawer

I hope it helps