NavigationView Drawer Expandable menu Item in ANdroid

NavigationView Drawer is very common used today building any app. It provides to show Menu with navigation feature. NavigationView introduces in design support library to gives better navigation for users.  IN many of app you have seen with custom view on top of header view that contain the user information and below on header with menu items listed. Users can select any item to navigate view accordingly.

In this article I am focusing something different for navigation view without menu item. Most of the app that can see they used expandable menu with submenu. User can expand menu items and click on submenu items to navigate view. If you want to show app version information in footer, then you can add with footer in NavigationView.

Here is uploaded video that helps to understand what I am talking. Please this video.


Lets create an android project to implements this feature.

build.gradle app level

    
    compile 'com.android.support:recyclerview-v7:25.0.0'
    compile 'com.android.support:cardview-v7:25.0.0'
    compile 'com.android.support:design:25.0.0'
    compile 'com.jakewharton:butterknife:8.4.0'
    apt 'com.jakewharton:butterknife-compiler:8.4.0'
    compile 'com.thoughtbot:expandablerecyclerview:1.0'
    compile 'com.github.bumptech.glide:glide:3.7.0'
    compile 'de.hdodenhof:circleimageview:2.0.0'

MainActivity.java

    
import android.app.FragmentTransaction;
import android.os.Bundle;
import android.support.design.widget.NavigationView;
import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.DividerItemDecoration;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.Toolbar;
import android.view.MenuItem;
import android.widget.FrameLayout;

import java.util.ArrayList;
import java.util.List;

import butterknife.BindView;
import butterknife.ButterKnife;

public class MainActivity extends AppCompatActivity implements RecyclerAdapter.ItemClickChild{

    @BindView(R.id.recyclerView)
    RecyclerView recyclerView;
    @BindView(R.id.nav_view)
    NavigationView navView;
    @BindView(R.id.drawer_layout)
    DrawerLayout drawerLayout;

    String names[] = Constant.name;
    String subNames[] = Constant.subName;

    @BindView(R.id.toolbar)
    Toolbar toolbar;

    @BindView(R.id.frame)
    FrameLayout frame;

    TitleFragment fragment;


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

        setSupportActionBar(toolbar);
        final ActionBar actionar = getSupportActionBar();
        actionar.setDisplayHomeAsUpEnabled(true);
        actionar.setHomeAsUpIndicator(R.drawable.ic_menu);

        List list = getList();
        RecyclerAdapter adapter = new RecyclerAdapter(this, list, this);
        recyclerView.setLayoutManager(new LinearLayoutManager(this));
        recyclerView.setAdapter(adapter);
        recyclerView.addItemDecoration(new DividerItemDecoration(this, LinearLayoutManager.VERTICAL));
        recyclerView.setAdapter(adapter);

        setFragment();
    }

    private void setFragment() {
        fragment = new TitleFragment();
        FragmentTransaction fragmentTransaction = getFragmentManager().beginTransaction();
        fragmentTransaction.replace(R.id.frame, fragment, "TitleFragment").commit();
    }

    private List getList() {
        List list = new ArrayList<>();
        for (int i = 0; i < names.length; i++) {
            List subTitles = new ArrayList<>();
            for (int j = 0; j < subNames.length; j++) {
                SubTitle subTitle = new SubTitle(subNames[j]);
                subTitles.add(subTitle);
            }
            TitleMenu model = new TitleMenu(names[i], subTitles, null);
            list.add(model);
        }
        return list;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        int id = item.getItemId();
        if (id == android.R.id.home) {
            drawerLayout.openDrawer(GravityCompat.START);
            return true;
        }

        return super.onOptionsItemSelected(item);
    }

    @Override
    public void onChildClick(int position) {
        String name = subNames[position];
        drawerLayout.closeDrawers();
        fragment.setTitle(name);
    }
}

activity_main.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_height="match_parent"
    android:layout_width="match_parent"
    android:fitsSystemWindows="true">

   <include layout="@layout/layout_toolabr"
        android:id="@+id/toolbar_container"/>

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

   <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_height="match_parent"
        android:layout_width="wrap_content"
        android:layout_gravity="start"
        android:fitsSystemWindows="true">

         <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

             <include layout="@layout/nav_header"
                android:id="@+id/header"/>

          <android.support.v7.widget.RecyclerView
                android:layout_below="@+id/header"
                android:id="@+id/recyclerView"
                android:layout_marginBottom="25dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
             </android.support.v7.widget.RecyclerView>

      </RelativeLayout>

       <TextView
            android:padding="5dp"
            android:id="@+id/footer"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="copyright @ sunil gupta"
            android:gravity="center"
            android:textColor="@color/red_icon_color"
            android:layout_gravity="bottom"/>

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

