Android : Sliding Menu – Part 1

This android tutorial teaches you how to add a sliding menu inside your application. It is a two part tutorial. The first part is about installing the SlidingMenu library and creating an empty sliding menu. The second part will explain how to fill the sliding menu with sections and menu items. You can watch the video below to see the result.


Test before
If you wish to test before, you can install the application with the following link. The whole source code of the project is also available on github.

logo-app
Your app idea
Michenux
Free   
pulsante-google-play-store
pulsante-appbrain
qrcode-app

TUTORIAL PART 1/2

Install the SlidingMenu library

SlidingMenu is an excellent library to create sliding menus so there is no need to create it from scratch. The problem is it may be quite painful to install because there is no release available and we have to compile it.

First, check the following prerequisites :

Checkout the source code and install it :

git clone https://github.com/jfeinstein10/SlidingMenu
cd SlidingMenu
mvn clean install

If it doesnot work, here is a list of possible fixes :

Add the SlidingMenu library to your project

For maven project :

<dependency>
    <groupId>com.slidingmenu</groupId>
    <artifactId>slidingmenu</artifactId>
    <version>1.3-SNAPSHOT</version>
    <type>jar</type>
</dependency>

For non-maven project :
Copy library/target/slidingmenu-1.3-SNAPSHOT.jar into the libs directory of your project.

Update your Activity

First, add this attribute to your activity class :

private SlidingMenu slidingMenu ;

Inside the onCreate method, initialize the SlidingMenu like this :

slidingMenu = new SlidingMenu(this);
        slidingMenu.setMode(SlidingMenu.LEFT);
        slidingMenu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);
        slidingMenu.setShadowWidthRes(R.dimen.slidingmenu_shadow_width);
        slidingMenu.setShadowDrawable(R.drawable.slidingmenu_shadow);
        slidingMenu.setBehindOffsetRes(R.dimen.slidingmenu_offset);
        slidingMenu.setFadeDegree(0.35f);
        slidingMenu.attachToActivity(this, SlidingMenu.SLIDING_CONTENT);
        slidingMenu.setMenu(R.layout.slidingmenu);
       
        getActionBar().setDisplayHomeAsUpEnabled(true);

Override the onBackPressed method : if the SlidingMenu is showing, it will close else the activity will close :

@Override
    public void onBackPressed() {
        if ( slidingMenu.isMenuShowing()) {
            slidingMenu.toggle();
        }
        else {
            super.onBackPressed();
        }
    }

Override the onKeyDown method : to show/hide the slidingmenu when the menu key is touched.

@Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if ( keyCode == KeyEvent.KEYCODE_MENU ) {
            this.slidingMenu.toggle();
            return true;
        }
        return super.onKeyDown(keyCode, event);
    }

Override the onOptionsItemSelected method : to show/hide the SlidingMenu when the home icon of the action bar is touched.

@Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
        case android.R.id.home:
            this.slidingMenu.toggle();
            return true;
        default:
            return super.onOptionsItemSelected(item);
        }
    }

Resource files

Create the layout of the sliding menu (file res/layout/slidingmenu.xml). For the moment, it is empty. It will be the purpose of the part 2 of the tutorial.

<?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="match_parent"
   android:orientation="vertical"
   android:background="@color/purple_dark" >

</LinearLayout>

Complete or create the dimension file (file res/values/dimens.xml)

<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">
       
    <!-- sliding menu -->
    <dimen name="slidingmenu_shadow_width">15dp</dimen>
    <dimen name="slidingmenu_offset">60dp</dimen>

</resources>

Create the drawable for the shadow of the sliding menu (file res/drawable/slidingmenu_shadow.xml)

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <gradient
       android:endColor="@color/purple_light"
       android:centerColor="@color/purple_middle"
       android:startColor="@color/purple_dark" />
</shape>

Finally, complete/create the colors file. Here’s mine :

<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">      
    <color name="purple_light">#a276eb</color>
    <color name="purple_middle">#8658ce</color>
    <color name="purple_dark">#6a3ab2</color>
</resources>

Start your project, you should be able to play with an empty sliding menu.

