How To Make Sliding Menu And Sub Level Menu Like Facebook App In Android

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...
  1. 10 Responses to “How To Make Sliding Menu And Sub Level Menu Like Facebook App In Android”

  2. when you write a program blog have some commonsense many animation files missing. Its a waste of time to look your program. Do good stuff no crap one

    By chethan on Aug 17, 2013

  3. @chethan: clearly you have no idea what you are doing.the animation files for the submenu are provided.

    if you are looking for a blog that gives you the whole project source code so you can just copy paste and compile right away then you are in the wrong place

    By blogmeister on Aug 17, 2013

  4. Hi,

    This is a great work that helps me a lot to understand how to apply the sliding menu library. However, I am stuck at the line “ft.replace(R.id.fragment_menu_container, new MenuMain());” in Menu2Fragment class. What is it for? I have an error right there as there is no such class

    Thank you

    By Dat on Aug 26, 2013

  5. @dat: hi, sorry, i corrected it. It is supposed to be new Menu1Fragment().

    By blogmeister on Aug 27, 2013

  6. Yes, it should be, I am also able to fix that myself after looking and testing around.

    Again this tutorial is very nice, clean and easy to follow. I have been stuck with this library for almost a week with no hope until I found this article.

    By Dat on Aug 27, 2013

  7. @dat: thank you for the compliment. glad it helped you

    By blogmeister on Aug 27, 2013

  8. Actually there are few mistakes in your code, especially the animation xml name such as the R.anim.slideoutleft instead of R.anim.splash_slideoutleft, you check it all. Besides that, the wrong id for the text field is called in Menu1Fragment class. It should be R.id.clickme instead of R.id.menu_tvConsole.

    I think this is the reason for the first comment.

    By Dat on Aug 27, 2013

  9. @dat: hehe thanks for pointing these mistakes. those variables are from my original code, i had to rename them.

    i guess not everything was changed. thanks again!

    By blogmeister on Aug 27, 2013

  10. Hi blogmeister

    Your code is good but I get an error on this line:

    FragmentTransaction ft = getSupportFragmentManager().beginTransaction();

    I get a type mismatch.

    Thanks

    By Elizabeth on Jan 22, 2014

  11. @elizabeth: this is more so on the kind of class you are importing. try to use the android support library for this. it also has a FragmentTransaction class

    By blogmeister on Jan 22, 2014

Post a Comment