Android Sliding Menu using ActionbarSherlock

 

A Sliding Menu in Android is an Open Source Android library. Sliding Menu is used in lot of different types of Android application.

Following are the steps to create sliding menu in Android:

Step 1 Import needed Library

First you need following two library projects to create Sliding Menu:

1. ActionbarSherlock
2. SlidingMenuLib

Step 2 Create Project SlidingDemo for Android Sliding Menu

Now add ActionbarSherlock library project into SlidingMenuLib. And create new Android project named SlidingDemo and link SlidingMenuLib project with this project.

Step 3 Create Fragment For Sliding Menu

Now create SampleListFragment in SlidingDemo project which extends ListFragment. Add following into your class menus is for your menulist items.

 

public String[] menus = { "Fragment1", "Fragment2", "Fragment3",
"Fragment4" };

3.1 Create list.xml in layout folder

In onCreateView() Method set Layout, which contains ListView. Create list.xml in layout folder.

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

3.2 Make and Set List Adapter

In onActivityCreated() Method set List Adapter. And create SampleItem and SampleAdapter outside the onActivityCreated().

SampleAdapter adapter = new SampleAdapter(getActivity());
for (int i = 0; i < menus.length; i++) {
adapter.add(new SampleItem(menus[i], android.R.drawable.btn_star));
}
setListAdapter(adapter);

private class SampleItem {
public String tag;
public int iconRes;
 
public SampleItem(String tag, int iconRes) {
this.tag = tag;
this.iconRes = iconRes;
}
}
 
public class SampleAdapter extends ArrayAdapter<SampleItem> {
 
public SampleAdapter(Context context) {
super(context, 0);
}
 
public View getView(final int position, View view,
ViewGroup parent) {
if (view == null) {
view = LayoutInflater.from(getContext()).inflate(R.layout.row,null);
}
ImageView icon = (ImageView) view.findViewById(R.id.row_icon);
icon.setImageResource(getItem(position).iconRes);
final TextView title = (TextView) view.findViewById(R.id.row_title);
title.setText(getItem(position).tag);
 
return view;
}
}

3.3 Create row.xml file

Create menu row layout for SampleAdapter row.xml in layout folder.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="50dp"
android:orientation="horizontal" >
 
<ImageView
android:id="@+id/row_icon"
android:layout_width="50dp"
android:layout_height="50dp"
android:padding="10dp"
android:src="@drawable/ic_launcher" />
 
<TextView
android:id="@+id/row_title"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center_vertical"
android:padding="10dp"
android:text="Medium Text"
android:textAppearance="@android:style/TextAppearance.Medium" />
 
</LinearLayout>

3.4 Create Fragments

Create some Fragments. Fragment1 extends Fragment.

private LinearLayout llMain;
private TextView tvFragmentName;
 
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.activity_main, null);
 
llMain = (LinearLayout) view.findViewById(R.id.llMain);
 
tvFragmentName = (TextView) view.findViewById(R.id.tvFragmentName);
 
llMain.setBackgroundColor(Color.GRAY);
tvFragmentName.setText("Fragment - 1");
 
return view;
}

Add Layout in layout folder activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/llMain"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical"
tools:context=".MainActivity" >
 
<TextView
android:id="@+id/tvFragmentName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="@android:color/white" />
 
</LinearLayout>

Now override onListItemClick() and add following code.

Fragment newContent = null;
 
switch (position) {
case 0:
newContent = new Fragment1();
break;
case 1:
newContent = new Fragment2();
break;
case 2:
newContent = new Fragment3();
break;
case 3:
newContent = new Fragment4();
break;
 
}
if (newContent != null)
switchFragment(newContent);
Add following method into your class.
 
private void switchFragment(Fragment fragment) {
if (getActivity() == null)
return;
 
if (getActivity() instanceof MainActivity) {
MainActivity fca = (MainActivity) getActivity();
fca.switchContent(fragment);
}
}

Step 4 Create BaseActivity

Create BaseActivity in SlidingDemo project which extends SlidingFragmentActivity.

Add following into your class:

private int mTitleRes;
protected ListFragment mFrag;

Add following into onCreate() Method:

setTitle(mTitleRes);
 
// set the Behind View
setBehindContentView(R.layout.menu_frame);
if (savedInstanceState == null) {
FragmentTransaction t = this.getSupportFragmentManager()
.beginTransaction();
mFrag = new SampleListFragment();
t.replace(R.id.menu_frame, mFrag);
t.commit();
} else {
mFrag = (ListFragment) this.getSupportFragmentManager()
.findFragmentById(R.id.menu_frame);
}
 
// customize the SlidingMenu
SlidingMenu sm = getSlidingMenu();
sm.setShadowWidthRes(R.dimen.shadow_width);
sm.setShadowDrawable(R.drawable.shadow);
sm.setBehindOffsetRes(R.dimen.slidingmenu_offset);
sm.setFadeDegree(0.35f);
sm.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);
 
getSupportActionBar().setDisplayHomeAsUpEnabled(true);

New Fragments are set in setBehindContentView(). It’s a frame layout. Which stores our menu items. In customize the SlidingMenu tag, we set different property of SlidingMenu. Now add constructor for dynamically change the title of fragment.

public BaseActivity(int titleRes) {
mTitleRes = titleRes;
}

Step 5 Create MainActivity

Finally now Create MainActivty which extends BaseActivity. In onCreate() method add following code.

private Fragment mContent;
 
if (savedInstanceState != null)
mContent = getSupportFragmentManager().getFragment(
savedInstanceState, "mContent");
 
if (mContent == null)
mContent = new Fragment1();
 
// set the Above View
// used for new fragment load
setContentView(R.layout.content_frame);
getSupportFragmentManager().beginTransaction()
.replace(R.id.content_frame, mContent).commit();
 
// set the Behind View
setBehindContentView(R.layout.menu_frame);
getSupportFragmentManager().beginTransaction()
.replace(R.id.menu_frame, new SampleListFragment()).commit();
 
For replace fragment add following method
 
public void switchContent(Fragment fragment) {
mContent = fragment;
getSupportFragmentManager().beginTransaction()
.replace(R.id.content_frame, fragment).commit();
getSlidingMenu().showContent();
}

Step 6 Create Frame Layouts

Add following layouts into layout folder.

6.1 content_frame.xml Layout

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

6.2 menu_frame.xml Layout

<?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" />

I hope you have learnt a lot from this sliding menu Android example. If you have got any query related to Sliding Menu in Android comment them below. We will try to solve them out.

Got an Idea of Android App Development? What are you still waiting for? Contact us now and see the Idea live soon. Our company has been named as one of the best Android App Development Company in India.