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

Leave a Reply