Headertab

Drop Down MenusCSS Drop Down MenuPure CSS Dropdown Menu

Friday, 29 April 2016

MaterialNavigationDrawer

Hello friends today we are learn about how to create material navigation drawer system.

activity_main.xml

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    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:context="com.samset.materialnavigationdrawer.MainActivity">

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

        <include
            android:id="@+id/tool1"
            layout="@layout/toolbar" />

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


    </LinearLayout>

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


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

MainActivity.java

/*
* Copyright 2016 Sanjay Singh.

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
*
* */
package com.samset.materialnavigationdrawer;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
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.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.widget.RelativeLayout;
import android.widget.TextView;
import android.widget.Toast;

import com.samset.materialnavigationdrawer.adapter.NavigationDrawerAdapter;
import com.samset.materialnavigationdrawer.fragments.HomeFragment;
import com.samset.materialnavigationdrawer.listeners.OnItemClickListener;

/*
By Sanjay Singh
* */
public class MainActivity extends AppCompatActivity implements OnItemClickListener{
    private String Name = "Samset";
    private int Icon = R.drawable.ic_avtar;
    private Toolbar toolbar;
    private RelativeLayout drawer_pane;
    private DrawerLayout mDrawerLayout;
    private ActionBarDrawerToggle mDrawerToggle;
    private RecyclerView.LayoutManager layoutManager;
    private RecyclerView drawerRecycler;
    private NavigationDrawerAdapter adapter;
    private static String[] titles = null;

    // Add icons
   
private static int[] icons = {
            R.drawable.ic_home, R.drawable.ic_android, R.drawable.ic_facebook,
            R.drawable.ic_twitter, R.drawable.ic_dropbox, R.drawable.ic_camera, R.drawable.ic_audiotrack,
            R.drawable.ic_video, R.drawable.ic_wifi,R.drawable.ic_call,R.drawable.ic_gallery,
            R.drawable.ic_cloudy,R.drawable.ic_power};


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        titles=getResources().getStringArray(R.array.nav_drawer_labels);
        setInitilization();
        setToolbar();
        setNavigationDrawer();
        beginTransction(HomeFragment.getInstance());
    }

    // Componenet initilization
   
private void setInitilization() {

        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        toolbar = (Toolbar) findViewById(R.id.tool1);
        drawerRecycler = (RecyclerView) findViewById(R.id.left_drawer);
    }

    // setting toolbar
   
private void setToolbar() {
        if (toolbar != null) {
            setSupportActionBar(toolbar);

            final ActionBar actionBar = getSupportActionBar();
            if (actionBar != null) {
                actionBar.setDisplayHomeAsUpEnabled(true);
                actionBar.setDisplayShowHomeEnabled(true);
                actionBar.setDisplayShowTitleEnabled(true);
                actionBar.setDisplayUseLogoEnabled(false);
                actionBar.setHomeButtonEnabled(true);
            }
        }
    }
    // Setup navigation drawer
   
private synchronized void setNavigationDrawer() {

        layoutManager = new LinearLayoutManager(this);
        drawerRecycler.setLayoutManager(layoutManager);
        adapter = new NavigationDrawerAdapter(this, titles, icons, Name, Icon);
        drawerRecycler.setAdapter(adapter);
        adapter.setListner(this);
        mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, toolbar, R.string.drawer_open, R.string.drawer_close) {

            public void onDrawerClosed(View view) {
                super.onDrawerClosed(view);
                supportInvalidateOptionsMenu();
            }
            @Override
            public void onDrawerSlide(View drawerView, float slideOffset) {
                super.onDrawerSlide(drawerView, slideOffset);
                if (slideOffset > .55) {
                    onDrawerOpened(drawerView);

                } else if (slideOffset < .45) {
                    onDrawerClosed(drawerView);
                }
            }
            public void onDrawerOpened(View drawerView) {
                super.onDrawerOpened(drawerView);
                supportInvalidateOptionsMenu();
            }
        };
        mDrawerLayout.setDrawerListener(mDrawerToggle);
    }
    @Override
    protected void onPostCreate(Bundle savedInstanceState) {
        super.onPostCreate(savedInstanceState);
        mDrawerToggle.syncState();
    }

    @Override
    public void onItemClick(View view, final int position) {
        mDrawerLayout.closeDrawer(drawerRecycler);
        mDrawerLayout.postDelayed(new Runnable() {
            @Override
            public void run() {
                // You call fragment as u want
               
beginTransction(HomeFragment.getInstance());
                Toast.makeText(MainActivity.this, "You click " + titles[position - 1], Toast.LENGTH_SHORT).show();
            }
        }, 300);

    }

    // begin transaction
   
