How to implement a DrawerLayout with a visible handle

Question

I have successfully implemented a NavigationDrawer for my application.

My app displays a drawer that opens on the left of the screen.

My problem is I need t

Answer 1

It's quite tricky.

I think this is similar to what is done to the drawer handle in new Google Maps app. Don't take my word, not sure. :)

I have written toggle that stays on the edge of the Activity content view. When the DrawerLayout is dragged, I translated the view on the x-axis by the amount of the minimal child (which is DrawerLayout content view) minus the shadow (if any). Since the shadow casted + content view of the DrawerLayout gives the full measured width of the entire drawer.

I quickly multiply the slided offset and the minimal child and find the x translation.

[Edit: Code has been removed for readability and it has been moved to the link provided below]

In your activity:

mDrawerToggle = new DrawerLayoutEdgeToggle(
    this, 
    mDrawerLayout, 
    R.drawable.ic_launcher, 
    R.drawable.ic_launcher,
    Gravity.LEFT, 
    true) {

        @Override
        public void onDrawerClosed(View view) {
            super.onDrawerClosed(view); //must call super
        }

        @Override
        public void onDrawerOpened(View view) {
            super.onDrawerOpened(view); //must call super
        }

        @Override
        public void onDrawerSlide(View view, float slideOffset) {
            super.onDrawerSlide(view, slideOffset); //must call super

        }
    };
mDrawerLayout.setDrawerListener(mDrawerToggle);

Creativity boost: You can add more cosmetics like distance from ActionBar which you can set as margin to the handle.

Also you can mimic "single-zipper effect" by moving the handle up/down along left/right just by translating on the Y axis. :)

Edit: Its available on my GitHub here

Edit 2: For those that can't get the handle appear at the beginning just use mDrawerToggle.setVerticalPostionOffset(0)

Answer 2

I found a way of doing this pretty easily thanks to the Aniqroid library written by Mobistry (SO pseudo)

I use the SlidingTray class which is a copy of android SlidingDrawer but lets you position the drawer to any corner of the screen.

I declared the element via xml

<com.sileria.android.view.SlidingTray 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawer"
    android:layout_width="match_parent"
    android:layout_height="270dp"
    android:content="@+id/content"
    android:handle="@+id/handle" >

    <ImageView
        android:id="@+id/handle"
        android:layout_width="320dp"
        android:layout_height="24dp"
        android:background="@drawable/tray_btn" />

    <LinearLayout
        android:id="@+id/content"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="fill_vertical"
        android:orientation="vertical" >
    </LinearLayout>

</com.sileria.android.view.SlidingTray>

And just had to call

Kit.init(this);

in my main Activity before inflating the layout.

I thank aniqroid devs!

https://code.google.com/p/aniqroid/