CODEWITHSUNDEEP
androidandroid-layoutslidingdrawer
user766650
user766650

Reputation:

How to create sliding layout like in Google Drive tablet app or Google+ notifications?

I'd like to create an extra-information view similar to that of the Google Drive app (below)Google Drive app on a tablet. When the info button is clicked, this view slides in from the rightthis view slides in from the rightcontaining a layout. Another example would be the Google+ app with its notifications slide-out panel:enter image description here. The SlidingLayer by 6Wunderkinder almost works, but doesn't fade a semi-black background over the views behind the "drawer" and I haven't found another library that does this.

If anybody has any suggestions/solutions please let me know!

Also, I've already looked at this question and none of the answers suggested there are correct either.

Upvotes: 1

Views: 1625

Answers (2)

user766650
user766650

Reputation:

For posterity, here's the answer to this question. As Steve Benett's suggestion led me to discover, the correct way to do this is to use two DrawerLayouts, nested within each other like so:

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawer_navigation_bar"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v4.widget.DrawerLayout
        android:id="@+id/drawer_sidebar"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <fragment
            android:id="@+id/fragment_main_content"
            android:name="MainContentFragment"
            android:layout_height="match_parent"
            android:layout_width="match_parent" />

        <fragment
            android:id="@+id/fragment_sidebar"
            android:name="SidebarFragment"
            android:layout_width="300dp"
            android:layout_height="match_parent"
            android:layout_gravity="end" />

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

    <fragment
        android:id="@+id/fragment_navigation_bar"
        android:name="NavigationFragment"
        android:layout_height="match_parent"
        android:layout_width="300dp"
        android:layout_gravity="start" />

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

The innermost DrawerLayout contains the main content of the Activity, whether it be a fragment or some other layout components. fragment_sidebar is the fragment that will be swiped out from the right. Then, on the top-level DrawerLayout you have the fragment_nagivation_bar which houses the left Drawer's ListView or whatever.

Then, in the Activity Java code you have:

mDrawerLayoutLeft= (DrawerLayout) findViewById(R.id.drawer_navigation_bar);
mDrawerLayoutRight = (DrawerLayout) findViewById(R.id.drawer_sidebar);

mDrawerLayoutLeft.setDrawerShadow(R.drawable.drawer_shadow, GravityCompat.START);
mDrawerLayoutRight.setDrawerShadow(R.drawable.sidebar_shadow, GravityCompat.END);

An optional addition (but recommended, for consistency of UX) is to hide the other Drawer when one is opened, so your screen doesn't consist solely of Drawers.

I hope this has helped somebody!

Upvotes: 3

Steve Benett
Steve Benett

Reputation: 12943

This is the DrawerLayout. Have a look at the design guide, which illustrates the behavior well.

If you want to use / customize the "semi-black background" use DrawerLayout.setDrawerShadow() with a drawable. Google hands out a set of drawables here. Download the ActionBar Icon Pack and look for the drawable_shadow.9.png.

If you want that the menu appears from the right, set android:layout_gravity="end" as a property in the second child of the layout.

Upvotes: 2

Related Questions