private void beginTransction(Fragment fragment) {

        FragmentManager fragmentManager=getSupportFragmentManager();
        FragmentTransaction transaction=fragmentManager.beginTransaction();
        transaction.replace(R.id.mainContainer,fragment).commit();

    }
}

NavigationDrawerAdapter.java



package com.samset.materialnavigationdrawer.adapter;

import android.app.Activity;
import android.net.Uri;
import android.support.v4.app.FragmentManager;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

import com.samset.materialnavigationdrawer.R;
import com.samset.materialnavigationdrawer.listeners.OnItemClickListener;


public class NavigationDrawerAdapter extends
       
RecyclerView.Adapter<NavigationDrawerAdapter.MyHolderView> {
    public static final int CAMERA = 1;
    public static final int GALLERY = 2;
    static String listItem[];
    String listItemSec[];
    String profile_name;
    int listIcon[];
    int listIconSec[];
    int profile;
    static Activity context;
    final static int VIEW_TYPE_HEADER = 0;
    final static int VIEW_TYPE_ITEM = 1;
    final static int VIEW_TYPE_FOOTER = 2;
    MyHolderView myholder;
    private static OnItemClickListener listener;

    public OnItemClickListener getListner() {
        return listener;
    }

    public void setListner(OnItemClickListener listner) {
        this.listener = listner;
    }


    public NavigationDrawerAdapter(Activity ctx,String title[], int icons[], String username, int icon) {
        this.context = ctx;
        this.listIcon = icons;
        this.listItem = title;
        this.profile_name = username;
        this.profile = icon;

    }


    public static class MyHolderView extends RecyclerView.ViewHolder
    {
        public static int Holderid;

        LinearLayout header_viewprofile;
        TextView name;
        TextView list_Item;
        public static ImageView profile_pic, list_icon;
        View getview;

        public MyHolderView(View view, int Viewtype) {
            super(view);
            getview = view;
            view.setClickable(true);

             if (Viewtype == VIEW_TYPE_HEADER) {
                header_viewprofile = (LinearLayout) view
                        .findViewById(R.id.headerText);
                name = (TextView) view
                        .findViewById(R.id.tv_header_profile_username);
                profile_pic = (ImageView) view
                        .findViewById(R.id.iv_header_profile_pic);
                profile_pic.setOnClickListener(new OnClickListener() {

                    @Override
                    public void onClick(View click) {
                        if (listener != null) {
                            listener.onItemClick(click, getPosition());
                        }


                    }
                });

                Holderid = 0;
            }
            else if (Viewtype == VIEW_TYPE_ITEM) {
                list_Item = (TextView) view
                        .findViewById(R.id.tvDrawer_title);
                list_icon = (ImageView) view
                        .findViewById(R.id.ivdrawer_icon);
                list_Item.setOnClickListener(new OnClickListener() {

                    @Override
                    public void onClick(View click) {
                        if (listener != null) {
                            listener.onItemClick(click, getPosition());
                        }


                    }
                });


                 Holderid = 1;
            }  else if (Viewtype == VIEW_TYPE_FOOTER) {

                Holderid = 2;
            }

        }
    }

    @Override
    public int getItemCount() {
        // TODO Auto-generated method stub
       
return
listItem.length + 1;
    }



    @Override
    public NavigationDrawerAdapter.MyHolderView onCreateViewHolder(
            ViewGroup root_parent, int position) {

        if (position == VIEW_TYPE_ITEM) {

            View v = LayoutInflater.from(root_parent.getContext()).inflate(
                    R.layout.nav_drawer_row, root_parent, false);
             v.setTag(position);
            MyHolderView holdview = new MyHolderView(v, position);

            return holdview;
        }

        else if (position == VIEW_TYPE_HEADER) {
            View v = LayoutInflater.from(root_parent.getContext()).inflate(
                    R.layout.drawer_header, root_parent, false);
            v.setTag(position);
            MyHolderView viewhold = new MyHolderView(v, position);

            return viewhold;
        }
        else if (position == VIEW_TYPE_FOOTER) {
            View v = LayoutInflater.from(root_parent.getContext()).inflate(
                    R.layout.nav_frawer_other, root_parent,
                    false);
            v.setTag(position);
            MyHolderView viewhold = new MyHolderView(v, position);
            return viewhold;
        }
        return null;
    }

    @Override
    public int getItemViewType(int position) {

        if (isPositionHeader(position))

            return VIEW_TYPE_HEADER;

        if (isPositionItem(position))

            return VIEW_TYPE_ITEM;

        if (isPositionItemtwo(position))

            return VIEW_TYPE_ITEM;

        if (isPositionItemthird(position))

            return VIEW_TYPE_ITEM;

        if (isPositionItemfourth(position))

            return VIEW_TYPE_ITEM;

        if (isPositionItemfifth(position))

            return VIEW_TYPE_ITEM;

        if (isPositionItemsix(position))

            return VIEW_TYPE_ITEM;

        if (isPositionItemseventh(position))

            return VIEW_TYPE_ITEM;

        if (isPositionItemeight(position))

            return VIEW_TYPE_ITEM;
        if (isPositionItemnine(position))

            return VIEW_TYPE_ITEM;
        if (isPositionItemten(position))

            return VIEW_TYPE_FOOTER;
        if (isPositionItemeleven(position))

            return VIEW_TYPE_ITEM;
        if (isPositionItemtwelve(position))

            return VIEW_TYPE_ITEM;

        if (isPositionItemfooter(position))

            return VIEW_TYPE_ITEM;

        else
            return VIEW_TYPE_ITEM
;

    }

    private boolean isPositionHeader(int position) {
        return position == 0;
    }
    private boolean isPositionItem(int position) {
        return position == 1;
    }
    private boolean isPositionItemtwo(int position) {
        return position == 2;
    }
    private boolean isPositionItemthird(int position) {
        return position == 3;
    }
    private boolean isPositionItemfourth(int position) {
        return position == 4;
    }
    private boolean isPositionItemfifth(int position) {
        return position == 5;
    }
    private boolean isPositionItemsix(int position) {
        return position == 6;
    }
    private boolean isPositionItemseventh(int position) {
        return position == 7;
    }
    private boolean isPositionItemeight(int position) {
        return position == 8;
    }
    private boolean isPositionItemnine(int position) {
        return position == 9;
    }
    private boolean isPositionItemten(int position) {
        return position == 10;
    }
    private boolean isPositionItemeleven(int position) {
        return position == 11;
    }
    private boolean isPositionItemtwelve(int position) {
        return position == 12;
    }
    private boolean isPositionItemthirteen(int position) {
        return position == 13;
    }
    private boolean isPositionItemfourteen(int position) {
        return position == 14;
    }
    private boolean isPositionItemfooter(int position) {
        return position == 15;
    }


    @Override
    public void onBindViewHolder(MyHolderView holder, int position) {

        this.myholder = holder;
        if (MyHolderView.Holderid == 0) {
            holder.profile_pic.setImageResource(profile);
            holder.name.setText(profile_name);
        }
        if (MyHolderView.Holderid == 1) {
            holder.list_Item.setText(listItem[position - 1]);
            holder.list_icon.setImageResource(listIcon[position - 1]);

        }
        if (MyHolderView.Holderid == 2) {

        }


    }

}

