Saturday, April 9, 2016

NavigationDrawer Part- II - With Header & Hamburger Icon

"Jai Saraswati Maa"

Hi ... Dear All ..Today I am uploading a superb example of NavigationDrawer in which Navigation  View will come from left side cursor drag on click of Hamburger Icon.
Please check.
I am using Android Studio 1.5.1
Minimun SDK API 21 (Suggested)
Target SDK API 23
Please Like us & put your valuable suggestions in comment box.
Special Thanks Monu jangir (Student Partner
)****** Please add dependencies in build.gradle file as 
I have added...
compile 'com.android.support:design:23.1.1' 

Select App theme with NoActionBar

A. Output will be look like this 
a...  first output screen      


b.  second after click on Hamburger icon   

   
B. XML Files are 

a.  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"

    android:id="@+id/my_drawer"

    tools:context="com.exam.ravi.navigationdrawerex1.MainActivity">
  <LinearLayout      android:layout_width="match_parent"

      android:layout_height="match_parent"

      android:orientation="vertical">
      <include          android:layout_height="wrap_content"

          android:layout_width="match_parent"

          layout="@layout/my_toolbar" />

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

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:id="@+id/my_navigation"

        android:layout_gravity="start"

        app:menu="@menu/drawer_menu"

        app:headerLayout = "@layout/my_header">
    </android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>

b. my_toolbar.xml

<?xml version="1.0" encoding="utf-8"?>

<android.support.v7.widget.Toolbar

    xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:app="http://schemas.android.com/apk/res-auto"

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

    android:id="@+id/toolbar"

    android:background="?attr/colorPrimaryDark"

    android:minHeight="?attr/actionBarSize"

    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

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

c. my_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="180dp"

    android:background="@color/colorAccent">
<ImageView    android:layout_width="100dp"

    android:layout_height="120dp"

    android:id="@+id/myimg"

    android:src="@drawable/my_img"

    android:layout_marginTop="15dp"

    android:layout_marginLeft="15sp"/>
    <TextView        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:text="Ravi Godara"

        android:textStyle="bold"        android:id="@+id/my_name"

        android:layout_marginTop="20dp"        android:textSize="20dp"

        android:layout_marginLeft="5dp"

        android:layout_toRightOf="@+id/myimg"/>
    <TextView        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:text="androidclue4u.blogspot.in"

        android:textStyle="italic"

        android:id="@+id/my_blog"        android:layout_marginTop="10dp"

        android:textSize="15dp"

        android:layout_marginLeft="5dp"

        android:layout_toRightOf="@+id/myimg"

        android:layout_below="@+id/my_name"/>
</RelativeLayout>

d.  Add two values in strings.xml 

<string name="drawer_open">drawer open</string>
<string name="drawer_close">drawer close</string>

C.   Add three any icon images in drawable folder and one is your photo.

D. Create menu folder in which make a draw_menu.xml as 

<?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/setting"        android:title="Setting"

        android:icon="@drawable/iaction_settings"        />
    <item        android:id="@+id/share"        android:title="Share"

        android:icon="@drawable/action_share"        />
    <item        android:id="@+id/shop"        android:title="Shop"

        android:icon="@drawable/action_shop"        />

</group>
</menu>

E. Java Files  MainActivity.java

package com.exam.ravi.navigationdrawerex1;

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


public class MainActivity extends AppCompatActivity {
    Toolbar toolbar;
    DrawerLayout drawLayout;
    ActionBarDrawerToggle toggle;
    @Override    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        drawLayout = (DrawerLayout) findViewById(R.id.my_drawer);
        toggle = new ActionBarDrawerToggle(this,drawLayout,toolbar,
              R.string.drawer_open,R.string.drawer_close);
        drawLayout.setDrawerListener(toggle);

    }

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

No comments:

Post a Comment