Saturday, February 22, 2014

Android: Slider from right to left similar to Navigation Drawer


Google added new pattern for displaying app’s main navigation option as Navigation Drawer.

What is Navigation Drawer?

The navigation drawer is a panel that transitions in from the left edge of the screen and displays the app’s main navigation options.

Displaying the navigation drawer

The user can bring the navigation drawer onto the screen by swiping from the left edge of the screen or by touching the application icon on the action bar.
As the navigation drawer expands, it overlays the content but not the action bar. When the drawer is fully extended, the action bar adjusts its content by replacing the current action bar title with the app name and removing all actions that are contextual to the view underneath the navigation drawer. The overflow menu with the standard action items for Settings and Help remains visible.
The usage of the pattern helps in lot of ways as follows
  • You don't want to give up the vertical screen real estate for a dedicated tab bar.
  • You have a large number of top-level views.
  • You want to provide direct access to screens on lower levels.
  • You want to provide quick navigation to views which don't have direct relationships between each other.
  • You have particularly deep navigation branches

Dismissing the navigation drawer

When the navigation drawer is expanded, the user can dismiss it in one of four ways:
  • Touching the content outside the navigation drawer
  • Swiping to the left anywhere on the screen (including edge swipe from right)
  • Touching the app icon/title in the action bar
  • Pressing Back
We have lot of questions for slider menus?

For displaying contents like navigation option we have navigation drawers provided by Google but options like filters, notifications, downloads etc.., we have any options in android?

Whether we have any option like navigation drawer sliding from right to left?

Answer: yes, we have lot of third party libraries which can help us from achieving this.

One of the *.jar named slider.jar I found recently, which I felt very easy to achieve the slider from right to left.
There are some pre defined funstions in "slider.jar" which help us to create fb style slide menu.
  • setLeftBehindContentView(left_layout) is used to set left menu.
  • setRightBehindContentView(right_layout) is used to set right menu.
  •  toggleLeftDrawer() is used to show the left menu.
  • toggleRightDrawer() is used to show the right menu.
Usage:

It's very easy to use the slider in your project.
Remember two things.
  1. Create *.xml (eg:  slider_right_2_left.xml) where your content can be displayed.
  2. Use the xml file in the program
// Initialize variable
SimpleSideDrawer slide_me;

// declaration and setting the content *.xml to the View
slide_me = new SimpleSideDrawer(this);
slide_me.setRightBehindContentView(R.layout.slider_right_2_left);

// Use for slide from right to left
slide_me.toggleRightDrawer();
In the current example, we have used the method in onOptionsItemSelected override method.



 



Thanks for reading :)
If you have any other quick thoughts/hints that you think people will find useful, feel free to leave a comment.

1 comment :

  1. how to check drawer is open??

    i try
    if(slide_me.isActivated()){}

    not working

    ReplyDelete