Tuesday, 5 January 2016

sidebar-Creating a Navigation Drawer

01:44

Creating a Navigation Drawer:

The navigation drawer is a panel that displays the app’s main navigation options on the left edge of the screen. It is hidden most of the time, but is revealed when the user swipes a finger from the left edge of the screen or, while at the top level of the app, the user touches the app icon in the action bar.

step 1: open android studio & then click on file menu ..


step 2:then go  on New  & then click on New Project.


step 3 :enter your application name 

step 4:then select minimum SDK  target for phone and Tablet & click on Next.
step 5: then select  Navigation Drawer Activity & click on next.

step 6: then enter your Activity name ,Layout file name etc.

then  you will see following Project directory structure:

now start  to see about code :
(1)write code for  MainActivity.java:

package sidebar.test.om.com.myapplication;

import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.view.View;
import android.support.design.widget.NavigationView;
import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.content.Intent;

public class MainActivity extends AppCompatActivity
       
implements NavigationView.OnNavigationItemSelectedListener {

   
@Override
   
protected void onCreate(Bundle savedInstanceState) {
       
super.onCreate(savedInstanceState);
        setContentView(R.layout.
activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.
toolbar);
        setSupportActionBar(toolbar);

        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.
fab);
        fab.setOnClickListener(
new View.OnClickListener() {
           
@Override
           
public void onClick(View view) {
                Snackbar.make(view,
"Replace with your own action", Snackbar.LENGTH_LONG)
                        .setAction(
"Action", null).show();
            }
        });

        DrawerLayout drawer = (DrawerLayout) findViewById(R.id.
drawer_layout);
        ActionBarDrawerToggle toggle =
new ActionBarDrawerToggle(
               
this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
        drawer.setDrawerListener(toggle);
        toggle.syncState();

        NavigationView navigationView = (NavigationView) findViewById(R.id.
nav_view);
        navigationView.setNavigationItemSelectedListener(
this);
    }

   
@Override
   
public void onBackPressed() {
        DrawerLayout drawer = (DrawerLayout) findViewById(R.id.
drawer_layout);
       
if (drawer.isDrawerOpen(GravityCompat.START)) {
            drawer.closeDrawer(GravityCompat.
START);
        }
else {
           
super.onBackPressed();
        }
    }

   
@Override
   
public boolean onCreateOptionsMenu(Menu menu) {
       
// Inflate the menu; this adds items to the action bar if it is present.
       
getMenuInflater().inflate(R.menu.main, menu);
       
return true;
    }

   
@Override
   
public boolean onOptionsItemSelected(MenuItem item) {
       
// Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
       
int id = item.getItemId();

       
//noinspection SimplifiableIfStatement
       
if (id == R.id.action_settings) {
           
return true;
        }

       
return super.onOptionsItemSelected(item);
    }

   
@SuppressWarnings("StatementWithEmptyBody")
   
@Override
   
public boolean onNavigationItemSelected(MenuItem item) {
       
// Handle navigation view item clicks here.
       
int id = item.getItemId();

       
if (id == R.id.nav_camara) {
           
// Handle the camera action
       
} else if (id == R.id.nav_gallery) {

        }
else if (id == R.id.nav_slideshow) {

            Intent i =
new Intent(MainActivity.this,test.class);
            startActivity(i);

        }
else if (id == R.id.nav_manage)
        {

        }
else if (id == R.id.nav_share) {

        }
else if (id == R.id.nav_send) {

        }
       
else if(id==R.id.nav_manage1)
        {
            Intent i =
new Intent(getApplicationContext(),test.class);
            startActivity(i);
        }

        DrawerLayout drawer = (DrawerLayout) findViewById(R.id.
drawer_layout);
        drawer.closeDrawer(GravityCompat.
START);
       
return true;
    }
}

(2)write code for  activity_main.xml    file :
<?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:id="@+id/drawer_layout"

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

    android:fitsSystemWindows="true" tools:openDrawer="start">



    <include layout="@layout/app_bar_main" android:layout_width="match_parent"

        android:layout_height="match_parent" />



    <android.support.design.widget.NavigationView android:id="@+id/nav_view"

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

        android:layout_gravity="start" android:fitsSystemWindows="true"

        app:headerLayout="@layout/nav_header_main" app:menu="@menu/activity_main_drawer" />



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

(3)write code for  app_bar_main.xml:
 
<?xml version="1.0" encoding="utf-8"?>

