Jeremy Feinstein created a very easy to plug in component that simulates the same sliding menu that you see in apps like Foursquare and Facebook. However, the Facebook app features a sub level menu or two level menu if that is what you call it and the GitHub page of Sliding Menu does not provide such a tutorial.

It took me time to figure out how it works. With good use of the Fragment class, you can easily create a sub level sliding menu. This post assumes you already have an idea how fragments work and you already configured jfeinstein’s library to be included in your project.

Here is how I did it.

First, I created an XML layout file named menu_container.xml where I treat it as a container where the menus will appear.

This is menu_container.xml. 

 

Then, the menu and sub menu XML files. I named them menu1.xml and menu2.xml respectively.

This is menu1.xml. 

 
This is menu2.xml. 

 
Now for the source code. In your activity class, you should extend SlidingFragmentActivity instead of the usual Activity. And within the onCreate() method, you need to make sure you set the content view and behind view which is the menu. 

 
The R.drawable.shadow XML file can be copied from the source file of jfeinstein’s library. This is to add a shadow effect that divides the menu from the content.

The last few lines are critical. I added this programmatically rather than putting a fragment tag within the menu_container.xml file because whenever I replaced a fragment, it does not get removed. So to ensure that fragments are removed when you replace new ones, you must not include a fragment tag within the XML layout. Add it manually in code.

For the first menu Fragment class, I added an OnClickListener to it so that when the click me TextView is tapped by the user, the sub menu will appear. 

 
The sub menu fragment class looks like this. 

That should do the trick. And to finish things off, here are the following animations for the menu and sub-menu. Place this in your res/anim folder.

This is for slideoutright.xml. 

 
This is for slideinright.xml. 

 
This is for slideinleft.xml. 

 
This is for slideoutleft.xml. 

 
There! Now your app will have its very own sub-level sliding menu. Let me know if there are things lacking here. I only took out parts of my code and placed them here but I feel this article has all the necessary details needed to create your very own 2 level sliding menu using jfeinstein’s library.

Related Posts Plugin for WordPress, Blogger...