RecyclerAdapter.java

    
import android.app.Activity;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.thoughtbot.expandablerecyclerview.ExpandableRecyclerViewAdapter;
import com.thoughtbot.expandablerecyclerview.models.ExpandableGroup;

import java.util.List;

/**
 * Created by sunil on 12/23/16.
 */

public class RecyclerAdapter extends ExpandableRecyclerViewAdapter {

    private Context context;
    private ItemClickChild mListener;
    public RecyclerAdapter(Context context, List groups, Activity activity) {
        super(groups);
        this.context = context;
        mListener = (ItemClickChild) activity;
    }

    @Override
    public TitleViewHolder onCreateGroupViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext())
                .inflate(R.layout.list_item_title, parent, false);
        return new TitleViewHolder(view);
    }

    @Override
    public SubTitleViewHolder onCreateChildViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext())
                .inflate(R.layout.item_subtitle, parent, false);
        return new SubTitleViewHolder(view);
    }

    @Override
    public void onBindChildViewHolder(SubTitleViewHolder holder, int flatPosition,
                                      ExpandableGroup group, final int childIndex) {

        final SubTitle subTitle = ((TitleMenu) group).getItems().get(childIndex);
        holder.setSubTitletName(subTitle.getName());
        holder.itemView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                mListener.onChildClick(childIndex);
            }
        });
    }

    @Override
    public void onBindGroupViewHolder(TitleViewHolder holder, int flatPosition, ExpandableGroup group) {
        holder.setGenreTitle(context, group);
    }

    public interface ItemClickChild{
        void onChildClick(int position);
    }
}

TitleFragment.java

    
import android.app.Fragment;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.graphics.ColorUtils;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import android.widget.TextView;

import butterknife.BindView;
import butterknife.ButterKnife;

/**
 * Created by sunil on 12/24/16.
 */

public class TitleFragment extends Fragment {

    View rootView;

    @BindView(R.id.title_name)
    TextView titleName;

    @BindView(R.id.main_content)
    LinearLayout mainContent;

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        rootView = inflater.inflate(R.layout.fragment_title, container, false);
        ButterKnife.bind(this, rootView);
        return rootView;
    }

    public void setTitle(String title) {
        titleName.setText(title);
        if (title.equalsIgnoreCase("google")){
            mainContent.setBackgroundColor(getResources().getColor(R.color.red_icon_color));
        } else if (title.equalsIgnoreCase("Motorola")){
            mainContent.setBackgroundColor(getResources().getColor(R.color.green_icon_color));
        } else if (title.equalsIgnoreCase("Samsung")){
            mainContent.setBackgroundColor(getResources().getColor(R.color.yellow_icon_color));
        } else if (title.equalsIgnoreCase("Lenevo")){
            mainContent.setBackgroundColor(getResources().getColor(R.color.blue_icon_color));
        }

    }
}

fragment_title.xml

    
 <?xml version="1.0" encoding="utf-8"?>
 <Linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/main_content"
    android:gravity="center">

  <TextView
        android:gravity="center"
        android:text="Title"
        android:textStyle="bold"
        android:id="@+id/title_name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

 </LinearLayout>

Thanks for reading this post. I hope it will help you.

16 comments:

  1. thank you very much , any idea how to close Android when i open ios !

    ReplyDelete
  2. Replies
    1. Hi, Thanks for the comment, I will check and update you soon.

      Delete
    2. really thank you so much bro

      Delete
    3. can u upload source code too ! on Github, will help me for miss some xml like toolbar and toolbar_container

      Delete
    4. the source code download link not work , the one in top right page

      Delete
    5. Here is the source code link https://github.com/sunil676/NavigationViewAndroid

      Delete
  3. what to do when subitems are different ?

    ReplyDelete
  4. why i cant find apt 'com.jakewharton:butterknife-compiler:8.4.0' when i clean build this program?? can you give me solution for that? thanks.

    ReplyDelete
  5. i dont finf toolbal.java, also SubTitle what is it?

    ReplyDelete
  6. Please add an option to download app directly

    ReplyDelete
  7. Good example, but I have a question.
    Your submenus are the same in both Menus (Android and iOS). I checked your code and for example, If I want to change iOS
    submenus it dosen't matter what do I put, becouse it will be running like before (with the same screen color).

    So,How can I put a different submenu and go to another screen?

    ReplyDelete

Debug Database in Android

In my last tutorial, we have learned how we can use persistence database in android. We also understood which database wrapper we can use...

Contact Me

Name

Email *

Message *