<android.support.design.widget.CoordinatorLayout

    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:fitsSystemWindows="true"

    tools:context=".MainActivity">



    <android.support.design.widget.AppBarLayout android:layout_height="wrap_content"

        android:layout_width="match_parent" 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="?attr/colorPrimary" app:popupTheme="@style/AppTheme.PopupOverlay" />



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



    <include layout="@layout/content_main" />



    <android.support.design.widget.FloatingActionButton android:id="@+id/fab"

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

        android:layout_gravity="bottom|end" android:layout_margin="@dimen/fab_margin"

        android:src="@android:drawable/ic_dialog_email" />



</android.support.design.widget.CoordinatorLayout>
 
(4)write code for  content_main.xml  file:
<?xml version="1.0" encoding="utf-8"?>

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

    xmlns:tools="http://schemas.android.com/tools"

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

    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"

    android:paddingRight="@dimen/activity_horizontal_margin"

    android:paddingTop="@dimen/activity_vertical_margin"

    android:paddingBottom="@dimen/activity_vertical_margin"

    app:layout_behavior="@string/appbar_scrolling_view_behavior" tools:showIn="@layout/app_bar_main"

    tools:context=".MainActivity">



    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:textAppearance="?android:attr/textAppearanceLarge"

        android:text="Large Text"

        android:id="@+id/textView2"

        android:layout_alignParentTop="true"

        android:layout_centerHorizontal="true"

        android:layout_marginTop="162dp" />

</RelativeLayout>


(5)write code for  nav_header_main.xml   file(which will display in header of side bar) :
<?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="@dimen/nav_header_height"

    android:background="@drawable/side_nav_bar"

    android:paddingBottom="@dimen/activity_vertical_margin"

    android:paddingLeft="@dimen/activity_horizontal_margin"

    android:paddingRight="@dimen/activity_horizontal_margin"

    android:paddingTop="@dimen/activity_vertical_margin"

    android:theme="@style/ThemeOverlay.AppCompat.Dark" android:orientation="vertical"

    android:gravity="bottom">



    <ImageView android:layout_width="109dp" android:layout_height="61dp"

        android:paddingTop="@dimen/nav_header_vertical_spacing"

        android:src="@drawable/icon" android:id="@+id/imageView" />



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

        android:paddingTop="@dimen/nav_header_vertical_spacing" android:text="VISSICOMP"

        android:textAppearance="@style/TextAppearance.AppCompat.Body1" />



    <TextView android:layout_width="wrap_content" android:layout_height="wrap_content"

        android:text="vissicomp@yahoo.co.in" android:id="@+id/textView" />



</LinearLayout>

(6) activity_main_drawer.xml file (note  this file Is  under  menu directory):
<?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/nav_camara" android:icon="@android:drawable/ic_menu_camera"

            android:title="Import" />

        <item android:id="@+id/nav_gallery" android:icon="@android:drawable/ic_menu_gallery"

            android:title="Gallery" />

        <item android:id="@+id/nav_slideshow" android:icon="@android:drawable/ic_menu_slideshow"

            android:title="Slideshow" />

        <item android:id="@+id/nav_manage" android:icon="@android:drawable/ic_menu_manage"

            android:title="Tools" />

        <item android:id="@+id/nav_manage1" android:icon="@android:drawable/ic_menu_manage"

            android:title="myextraTools" />

    </group>



    <item android:title="Communicate">

        <menu>

            <item android:id="@+id/nav_share" android:icon="@android:drawable/ic_menu_share"

                android:title="Share" />

            <item android:id="@+id/nav_send" android:icon="@android:drawable/ic_menu_send"

                android:title="Send" />

        </menu>

    </item>



</menu>

(7)write code for  main.xml  file(inside menu directory ):
<menu 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" tools:context=".MainActivity">

    <item android:id="@+id/action_settings" android:title="@string/action_settings"

        android:orderInCategory="100" app:showAsAction="never" />

</menu>

========================================================================
code for test.java Activity....
========================================================================
(1)Now write code for   test.java   file :
package sidebar.test.om.com.myapplication;



import android.content.Intent;

import android.os.Bundle;

import android.support.design.widget.FloatingActionButton;

import android.support.design.widget.NavigationView;

import android.support.design.widget.Snackbar;

import android.support.v4.view.GravityCompat;

import android.support.v4.widget.DrawerLayout;

import android.support.v7.app.ActionBarDrawerToggle;

import android.support.v7.app.AppCompatActivity;

import android.support.v7.widget.Toolbar;

import android.view.Menu;

import android.view.MenuItem;

import android.view.View;



