11

I wanted my app to have face book like sliding menu. I google'd about the issue and found many posts out there, which only helped me to build a single sliding menu. But what i need is, 2 level sliding menu ie, when i click on some option in sliding menu, it should open another sliding menu on top of it (first sliding menu should blur at this point) like the zomato app as shown below. I tried with JFeinstein sliding menu library, but i could build a 2 level sliding menu using it. Are there any other libraries to achieve this or should i build one on my own?

Shown below is sliding menu from Zomato app :

enter image description here

When i click on "location" option on the above shown menu, it will open a secondary menu as shown below. I wanted the same feature.

enter image description here

suresh cheemalamudi
  • 6,190
  • 11
  • 49
  • 67
  • 3
    imagine that the second sliding menu is new menu, so assign another sliding menu to the second one as you did it for the creating two-slide menu, what is difficulties? – Daler Mar 07 '13 at 06:30
  • @Daler I dint try this one bcox i wanted the 2nd level menu to be a secondary menu and not the new one, i mean when i click on the first menu option, it should become blur and go behind the second menu. – suresh cheemalamudi Mar 07 '13 at 06:34
  • @Daler can u brief out your first comment in a more clear way? – suresh cheemalamudi Mar 07 '13 at 07:22
  • ok, you have sliding menu which has 2 levels, you want to add +1 level, so you know how to make 2 level slides. You can use the same technique to add one more slide to the second level slide, i think it should be possible with jfeinstein, without modifying it – Daler Mar 07 '13 at 08:03
  • @Daler i think i made you confused. I have only one level as of now. see here: http://i.imgur.com/ZT0pXQo.png this is what i m getting now. When i click on "categories" button shown in the image, i should get another menu on top of it. Hope am clear now. – suresh cheemalamudi Mar 07 '13 at 08:15
  • ok, this is what i mean, add in this screen one more slide as you did it from the beginning. So, when you click on distance it will open another sliding menu – Daler Mar 07 '13 at 08:21
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/25760/discussion-between-suresh-cheemalamudi-and-daler) – suresh cheemalamudi Mar 07 '13 at 09:13

2 Answers2

6

Check out the Sliding Panel component a widget enabling multiple overlaid views with sliding interaction for showing multiple depth data in one screen display effectively.

It also provide the demo of referenced implementation you can also check it.

Thanks.

GrIsHu
  • 29,068
  • 10
  • 64
  • 102
  • I just downloaded the demo to check how it works. I imported and tried running it, but it crahses leaving the logcat message as shown here http://pastebin.com/6iKBJ98i – suresh cheemalamudi Mar 07 '13 at 07:07
  • @sureshcheemalamudi Hi, Were you able to find the solution for this requirement. I have the exact same requirement,of getting a 2 level sliding menu, no luck till now. Could you please help out? Thanks. – jasdmystery Mar 11 '13 at 08:44
  • very buggy and sluggish component – agamov Oct 13 '13 at 14:27
3

You can easily add as many menu levels as you desired using JFeinstein sliding menu. The idea is to use sliding menu as left or right sliding view of main sliding menu and so on. Complete code of 2 level menu with comments and output is added to make things more clear.

 public class MainActivity extends SlidingFragmentActivity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // dummy views - content view
        TextView content = new TextView(this);
        content.setBackgroundColor(Color.WHITE);
        content.setText("content");
       // Menu view
        TextView menu = new TextView(this);
        menu.setBackgroundColor(Color.GREEN);
        menu.setText("menu");
        // 2nd level menu view
        TextView subMenu = new TextView(this);
        subMenu.setBackgroundColor(Color.LTGRAY);
        subMenu.setText("submenu");


        //configure sliding menu
        SlidingMenu sm = getSlidingMenu();
        sm.setMode(SlidingMenu.SLIDING_WINDOW);
        sm.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);
        sm.setBehindOffset(80);
        sm.setBehindScrollScale(0.25f);
        sm.setFadeDegree(0.25f);

        //Another sliding menu - for 2nd level or sub menu 
        SlidingMenu leftSlidingView = new SlidingMenu(this);
        leftSlidingView.setMode(SlidingMenu.SLIDING_WINDOW);
        leftSlidingView.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);
        leftSlidingView.setBehindOffset(80);
        leftSlidingView.setBehindScrollScale(0.25f);
        leftSlidingView.setFadeDegree(0.25f);

    //==== Required instruments has been created ;) lets put them at right places   

        // setting menu and sub-menu view 
        leftSlidingView.setContent(menu);  // at center of left sliding view
        leftSlidingView.setMenu(subMenu);  // at left of left sliding view

        //set content view
        setContentView(content);           // at center of main sliding view
        // finally, set  leftSlidingView as behind content  view of main view
        setBehindContentView(leftSlidingView); // at left of main sliding view

    }
}

Here is the output:

enter image description here

Note: You need to import JFeinstein sliding menu as library and extend your activity from SlidingFragmentActivity.

Adnan
  • 5,025
  • 5
  • 25
  • 44