Share the post "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.
|
1 2 3 4 |
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:id="@+id/fragment_menu_container" android:baselineAligned="false" /> |
Then, the menu and sub menu XML files. I named them menu1.xml and menu2.xml respectively.
This is menu1.xml.
|
1 2 3 4 5 6 7 |
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" > <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:id="@+id/clickme" android:clickable="true" android:text="Click Me" /> </LinearLayout> |
This is menu2.xml.
|
1 2 3 4 5 6 7 |
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" > <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:id="@+id/back" android:clickable="true" android:text="Back" /> </LinearLayout> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(YOUR MAIN CONTENT XML FILE); setBehindContentView(R.layout.menu_container); SlidingMenu menu = getSlidingMenu(); menu.setMode(SlidingMenu.LEFT); menu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN); menu.setFadeDegree(0.35f); menu.setBehindWidth(400); menu.setShadowDrawable(R.drawable.shadow); FragmentTransaction ft = getSupportFragmentManager().beginTransaction(); ft.add(R.id.fragment_menu_container, new Menu1Fragment()); ft.commit(); } |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
public class Menu1Fragment extends Fragment implements OnClickListener { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { return inflater.inflate(R.layout.menu1, container, false); } @Override public void onViewCreated(final View view, Bundle savedInstanceState) { TextView tv = (TextView) view.findViewById(R.id.clickme); tv.setOnClickListener(this); } @Override public void onClick(View v) { if (v.getId() == R.id.clickme) { FragmentTransaction ft = getActivity().getSupportFragmentManager().beginTransaction(); ft.setCustomAnimations(R.anim.slideinleft, R.anim.slideoutleft); ft.replace(R.id.fragment_menu_container, new Menu2Fragment()); ft.commit(); } } } |
The sub menu fragment class looks like this.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
public class Menu2Fragment extends Fragment implements OnClickListener { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { return inflater.inflate(R.layout.menu2, container, false); } @Override public void onViewCreated(View view, Bundle savedInstanceState) { TextView tv = (TextView) view.findViewById(R.id.back); tv.setOnClickListener(this); } @Override public void onClick(View v) { if (v.getId() == R.id.back) { FragmentTransaction ft = getActivity().getSupportFragmentManager().beginTransaction(); ft.setCustomAnimations(R.anim.menu_slideinright, R.anim.slideoutright); ft.replace(R.id.fragment_menu_container, new Menu1Fragment()); ft.commit(); } } } |
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.
|
1 2 3 4 5 |
<set xmlns:android="http://schemas.android.com/apk/res/android"> <translate android:fromXDelta="0%" android:toXDelta="100%" android:fromYDelta="0%" android:toYDelta="0%" android:duration="250" /> </set> |
This is for slideinright.xml.
|
1 2 3 4 5 |
<set xmlns:android="http://schemas.android.com/apk/res/android"> <translate android:fromXDelta="-100%" android:toXDelta="0%" android:fromYDelta="0%" android:toYDelta="0%" android:duration="250"/> </set> |
This is for slideinleft.xml.
|
1 2 3 4 5 |
<set xmlns:android="http://schemas.android.com/apk/res/android"> <translate android:fromXDelta="100%" android:toXDelta="0%" android:fromYDelta="0%" android:toYDelta="0%" android:duration="250"/> </set> |
This is for slideoutleft.xml.
|
1 2 3 4 5 |
<set xmlns:android="http://schemas.android.com/apk/res/android"> <translate android:fromXDelta="0%" android:toXDelta="-100%" android:fromYDelta="0%" android:toYDelta="0%" android:duration="250"/> </set> |
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.