public class test extends AppCompatActivity

        implements NavigationView.OnNavigationItemSelectedListener {



    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_test);

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

        setSupportActionBar(toolbar);



        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);

        fab.setOnClickListener(new View.OnClickListener() {

            @Override

            public void onClick(View view) {

                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)

                        .setAction("Action", null).show();

            }

        });



        DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);

        ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(

                this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);

        drawer.setDrawerListener(toggle);

        toggle.syncState();



        NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);

        navigationView.setNavigationItemSelectedListener(this);

    }



    @Override

    public void onBackPressed() {

        DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);

        if (drawer.isDrawerOpen(GravityCompat.START)) {

            drawer.closeDrawer(GravityCompat.START);

        } else {

            super.onBackPressed();

        }

    }



    @Override

    public boolean onCreateOptionsMenu(Menu menu) {

        // Inflate the menu; this adds items to the action bar if it is present.

        getMenuInflater().inflate(R.menu.main, menu);

        return true;

    }



    @Override

    public boolean onOptionsItemSelected(MenuItem item) {

        // Handle action bar item clicks here. The action bar will

        // automatically handle clicks on the Home/Up button, so long

        // as you specify a parent activity in AndroidManifest.xml.

        int id = item.getItemId();



        //noinspection SimplifiableIfStatement

        if (id == R.id.action_settings) {

            return true;

        }



        return super.onOptionsItemSelected(item);

    }



    @SuppressWarnings("StatementWithEmptyBody")

    @Override

    public boolean onNavigationItemSelected(MenuItem item) {

        // Handle navigation view item clicks here.

        int id = item.getItemId();



        if (id == R.id.nav_camara) {

            // Handle the camera action

        } else if (id == R.id.nav_gallery) {



        } else if (id == R.id.nav_slideshow) {



            Intent i = new Intent(test.this,test.class);

            startActivity(i);



        } else if (id == R.id.nav_manage)

        {



        } else if (id == R.id.nav_share) {



        } else if (id == R.id.nav_send) {



        }

        else if(id==R.id.nav_manage1)

        {

            Intent i = new Intent(getApplicationContext(),test.class);

            startActivity(i);

        }



        DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);

        drawer.closeDrawer(GravityCompat.START);

        return true;

    }

}

(2)write  code for  activity_test.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:id="@+id/drawer_layout"

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

    android:fitsSystemWindows="true" tools:openDrawer="start">



    <include layout="@layout/test_bar" android:layout_width="match_parent"

        android:layout_height="match_parent" />



    <android.support.design.widget.NavigationView android:id="@+id/nav_view"

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

        android:layout_gravity="start" android:fitsSystemWindows="true"

        app:headerLayout="@layout/nav_header_main" app:menu="@menu/activity_main_drawer" />



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

(3) write   code   for    test_bar.xml    file  :
<?xml version="1.0" encoding="utf-8"?>

<android.support.design.widget.CoordinatorLayout

    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:fitsSystemWindows="true"

    tools:context=".test">



    <android.support.design.widget.AppBarLayout android:layout_height="wrap_content"

        android:layout_width="match_parent" 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="?attr/colorPrimary" app:popupTheme="@style/AppTheme.PopupOverlay" />



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



    <include layout="@layout/content_test" />



    <android.support.design.widget.FloatingActionButton android:id="@+id/fab"

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

        android:layout_gravity="bottom|end" android:layout_margin="@dimen/fab_margin"

        android:src="@android:drawable/ic_dialog_email" />



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




(4) write   code for  content_test.xml  :
<?xml version="1.0" encoding="utf-8"?>

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

    xmlns:tools="http://schemas.android.com/tools"

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

    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"

    android:paddingRight="@dimen/activity_horizontal_margin"

    android:paddingTop="@dimen/activity_vertical_margin"

    android:paddingBottom="@dimen/activity_vertical_margin"

    app:layout_behavior="@string/appbar_scrolling_view_behavior"

    tools:showIn="@layout/activity_test" tools:context="sidebar.test.om.com.myapplication.test">



    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:textAppearance="?android:attr/textAppearanceLarge"

        android:text="Large Test"

        android:id="@+id/textView3"

        android:layout_centerVertical="true"

        android:layout_alignParentLeft="true"

        android:layout_alignParentStart="true"

        android:layout_marginLeft="162dp"

        android:layout_marginStart="162dp" />



</RelativeLayout>



 output:
when you will click on Navigation Bar you will get your side bar  see given below:


after click on  sideshow you  will get test.java activity output see given below:



Written by

We are Creative Blogger Theme Wavers which provides user friendly, effective and easy to use themes. Each support has free and providing HD support screen casting.

0 comments:

Post a Comment

 

© 2013 ANDROID TRAINING IN MUMBAI BY OM SIR. All rights resevered. Designed by Templateism

Back To Top