Moving the main content to reveal a drawer

Question

I\'d like to create a navigation drawer effect, but rather than the drawer sliding out from the left, it must be \"behind\" the main view, so the item that slides is the vie

Answer 1

I believe I've figured out a relatively simple solution. The following DrawerLayout setup is pretty standard - i.e., the content ViewGroup first, the drawer View last, using standard attributes, etc. Additionally, a technique similar to that shown in your posted link is used to slide the content with the drawer.

The trick in the example is the setup of the drawer itself. We're going to use two nested ViewGroups - the outer one is the regular sliding drawer View; the inner, a ViewGroup for the actual drawer contents. We'll then slide the inner content ViewGroup opposite the direction of the drawer's slide using a DrawerListener (an ActionBarDrawerToggle in our example), making the drawer appear static against the left side.

The example DrawerLayout, main.xml. Note the standard drawer attributes set on the drawer_container ViewGroup:

<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"
    android:background="#000000">

    <FrameLayout
        android:id="@+id/main_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#cccccc" />

    <FrameLayout
        android:id="@+id/drawer_container"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="start">

        <LinearLayout
            android:id="@+id/drawer_content"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/image"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:src="@drawable/ic_launcher" />

            ...

        </LinearLayout>

    </FrameLayout>

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

This example Activity shows the few extra lines we need to add to a regular Navigation Drawer setup. Other than getting references to the Views, the main bit is in the ActionBarDrawerToggle's onDrawerSlide() method:

public class MainActivity extends Activity  {

    ActionBarDrawerToggle toggle;
    DrawerLayout drawerLayout;
    View drawerContainer;
    View drawerContent;
    View mainContent;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        drawerContainer = findViewById(R.id.drawer_container);
        drawerContent = findViewById(R.id.drawer_content);
        mainContent = findViewById(R.id.main_content);

        toggle = new ActionBarDrawerToggle(...) {
            @Override
            public void onDrawerSlide(View drawer, float slideOffset) {
                super.onDrawerSlide(drawer, slideOffset);

                drawerContent.setTranslationX(drawerContainer.getWidth() * (1 - slideOffset));
                mainContent.setTranslationX(drawerContainer.getWidth() * slideOffset);
            }
        };

        drawerLayout.addDrawerListener(toggle);
    }
}

Keep in mind that DrawerLayout restores the drawer opened/closed state during Activity re-creation, so you might need to account for that, for example, during orientation changes, etc.