Android Slider Menu

1795
views
Android Slider Menu

You must have noticed that a lot of android applications introduced a sliding panel menu to navigate between major modules of the application which is also known as Android Slider Menu.

Previously this kind of UI or Android Slider Menu was done using some third party libraries where a list view and some swiping gestures used to achieve this. But now android itself officially introduced sliding panel menu by introducing a newer concept called Navigation Drawer in which we combine DrawerLayout and NavigationView to achieve the desired output.

Maximum of the time sliding menu (navigation drawer) will be hidden and may be proven by means of swiping the screen from left aspect to right or tapping the app icon on the movement bar.

Download APK

 

Android Studio Navigation Drawer Template

You can add Navigation Drawer in your app in two ways. The quick and easy way is choosing the Navigation Drawer Activity from Android Studio when the new project is created. This creates an empty project with navigation drawer added.Slider Menu

Starting new Project

1. Create a new project in Android Studio from File ⇒ New Project by filling the required details. When it prompts you to select the activity, choose Empty Activity and continue.

2. Open build.gradle located in app level and add dependencies. I am adding material design library dependency.

apply plugin: 'com.android.application'

android {
    compileSdkVersion 26
    buildToolsVersion "26.0.2"
    defaultConfig {
        applicationId "com.example.ashish.nav"
        minSdkVersion 15
        targetSdkVersion 26
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
        exclude group: 'com.android.support', module: 'support-annotations'
    })
    compile 'com.android.support:appcompat-v7:26.+'
    compile 'com.android.support.constraint:constraint-layout:1.0.2'
    testCompile 'junit:junit:4.12'
    //Add design Dependency
    compile 'com.android.support:design:26.+'
}

3. Open strings.xmlstyles.xml, located under res ⇒ values and add the below values.

strings.xml

<resources>
    <string name="app_name">Nav</string>
    <string name="open">Open</string>
    <string name="close">Close</string>
</resources>
styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

</resources>

4. Under res ⇒ menu directory, create two menu xml files named nav_menu.xml . These menus are used to render different toolbar overflow menus when the user switches between navigation drawer items.

nav_menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:id="@+id/nav_account"
        android:icon="@mipmap/ic_person_black_24dp"
        android:title="My Account" />

    <item android:id="@+id/nav_setting"
        android:icon="@mipmap/ic_settings_black_24dp"
        android:title="Setting" />

    <item android:id="@+id/nav_logout"
        android:title="Logout" />

</menu>

5. Download person, setting, icons from Material Icons and add them to your project’s res folder. These icons will be used as navigation menu item icons.

Creating Activities

 

Files in Project of Android Slider Menu6. Create 2 activity naming nav_action.xml and nav_header.xmlRight click on layout package, New ⇒ Layout Resource File.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.ashish.nav.MainActivity"
    android:id="@+id/drawerLayout">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <include
            layout="@layout/nav_action"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:textAlignment="center"
            android:textStyle="normal"
            android:layout_gravity="center_vertical"
            android:text="TextView" />
    </LinearLayout>

    <android.support.design.widget.NavigationView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:menu="@menu/nav_menu"
        app:headerLayout="@layout/nav_header">

    </android.support.design.widget.NavigationView>

</android.support.v4.widget.DrawerLayout>
nav_action.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/nav_action"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimary"
    android:orientation="vertical"
    android:theme="@style/ThemeOverlay.AppCompat.Dark">

</android.support.v7.widget.Toolbar>
nav_header.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="120dp"
    android:background="@color/colorPrimary">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:padding="10dp"
        android:textStyle="bold"
        android:textSize="15dp"
        android:text="Header Nav"
        android:textColor="#ffffff" />
</RelativeLayout>

7. Now we have all the required elements in place. It’s time to open the main activity and do the necessary changes to make the navigation drawer functional. Open MainActivity.java and modify as explained below.

MainActivity.java

package com.example.coderforevers.nav;

import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBar;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.MenuItem;

public class MainActivity extends AppCompatActivity {

    private DrawerLayout mDrawerLayout;
    private ActionBarDrawerToggle mToggle;

    private Toolbar mToolbar;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mToolbar = (Toolbar) findViewById(R.id.nav_action);
        setSupportActionBar(mToolbar);

        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawerLayout);
        mToggle = new ActionBarDrawerToggle(this, mDrawerLayout, R.string.open, R.string.close);

        mDrawerLayout.addDrawerListener(mToggle);
        mToggle.syncState();

        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        if (mToggle.onOptionsItemSelected(item)){
            return true;

        }

        return super.onOptionsItemSelected(item);
    }
}

Run and test the app once. You should able to see the app as shown below. Also, check the Video demo of fully implemented navigation drawer.

Related Program