Make your own sliding menu on Android tutorial - Part 1

Issue #151

This post was from long time ago when I did Android

---

I can’t deny that Facebook is so amazing, they made trends and people want to follow. That is the case of the sliding menu.

Searching many threads on SO, like these create android Sliding Menu like Facebook,gmail, Android sliding menu similar to the one on facebook, Android - Sliding menu with sub menu … they will mostly introduce you to some good sliding menu libraries, like this SlidingMenu and some tutorials on how to use it. And of course, not forget to mention the Navigation Drawer that shipped with the Android SDK

If you are a do-it-yourself guy like me, then here is the tutorial for you. It is mostly based on the following Youtube videos and guides

1. Creating a Slide-In Menu in Android - Part 1: Showing the menu

2. Creating a Slide-In Menu in Adnroid - Part 2: Adding animation

3. The Making of Prixing #1: Fly-in App Menu

4. The Making of Prixing #2: Swiping the Fly-in App Menu

5. The Making of Prixing #3: Polishing the Sliding App Menu

WHAT WILL WE ACHIEVE

The final result of this tutorial will look like this.

User will then be able to get the menu by touching the Menu button, or just by dragging.

The menu contains a list of Android UI controls and when selected, the main content view will shows the according screen.

The source code is available on Github

THE IDEA

A sliding menu app typically has 2 views : the menu view (the green rectangle) and the content view (the red rectangle)

We have many ways to implement the sliding effect, all depend on your intention

1. Let the menu view hold still, while moving the content view. The content view usually sits on top of the menu view and cover the entire screen

2. Opposite of 1. Let the content view hold still, while moving the menu view. The menu usually sits on top of the content view and occupy some amount of space, so that user can touch and drag it

3. The same as 2. but when the menu is moving, the content is moving, too.

When the menu is shown, we should disable interacting with the content view.

The 1st solution is what we will do in this tutorial. It’s much the same with Facebook sliding menu

OVERVIEW OF THE PROJECT

For better understanding, you should take a look at the project to see how things are organized

/src/com.entropy.slidingmenu2

MainActivity.java : this should be your first screen. It contains the MainLayout and handle ListView click event to display the right content

/src/com.entropy.slidingmenu2.fragment

FragmentMain.java : the default content view

FragmentButton.java : show one button on the content view

The content view is really simple since it’s just for demo. I use Fragment so we can easily change the content view according to the ListView item selected

/src/com.entropy.slidingmenu2.layout

MainLayout.java : the most important part of this tutorial. For ease and reusability, it’s best to create a custom LinearLayout. This will be used to position the menu and content views appropriately and handle sliding effect

/res/layout

activity.main: represent the visual structure for MainLayout

fragment_main: represent the content view

THE PREPARATION

I list here the required knowledge just for reference

1. Fragment : used to show the content view

2. Support library : we use v4 in this tutorial to support Fragment for older devices

3. Custom layout : our MainLayout is a custom layout

4. Scroller : to facilitate the sliding animation

5. Gesture : to allow drag and drop

Without further ado, let’s get started

DESIGNING activity_main.xml

The activity_main.xml represents the content of our custom layout. Since its a custom layout, we must declare like this

<com.entropy.slidingmenu2.layout.MainLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

Inside it are the 2 LinearLayout. Both are declared with attributes but the final display will be decided by the code :)

android:layout_width="match_parent"
android:layout_height="match_parent"

The first is for the menu, which holds a ListView

The second is for the content, which holds the simulated action bar ^^ and the FrameLayout. The FrameLayout is where fragments will show up

WORKING WITH MainActivity.java

The MainActivity is the default activity, it contains our MainLayout and handle menu item selection

1. In the onCreate() method, we do the following

Inflate the MainLayout and its as the contentView for our activity

mainLayout = (MainLayout)this.getLayoutInflater().inflate(R.layout.activity_main, null);
setContentView(mainLayout);

Init the ListView for the menu

lvMenuItems = getResources().getStringArray(R.array.menu_items);
        lvMenu = (ListView) findViewById(R.id.activity_main_menu_listview);
        lvMenu.setAdapter(new ArrayAdapter(this,
                android.R.layout.simple_list_item_1, lvMenuItems));
        lvMenu.setOnItemClickListener(new OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                onMenuItemClick(parent, view, position, id);
            }

        });

Init the menu button

btMenu = (Button) findViewById(R.id.activity_main_content_button_menu);
        btMenu.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                // Show/hide the menu
                toggleMenu(v);
            }
        });

Display FragmentMain as the initial Fragment for our content view

FragmentManager fm = MainActivity.this.getSupportFragmentManager();
FragmentTransaction ft = fm.beginTransaction();

FragmentMain fragment = new FragmentMain();
ft.add(R.id.activity_main_content_fragment, fragment);
ft.commit();

2. The toggleMenu() is a utility method to toggle the menu, it will calls MainLayout ‘s toggleMenu() method. We ‘ll talk about this later

3. onMenuItemClick() is used to handle menu item selection. What it does is to create the according Fragment and replace it with the current one

4. Handle the Back button. If the menu is shown, we should hide it, or we can quit the app

@Override
    public void onBackPressed() {
        if (mainLayout.isMenuShown()) {
            mainLayout.toggleMenu();
        }
        else {
            super.onBackPressed();
        }
    }

Let’s continue to part 2