nav_drawer_row.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="wrap_content"
    android:clickable="true">
<RelativeLayout
    android:id="@+id/parent_lay"
    android:paddingLeft="30dp"
    android:paddingTop="10dp"
    android:paddingBottom="10dp"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/ivdrawer_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher"
        android:layout_marginRight="20dp"
        android:layout_centerVertical="true"
        android:layout_alignParentRight="true" />

    <TextView
        android:id="@+id/tvDrawer_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Samset"
        android:layout_centerVertical="true"
        android:layout_marginLeft="5dp"
        android:layout_alignParentLeft="true"
        android:textAppearance="?android:attr/textAppearanceMedium"
         />



</RelativeLayout>
    <View
        android:id="@+id/v"
        android:layout_below="@+id/parent_lay"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@color/divider"
        android:layout_marginLeft="@dimen/left_margin"
        android:layout_marginRight="@dimen/right_margin"
        />

</RelativeLayout>


toobar.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/toolbar"
    android:minHeight="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize">

    <RelativeLayout
        android:id="@+id/rlheader"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"

        >

        <ImageView
            android:id="@+id/iv_back"
            android:layout_width="24dp"
            android:layout_height="24dp"
            android:layout_alignParentLeft="true"
            android:src="@drawable/ic_back"
            android:visibility="gone"
            android:layout_centerVertical="true"
            />

        <TextView
            android:id="@+id/tv_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="SimpleDrawer"
            android:textColor="#fff"
            android:layout_marginLeft="5dp"
            android:layout_toRightOf="@+id/iv_back"
            android:layout_centerVertical="true"
            android:textAppearance="?android:attr/textAppearanceMedium"
            />
    </RelativeLayout>
