Skip to main content

Android Sliding Menu using Navigation Drawer(Only Activity)

In this tutorial we’ll implement a Navigation Drawer using only Activity in our android application. Android navigation drawer is a sliding menu and it’s an important UI component.

 Android Navigation Drawer

 Android Navigation Drawer is a sliding left menu that is used to display the important links in the application. Navigation drawer makes it easy to navigate between those links. It’s not visible by default and it needs to opened either by sliding from left or clicking its icon in the ActionBar.

In broader terms, Navigation Drawer is an overlay panel, which is a replacement of an activity screen which was specifically dedicated to show all the options and links in the application.


Example

 This sample will explain how to do a Navigation Drawer using only Activities

To implement the Navigation Drawer we first need to add android.support.v4.widget.DrawerLayout as the root of the activity layout as shown below.

navigation_drawer.xml
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <android.support.design.widget.AppBarLayout
            android:id="@+id/idToolBar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/AppTheme.AppBarOverlay">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="@color/colorPrimary"
                app:popupTheme="@style/AppTheme.PopupOverlay" />

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

        <FrameLayout
            android:id="@+id/content_frame"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

    </LinearLayout>
    <!--Second child layout-->
    <android.support.design.widget.NavigationView
        android:id="@+id/navigation_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="@color/colorPrimary"
        app:itemBackground="@drawable/drawer_item_bg"
        app:headerLayout="@layout/nav_drawer_header"
        app:itemTextColor="@color/white"
        app:menu="@menu/menu_item">

    </android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
FrameLayout

FrameLayout is the place where an activity has been placed

Create menu directory in res - 

menu.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:checkableBehavior="single">
        <item
            android:id="@+id/id_home"
            android:title="Home" />
        <item
            android:id="@+id/id_profile"
            android:title="Profile" />
        <item
            android:id="@+id/id_review"
            android:title="Review"/>
        <item
            android:id="@+id/id_testimonal"
            android:title="Testimonals"/>
        <item
            android:id="@+id/id_subscription"
            android:title="Subscription"/>
        <item
            android:id="@+id/id_logout"
            android:title="Logout"/>
  </group>
</menu>
nav_drawer_header.xml
<?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="150dp"
    android:orientation="vertical"
    android:background="@color/white">

    <RelativeLayout
        android:id="@+id/headerRelativeLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal"
            android:weightSum="3.5">

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1">

                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:src="@drawable/app_icon"/>

            </LinearLayout>

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="2.5"
                android:orientation="vertical"
                android:gravity="center">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:textStyle="bold"
                    android:textColor="@color/colorPrimary"
                    android:textAppearance="@style/Base.TextAppearance.AppCompat.Medium"
                    android:text="MrBrown"/>

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:textAppearance="@style/Base.TextAppearance.AppCompat.Small"
                    android:textColor="@color/colorPrimary"
                    android:text="@string/blog"/>

            </LinearLayout>
        </LinearLayout>
    </RelativeLayout>
</LinearLayout>
In drawable,
nav_drawer_header.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle" >
            <solid android:color="@color/colorPrimary" />
        </shape>
    </item>
    <item android:top="-2dp" android:right="-2dp" android:left="-2dp">
        <shape>
            <solid android:color="@color/colorPrimary" />
            <stroke
                android:width="1dp"
                android:color="@color/white" />
        </shape>
    </item>
</layer-list>
Add the themes in your styles.xml
<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
        <item name="drawerArrowStyle">@style/DrawerArrowStyle</item>
        <item name="titleTextColor">@android:color/white</item>
    </style>

    <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Light" />

    <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />

    <style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
        <item name="spinBars">true</item>
        <item name="color">@android:color/white</item>
    </style>
</resources>
NavigationActivity.java
public class NavigationActivity extends AppCompatActivity {

    public DrawerLayout drawerLayout;
    ActionBarDrawerToggle actionBarDrawerToggle;
    Toolbar toolbar;
    NavigationView navigationView;

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

