20

I was looking into the tablet design of Gmail application. In that Navigation Drawer implementation is different from others. I have attached image for your reference.

enter image description here

And also when I expand the the drawer it should happen like normal navigation drawer behavior.

enter image description here

I would like to implement in the same way. I was searching but i found only this link Which is not so helpful. Can anyone give me suggestions how can I do this!

Kavin Prabhu
  • 2,307
  • 2
  • 17
  • 36
  • you can use sliding panel for it,http://www.incredibleandros.com/slidingpanel-android-example/ – Tushar Pandey Dec 10 '14 at 12:45
  • @TusharPandey Thanks for your reply. It's my mistake i didn't explain the question properly before. Now I have edited it again. I want the behavior to be similar like Navigation Drawer. Please consider the second image and help me out. – Kavin Prabhu Dec 10 '14 at 13:15
  • this is new material design ToolBar with navigation drawer ,https://chris.banes.me/2014/10/17/appcompat-v21/ – Tushar Pandey Dec 10 '14 at 13:27
  • But tool bar is entirely different from how it implemented in Gmail app for Tablet. How can it be a toolbar? I know what toolbar is and i have implemented them. But I feel it cannot be achieved using toolbar by toolbar by any mean. If you are so sure about using toolbar can u please explain more? – Kavin Prabhu Dec 10 '14 at 13:43
  • Are you talking about navigation drawer, Custom navigation drawer. – Tushar Pandey Dec 10 '14 at 13:57
  • I think you didn't get my question. It a custom navigation drawer. But what i want is when i close the drawer i want it like first image when i open i want it like second image. This is what I'm trying to implement. Hope you get it. – Kavin Prabhu Dec 11 '14 at 03:20

2 Answers2

13

You can use a SlidingPaneLayout with a margin on the main pane and custom listener for the cross fading.

<com.sqisland.android.CrossFadeSlidingPaneLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/sliding_pane_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
  <FrameLayout
      android:layout_width="240dp"
      android:layout_height="match_parent"
      android:background="@color/purple">
  <TextView
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:text="@string/full"/>
  <TextView
      android:layout_width="64dp"
      android:layout_height="match_parent"
      android:background="@color/blue"
      android:text="@string/partial"/>
  </FrameLayout>
  <TextView
      android:layout_width="400dp"
      android:layout_height="match_parent"
      android:layout_weight="1"
      android:layout_marginLeft="64dp"
      android:background="@color/light_blue"
      android:text="@string/pane_2"/>
</com.sqisland.android.CrossFadeSlidingPaneLayout>

Subclass SlidingPaneLayout and find the partial and full panes in onFinishInflate:

protected void onFinishInflate() {
  super.onFinishInflate();

  if (getChildCount() < 1) {
    return;
  }

  View panel = getChildAt(0);
  if (!(panel instanceof ViewGroup)) {
    return;
  }

  ViewGroup viewGroup = (ViewGroup) panel;
  if (viewGroup.getChildCount() != 2) {
    return;
  }
  fullView = viewGroup.getChildAt(0);
  partialView = viewGroup.getChildAt(1);

  super.setPanelSlideListener(crossFadeListener);
}

Change the alpha of the full pane and partial pane with a listener:

private SimplePanelSlideListener crossFadeListener 
    = new SimplePanelSlideListener() {
  public void onPanelSlide(View panel, float slideOffset) {
    super.onPanelSlide(panel, slideOffset);
    if (partialView == null || fullView == null) {
      return;
    }

    partialView.setVisibility(isOpen() ? View.GONE : VISIBLE);
    partialView.setAlpha(1 - slideOffset);
    fullView.setAlpha(slideOffset);
  }
};

Also, hide the partial pane when the layout is opened.

protected void onLayout(
    boolean changed, int l, int t, int r, int b) {
  super.onLayout(changed, l, t, r, b);

  if (partialView != null) {
    partialView.setVisibility(isOpen() ? View.GONE : VISIBLE);
  }
}

More info: http://blog.sqisland.com/2015/01/partial-slidingpanelayout.html

chiuki
  • 14,580
  • 4
  • 40
  • 38
2

There is an awesome library for this https://github.com/mikepenz/MaterialDrawer

(Use MiniDrawer from this library)

android_dev
  • 3,886
  • 1
  • 33
  • 52