Continue with part 2

Share Button

Comments

14 Responses to “Android : Sliding Menu – Part 1”

  1. Marcel on June 7th, 2013 4:01 pm

    Well look at that. Finally a simple step by step tutorial that can work as a base for further development.

    Thank you!

  2. Pieter on August 9th, 2013 12:36 pm

    Thanks, great tutorial. And it works!

  3. Ramon on August 13th, 2013 7:40 pm

    I followed all those steps and the log shows me this mesage:

    Error inflating class fragment.
    Caused By

    java.lang.ClassCastException: com.example.testeslidingmenuagvdnc.SlidingMenuFragment cannot be cast to android.app.Fragment

    Can you help me?

  4. Michenux on August 13th, 2013 9:22 pm

    Ramon: check your imports. I think you used android.app.Fragment instead of android.support.v4.app.Fragment.

  5. Ramon on August 14th, 2013 2:16 am

    hey Michenux, i checked my imports and i am using the android.support.v4.app.Fragment… the error is the same… Do you know what can be?

  6. Michenux on August 14th, 2013 1:28 pm

    Ramon : can u post the full stacktrace ?

  7. Sisko on August 14th, 2013 11:40 pm

    My app has a minimum SDK value of 8 but it seems SlidingMenu requires 11 – Is there a work around for this so it will work on minimum SDK version 8?

    And when I increase to SDK#11 the app crashes with the following message:

    FATAL EXCEPTION:

    java.lang.NoClassDefFoundError: android.support.v4.view.ViewConfigurationCompat

    E/AndroidRuntime(884): at com.jeremyfeinstein.slidingmenu.lib.CustomViewAbove.initCustomViewAbove(CustomViewAbove.java:167)

    Can you help me resolve this?

  8. Michenux on August 15th, 2013 11:20 am

    The solution is to not use SlidingMenu library but Navigation Drawer and ActionBar Compat (support v18)
    I have written a tutorial about Navigation Drawer (looks like the same than SlidingMenu but with Navigation Drawer).
    http://www.michenux.net/android-navigation-drawer-748.html
    This tutorial is still SDK 14 min but on my github repository ( https://github.com/Michenux/YourAppIdea ), you will find an
    updated version that works with ActionBar Compat, so SDK 8 min.
    You can also try the app on the playstore : https://play.google.com/store/apps/details?id=org.michenux.yourappidea. It is SDK 10 min
    but for other reasons.
    One last thing, i hope you use Android Studio because it handles external libraries better then eclipse.

  9. Jason on August 17th, 2013 6:09 pm

    I get the same error as ‘Ramon’ java.lang.ClassCastException: com.myapp.test.SlidingMenuFragment cannot be cast to android.app.Fragment

    I tried to look at the source that you have on github but it doesn’t use the slidingmenu lib

  10. Michenux on August 17th, 2013 9:08 pm

    Jason: yes, the master branch doesnot use anymore the slidingmenu library (replaced by navigation drawer). You can look at this repo/branch to
    see the old code with the slidingmenu library : https://github.com/Michenux/YourApplication/tree/withSlidingMenuLib.
    About the error, i would like to see the full stacktrace to understand. You can try to change your imports (android.support.v4.app.Fragment into android.app.Fragment or the inverse).

  11. pratik on October 9th, 2013 8:23 am

    Excellent work man…thanks..have a good day..!

  12. Saurabh on November 6th, 2013 3:06 pm

    thanxxx .. it worked ..

  13. manel on November 14th, 2013 9:22 am

    First of all, thank you very much for the tutorial, it was very useful for me.

    However, I have a question about:

    When I click outside of the sliding menu, this one closes.

    I would like to take this event and just keep closing gesture from right to left.

    I tried so many things but it does not work.

    if you have an idea, I would be very grateful.

    thank you

  14. Michenux on November 16th, 2013 2:20 pm

    Sorry but i don’t know how to do that. I’m just asking myself if is a good pattern to block closing on outside click.
    I have looked at this other applications and all close the menu on outside click. So it may be strange for your users if you do that on your app.

Leave a Reply