push activity on the right when open drawer

Question

I have implemented drawerlayout which slides from the right but it does not shift the activity the right like facebook does (See below image). How do I push the current activity to the right side when user taps on opendrawer button like in the above image.Currently it appears on top of activity and drops shadow.I really appreciate any help . Thanks in advance.

Answer 1

Although there is no default way to slide the activity along with navigation drawer we can do it through code. As suggested in the above answer by mick88 following is the code snippet from my project.

my profile.xml file

<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:facebook="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <!-- Framelayout to display Fragments -->

    <RelativeLayout
        android:id="@+id/mainView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >


    </RelativeLayout>

    <!-- Listview to display slider menu -->

    <RelativeLayout
        android:id="@+id/drawerView"
        android:layout_width="240dp"
        android:layout_height="wrap_content"
        android:layout_gravity="start" >

        <ListView
            android:id="@+id/list_slidermenu"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/list_background"
            android:divider="@color/list_divider"
            android:dividerHeight="1dp" />
    </RelativeLayout>
</android.support.v4.widget.DrawerLayout>

now in Activity

public class ProfileActivity extends ActionBarActivity {
    ....
    private DrawerLayout mDrawerLayout;
    private ActionBarDrawerToggle mDrawerToggle;

    RelativeLayout drawerView;
    RelativeLayout mainView;
    ....

    @Override
    protected void onCreate(Bundle savedInstanceState) {


        ............. //
        .............//
        drawerView = (RelativeLayout) findViewById(R.id.drawerView);
        mainView = (RelativeLayout) findViewById(R.id.mainView);

        mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, R.drawable.ic_drawer, R.string.app_name, R.string.app_name) {
            public void onDrawerClosed(View view) {
                supportInvalidateOptionsMenu();
            }

            public void onDrawerOpened(View drawerView) {
                supportInvalidateOptionsMenu();
            }

            @Override
            public void onDrawerSlide(View drawerView, float slideOffset) {
                super.onDrawerSlide(drawerView, slideOffset);
                mainView.setTranslationX(slideOffset * drawerView.getWidth());
                mDrawerLayout.bringChildToFront(drawerView);
                mDrawerLayout.requestLayout();
            }
        };
        mDrawerLayout.setDrawerListener(mDrawerToggle);

    }

}

Answer 2

This is really helpful. Put this snippet in your MainActivity.java

ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(this, drawerLayout, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close) {
 @Override
 public void onDrawerSlide(View drawerView, float slideOffset) {
    super.onDrawerSlide(drawerView, slideOffset);
    containerFrame.setTranslationX(slideOffset * drawerView.getWidth());
    drawerLayout.bringChildToFront(drawerView);
    drawerLayout.requestLayout();
    //below line used to remove shadow of drawer
    drawerLayout.setScrimColor(Color.TRANSPARENT);
}//this method helps you to aside menu drawer
};

Answer 3

To answer your question. The DrawerLayout is behaving as expected.

You can use Slidingmenu (or Umano) in conjunction with a DrawerLayout (I do).

Finally, regarding what you want (and what Facebook does), Google itself doesn't want you to do that. They want you to use the drawer the way they use it in Google Music (for example)

A Google contact said exactly this to me:

• The navigation drawer should follow the new guidelines and should be implemented using DrawerLayout and ActionBarDrawerToggle.
• The navigation drawer should not shift the action bar and should appear as an overlay above the screen contents.
• The navigation drawer should contain only primary navigational elements. Avoid showing items in the navigation drawer that would typically be placed in the action bar, such as Settings or Search. Blockquote

So don't do what Facebook does. (That is a good advice in any other context) :)

Answer 4

This is not recommended, but you can move your layout programmatically:

@Override
public void onDrawerSlide(View drawerView, float offset) {
    View container = findViewById(R.id.container);
    container.setTranslationX(offset * drawerView.getWidth());
}

Answer 5

OP got the answer. But for someone else that wants that effect, can use SlidingPaneLayout. It's designed for this purpose.

In XML file:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.SlidingPaneLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@id/mainFrame"
    style="@style/MP.mainFrame" >


    <!--****************************Right Pane ****************************-->
    <LinearLayout style="@style/searchLayout">
        <android.support.v4.widget.NestedScrollView style="@style/MP">
            <LinearLayout style="@style/MP.verticalLinearLayout">


            </LinearLayout>
        </android.support.v4.widget.NestedScrollView>
    </LinearLayout>
    <!--****************************Right Pane ****************************-->

    <!--****************************Left Pane ****************************-->
<FrameLayout style="@style/MP.mainLayout">
    <LinearLayout android:id="@id/fragmentContainer" style="@style/MP.fragmentContainer"/>

    <android.support.v7.widget.Toolbar style="@style/toolbar">
        <ir.tooskar.excomponents.ExtendedTextView android:id="@id/appTitle" style="@style/WC.appTitle"/>
        <ir.tooskar.excomponents.ExtendedTextView android:id="@id/appBarSearchIcon" style="@style/WC.appBarSearchIcon"/>
    </android.support.v7.widget.Toolbar>
</FrameLayout>        <!--****************************Left Pane ****************************-->

There are two panes, right and left, stick together and thus move together. For me, the left pane is the main pane and the right is hidden with a toggle icon to display it. (A view with id appBarSearchIcon).

Remember, there is one viewgroup named, SlidingPaneLayout that has just two children, The Left and The Right.

And important part in the activity:

        slidingPaneLayout = (SlidingPaneLayout) findViewById(R.id.mainFrame);
//        Sets a color for covering left pane(Main Pane)
        slidingPaneLayout.setSliderFadeColor(ContextCompat.getColor(context, R.color.searchPaneFadeColor));

//        The listener for Opening the Right pane(Hidden pane)
        findViewById(R.id.appBarSearchIcon).setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View view){
                slidingPaneLayout.openPane();
            }
        });

Closing the right pane is done by the API, just like Navigation Drawer.

Answer 6

I don't think you can implement it with the stock DrawerLayout, however with SlidingMenu you can, the GitHub repo here should explain all you need