How to implement two level slidingmenu in Android using jfeinstein10 / SlidingMenu?

Question

I want to create 2 level sliding menu in android. When i click on the first sliding menu item i need to show another sliding menu on the left to it. I created the first level sliding menu using the following code.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/menu_frame"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <ListView    
        android:id="@android:id/list"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingLeft="@dimen/list_padding"
        android:paddingRight="@dimen/list_padding" />

</FrameLayout> 

Code Part

SlidingMenu menu;
menu = new SlidingMenu(this);
menu.setMode(SlidingMenu.LEFT);
menu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);
menu.setShadowWidth(10);
menu.setFadeDegree(0.0f);
menu.attachToActivity(this, SlidingMenu.SLIDING_WINDOW);
menu.setBehindWidth(200);
menu.setMenu(R.layout.menu_frame);

How to proceed to make the 2nd level sliding menu?

Stacy

were u able to solve this. can u please share how did u solve your problem? here is my question regarding the same problem : #15243325 – Vorlage

@sureshcheemalamudi : i couldn't able to solve it. I used only one level sliding menu. If you manage to solve. Please put the answer here. – Stacy

Answer 1

We can achieve the SlideMenu using the TranslateAnimation in android. Create a frameLayout in XML and have MainXML page and then MainSlidingMenu. Adjacent to the MainSlidingMenu have the secondary slidingMenu. By default have the MainSlidingMenu and Secondary SlidingMenu invisible. If the button click or any required event happend show the Main SlidingMenu , then if there is a click/event in the MainSlidingmenu translate the MainMenu further to show the secondary sliding menu.

Beechnut

That way I'd have a menu on the right and on the left side, right? That is not the idea of having a "two layer menu" - sorry. – Spooky

Yes. But i couldn't find any other options for this. Even though there is option called setSecondaryMenu in the library, i couldn't find a way to achieve it :( – Beechnut

Thanks for your post anyhow! – Spooky

Answer 2

Try with this:

SlidingMenu menu;
menu = new SlidingMenu(this);
menu.setMode(SlidingMenu.LEFT_RIGHT);
menu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);
menu.setShadowWidth(10);
menu.setFadeDegree(0.0f);
menu.attachToActivity(this, SlidingMenu.SLIDING_WINDOW);
menu.setBehindWidth(200);
menu.setMenu(R.layout.menu_frame);
//Set the secondary menu
menu.setSecondaryMenu(R.layout.menu_frame);
menu.setSecondaryShadowDrawable(R.drawable.shadow);

Quintin

I want the secondary menu on the right side of my 1st menu. But i am getting the secondary menu on top of the 1st menu and hiding its view. – Stacy

can you please help me to fix the above issue? – Stacy

You have to use the SlidingMenu as a view, check the documentation and modify your layouts to put severals SlidingMenus where you need. – Thapsus

I am completely new to Android. If you would have developed a sliding menu with submenus inside that , can you please share the code for that? – Stacy

I have developed a SlidingMenu with submenus using the RIGHT menu, but is very easy to use the SlidingMenu as view. You have to create a new layout with the defenition of SlidingMenu, and take care with the parameters sliding:viewAbove="@layout/YOUR_ABOVE_VIEW" sliding:viewBehind="@layout/YOUR_BEHIND_BEHIND" . The viewAdove must be your actually menu, and the viewBehind the subnemu. The usage of the Sliding menu need knowns several concepts of Android (Fragments, View,...), take a look to Android documentation – Thapsus

Maybe you can use this androidviews.net/2012/12/slide-expandable-listview to implement your secondary menu. – Thapsus

Answer 3

This is how I got it, using the mentioned library:

This layout contains the top level sliding menu, which references the layout of the menu (fragment_nav_menu) and the layout with the sub-menu layout reference as view above.

<com.jeremyfeinstein.slidingmenu.lib.SlidingMenu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:sliding="http://schemas.android.com/apk/res-auto"
    android:id="@+id/slidingMenuRoot"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    sliding:viewAbove="@layout/sliding_sub_menu"
    sliding:viewBehind="@layout/fragment_nav_menu"
    sliding:touchModeAbove="fullscreen"
    />

This would be the second level menu (sliding_sub_menu.xml), note that what you set as viewAbove here is going to be the actual top-level content.

<com.jeremyfeinstein.slidingmenu.lib.SlidingMenu
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:sliding="http://schemas.android.com/apk/res-auto"
    android:id="@+id/slidingSubMenuRoot"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    sliding:viewAbove="@layout/fragment_content"
    sliding:viewBehind="@layout/fragment_sliding_menu"
    sliding:touchModeAbove="fullscreen"
/>

The content layout (fragment_content.xml) might be like this, a simple FrameLayout, and then, programmatically, you would add the desired fragment.

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/mainContentFrame"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/app_background"
    />

Likewise, the sliding sub-menu content, is defined in the layout file (fragment_sliding_menu.xml) and used programmatically to ad a Fragment instance.

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/mainContentFrame"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/app_background"
    />

To add a fragment to those FrameLayouts, use something like this (maybe also removing a potential previous fragment before adding a new one):

    FragmentTransaction fragTrans = getSupportFragmentManager().beginTransaction();
    fragTrans.add(R.id.slidingSubMenuFrame, SubMenuFragment.newInstance(this));
    fragTrans.commit();

I haven't tested it much yet, but seems to work. Of course, further logic is needed to implement the desired behavior of the menus (close listener, select items, etc).

Sitnik

Answer 4

JFeinstein sliding menu is a rich library. You can easily add as many menu levels as you desired. The idea is to use sliding menu as left or right sliding view of main sliding menu and so on. Here is a stand alone example which provides 2 level menu. What you need is to import JFeinstein sliding menu as library and extend your activity from SlidingFragmentActivity. I am putting complete activity code with comments 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 result:

Hope it would help :)

Tymes

Answer 5

I figured it out, it's so simple.

menu.setMenu(R.layout.layout_filemenu);
menu.setSecondaryMenu(R.layout.layout_main);
menu.setMode(SlidingMenu.LEFT_RIGHT);

setMenu -> Left side SetSecondaryMenu ->Right side

Hope this helps

Tapdance