</android.support.v7.widget.Toolbar>

color.xml


<?xml version="1.0" encoding="utf-8"?><resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>

    <color name="divider">#d5d5d5</color>
    <color name="btn_back">#F2F2F2</color>
    <color name="footer">#424242</color>
    <color name="white">#fff</color>

    <color name="background">#bada55</color>
    <color name="background1">#34c9c1</color>
</resources>

dimen.xml


<resources>
    <!-- Default screen margins, per the Android Design guidelines. -->
    
<dimen name="activity_horizontal_margin">16dp</dimen>
    <dimen name="activity_vertical_margin">16dp</dimen>

    <dimen name="left_margin">10dp</dimen>
    <dimen name="right_margin">10dp</dimen>

    <dimen name="drawer_grouping_padding">8dp</dimen>
    <dimen name="drawer_right_margin">16dp</dimen>
    <dimen name="drawer_left_margin">16dp</dimen>
    <dimen name="drawer_header_text">56dp</dimen>
</resources>

style.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>

// If you are change drawer arrow color use this code

<!--this style is change drawer icon color--><style name="DrawerArrowStyle" parent="@style/Widget.AppCompat.DrawerArrowToggle">
    <item name="spinBars">true</item>
    <item name="color">@android:color/white</item>

</style>

</resources>

build.gradle


apply plugin: 'com.android.application'android {
    compileSdkVersion 23
    buildToolsVersion "23.0.2"

    
defaultConfig {
        applicationId "com.samset.materialnavigationdrawer"
        
minSdkVersion 15
        targetSdkVersion 23
        versionCode 1
        versionName "1.0"
    
}
    buildTypes {
        release {
            minifyEnabled false
            
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        
}
    }
}

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
    
compile 'com.android.support:appcompat-v7:23.2.1'
    
compile 'com.android.support:design:23.2.1'
    
compile 'com.android.support:support-v4:23.2.1'
    
compile 'com.android.support:recyclerview-v7:23.2.1'}

I hope this blog helps you
Thank you

See more link SimpleNavigationDrawer

FullSourceCode MaterialNavigationDrawer-master 

Live Sample