        navigationView = (NavigationView) findViewById(R.id.navigation_view);
        toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        actionBarDrawerToggle = new ActionBarDrawerToggle(this, drawerLayout, toolbar, R.string.drawer_open, R.string.drawer_closed);
        drawerLayout.setDrawerListener(actionBarDrawerToggle);

        navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(MenuItem item) {
                Intent anIntent;
                switch (item.getItemId()) {
                    case R.id.id_home:
                        anIntent = new Intent(getApplicationContext(), HomeActivity.class);
                        overridePendingTransition(R.anim.fade_in, R.anim.fade_out);
                        finish();
                        startActivity(anIntent);
                        drawerLayout.closeDrawers();
                        break;
//do the same for remaining activity
                                                     }
                return false;
            }
        });
    }

    @Override
    protected void onPostCreate(Bundle savedInstanceState) {
        super.onPostCreate(savedInstanceState);

        actionBarDrawerToggle.syncState();
    }
}
HomeActivity.java
public class HomeActivity extends NavigationActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        getSupportActionBar().setTitle(Constant.setactionbar_title("HOME"));
        LayoutInflater mInflater = (LayoutInflater) this.getSystemService(Activity.LAYOUT_INFLATER_SERVICE);
        View convertView = mInflater.inflate(R.layout.activity_home, null);
        drawerLayout.addView(convertView, 0);
    }
}
where, drawerLayout.addView(convertView, 0); is to add the activity view to drawer layout

Create your own activity_home.xml 

Now the simple Navigation Drawer has created for your application.

_______________________________________________________________________________________
Source code for NavigationDrawer.zip

Happy Coding...

Comments

Post a Comment

Popular posts from this blog

Zoom Image - Android Tutorial

Here we are going to see how to zoom an image in Imageview Will see it through a sample 1. Create xml with an ImageView <? xml version="1.0" encoding="utf-8" ?> < androidx.constraintlayout.widget.ConstraintLayout       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=".MainActivity" >     < LinearLayout         android:layout_width="200dp"         android:layout_height="200dp"         app:layout_constraintBottom_toBottomOf="parent"         app:layout_constraintLeft_toLeftOf="parent"         app:layout_constraintRight_toRightOf="parent"    ...
Post a Comment
Read more

Add custom font in Android using Calligraphy library

Are you fed up of Custom Views to set fonts? Or traversing the ViewTree to find TextViews? Sometime we want some other font for our Android application then you can add custom font in Android using Calligraphy library . Dependency Include the dependency Download (.aar) dependencies { compile ‘uk.co.chrisjenx:calligraphy:2.2.0’ } Add Fonts Add your custom fonts to assets/ . All font definitions are relative to this path. On Assets you should right-click New Directory, call it "fonts". In the finder put the .ttf  or .otf  font files in there. Create Class Create a class that extends Application and write this code public class App extends Application { @Override public void onCreate() { super.onCreate(); CalligraphyConfig.initDefault(new CalligraphyConfig.Builder() .setDefaultFontPath("your font path") .setFontAttrId(...
Post a Comment
Read more

Bluetooth Chat Application - Android Tutorial

In this tutorial, we will see about how to design an Android layout for chat application using Chat Bubbles  and the main part is chat via Bluetooth . Main objective of this post is to give an idea about how to allow two-way text chat over Bluetooth in android. Bubbles: Chat bubbles are background image that expands horizontally and vertically as required based on the message posted. Bubbles are Nine-patch Images. Image Nine-patch Image In creating Android chat bubbles, nine-patch image plays a crucial role.  Nine-patch image  is a bitmap which stretches to fit the content posted in the View where it is applied as a background. A NinePatch drawable is a standard PNG image that includes an extra 1-pixel-wide border. It must be saved with the extension  .9.png , and saved into the  res/drawable/  directory of your project. The border is used to define the stretchable and static areas of the image. You indicate a stretchable section ...
8 comments
Read more