Android Sliding Pane Side Menu Tutorial

Android provide the sliding pane which is side menu to let the user to navigate different activity. Android Sliding pane is the older version of Navigation Drawer before material design is coming out and it is slightly different which it does not overlay the activity. Besides, it is a good replacement navigation drawer if you dont want to overlay the activity. It also can combine with the fragment same usage as navigation drawer. In this tutorial, I will tell you how to use android sliding pane side menu in your new android project. Just need to follow what i do.

Sample Screensliding pane side menu


Creating a New Project

1. Open Android Studio IDE in your computer.
2. Create a new project and Edit the Application name to “SlidingPaneExample”.
(Optional) You can edit the company domain or select the suitable location for current project tutorial. Then click next button to proceed.
3. Select Minimum SDK (API 15:Android 4.0.3 (IceCreamSandwich). I choose the API 15 because many android devices currently are support more than API 15. Click Next button.
4. Choose “Empty Activity” and Click Next button
5. Lastly, press finish button.

Create 2 Fragments

Right click your project name and create blank fragments for content and sliding pane. For the name you can give the first fragment “SlidingPaneFragment” while another fragment “ContentFragment”. It will automatic create the xml file for both fragments.

Edit ContentFragment xml layout

At first, we go to edit the content fragment xml layout, you can follow the source code in the below.

Edit SlidingPaneFragment xml layout

After that go to edit another fragment layout for the sliding pane how you want it to look like.

Create a xml layout for sliding pane listview item

Edit activity_main.xml layout

In your activity_main layout add the sliding pane layout and both fragments on it.

Create a Modal class

Add a new modal class name “Bookmark”.

Create an Interface

After that, create the interface “BookmarkListener” in your project.

Add a new Adapter

By creating the new adapter, right click the project and create a new class name “LinkAdapter”. Then follow the source code below.

Edit ContentFragment class

Go to this class and edit it to load the web url in the webview when you click the listview from sliding pane.

Edit SlidingPaneFragment Class

After that, go to edit your sliding pane fragment class to display the bookmark list and click event in this fragment.

Edit class

Go to your class and implements the panelslide listener so you can slide the menu from the edge of the screen.

Dont Forget

Add permission internet because i am using webview to demostrate.

Run your Project

Finally, you can run your project in your emulator to use the sliding panel and see whats different with navigation drawer.

(Android Sliding Pane Side Menu)

Source Code

(Visited 1,898 times, 1 visits today)

Yong Loon Ng

Ng Yong Loon, better known as Kristofer is a software engineer and computer scientist who doubles up as an entrepreneur.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *