Android - Sliding menu with sub menu

Question

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 :

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.

Decerebrate

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? – Topflight

@Topflight 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. – Decerebrate

@Topflight can u brief out your first comment in a more clear way? – Decerebrate

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 – Topflight

@Topflight i think i made you confused. I have only one level as of now. see here: 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. – Decerebrate

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 – Topflight

let us continue this discussion in chat – Decerebrate

Answer 1

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.

Luben

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 pastebin.com/6iKBJ98i – Decerebrate

@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. – Tenderfoot

very buggy and sluggish component – Siamese

Answer 2

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:

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

Piperpiperaceous