Combining Navigation Drawer and Recycler View in ViewPager Fragments( with tabs)

In android development, Navigation Drawer and Recycler View and tabs layout are some of the most popular interfaces that are used in apps. We often think to collaborate different types of layout in a single screen., with DrawerLayout, NavigationView, ViewPager, RecyclerView, CardView and TabLayout. With material design style, the theme can be combined in an Activity.

Firstly, add the design support library dependency to use Material Design Widgets, add RecyclerView dependency and CardView dependency to use them:

app/build.gradle

1. apply plugin: 'com.android.application'
2. 
   
3. android {
4.     compileSdkVersion 24
5.     buildToolsVersion "25.0.0"
6.     defaultConfig {
7.         applicationId "test.ku.codedivas.sampleapp"
8.         minSdkVersion 14
9.         targetSdkVersion 24
10.         versionCode 1
11.         versionName "1.0"
12.         
13. testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
14.     }
15.     buildTypes {
16.         release {
17.             minifyEnabled false
18.             proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
19.         }
20.     }
21. }
22. 
    
23. dependencies {
24.     compile fileTree(dir: 'libs', include: ['*.jar'])
25.     androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
26.         exclude group: 'com.android.support', module: 'support-annotations'
27.     })
28.     compile 'com.android.support:appcompat-v7:24.2.1'
29.     compile 'com.android.support:design:24.2.1'
30.     compile 'com.android.support:recyclerview-v7:24.2.0'
31.     compile 'com.android.support:cardview-v7:24.2.0'
32.     testCompile 'junit:junit:4.12'
33. 
    
34. }

Designing Activity Layout

The layout should be like:

activity_main.xml

1. <?xml version="1.0" encoding="utf-8"?>
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3.     android:orientation="vertical"
4.     android:layout_width="match_parent"
5.     android:layout_height="match_parent"
6.     xmlns:app="http://schemas.android.com/apk/res-auto">
7. 
   
8.     <android.support.v7.widget.Toolbar
9.         android:id="@+id/toolbar"
10.         android:layout_width="match_parent"
11.         android:layout_height="?attr/actionBarSize"
12.         android:background="?attr/colorPrimary"
13.         android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />
14. 
    
15.     <android.support.v4.widget.DrawerLayout
16.         android:id="@+id/drawerLayout"
17.         android:layout_width="match_parent"
18.         android:layout_height="match_parent"
19.         android:fitsSystemWindows="true"
20.         xmlns:tools="http://schemas.android.com/tools"
21.         tools:openDrawer="start">
22. 
    
23.         <LinearLayout android:layout_width="match_parent"
24.             android:layout_height="match_parent"
25.             xmlns:app="http://schemas.android.com/apk/res-auto"
26.             android:orientation="vertical"
27.             xmlns:android="http://schemas.android.com/apk/res/android">
28. 
    
29.             <android.support.design.widget.TabLayout
30.                 android:id="@+id/tab_layout"
31.                 android:layout_width="match_parent"
32.                 app:tabGravity="fill"
33.                 app:tabMode="fixed"
34.                 android:layout_height="?attr/actionBarSize"
35.                 android:background="@color/colorPrimary"
36.                 android:minHeight="?attr/actionBarSize"
37.                 android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />
38. 
    
39.             <android.support.v4.view.ViewPager
40.                 android:id="@+id/view_pager"
41.                 android:layout_width="match_parent"
42.                 android:layout_height="wrap_content" />
43.         </LinearLayout>
44. 
    
45.         <android.support.design.widget.NavigationView
46.             android:id="@+id/nav_view"
47.             android:layout_width="wrap_content"
48.             android:layout_height="match_parent"
49.             android:layout_gravity="start"
50.             android:fitsSystemWindows="true"
51.             app:headerLayout="@layout/nav_header_main"
52.             app:menu="@menu/activity_main_drawer" />
53. 
    
54.     </android.support.v4.widget.DrawerLayout>
55. 
    
56. </LinearLayout>

Here, We have to put ViewPager and Tab Layout in the first child of DrawerLayout, it will make a swipeable view with tabs later and it's child is a Navigation View.

nav_header_main.xml

1. <?xml version="1.0" encoding="utf-8"?>
2. 
   
3. <LinearLayout 
4.     xmlns:android="http://schemas.android.com/apk/res/android"
5.     xmlns:app="http://schemas.android.com/apk/res-auto"
6.     android:layout_width="match_parent"
7.     android:layout_height="160dp"
8.     android:paddingBottom="16dp"
9.     android:paddingLeft="16dp"
10.     android:paddingRight="16dp"
11.     android:paddingTop="16dp"
12.     android:theme="@style/ThemeOverlay.AppCompat.Dark"
13.     android:orientation="vertical"
14.     android:gravity="bottom">
15. 
    
16.     <ImageView
17.         android:layout_width="wrap_content"
18.         android:layout_height="wrap_content"
19.         android:paddingTop="16dp"
20.         app:srcCompat="@mipmap/ic_launcher"
21.         android:id="@+id/imageView" />
22. 
    
23.     <TextView
24.         android:layout_width="match_parent"
25.         android:layout_height="wrap_content"
26.         android:paddingTop="16dp"
27.         android:text="Android Studio"
28.         android:textColor="#ffffff"
29.         android:textAppearance="@style/TextAppearance.AppCompat.Body1" />
30. 
    
31.     <TextView
32.         android:layout_width="wrap_content"
33.         android:layout_height="wrap_content"
34.         android:text="android.studio@android.com"
35.         android:textAppearance="?android:textAppearanceSmall"
36.         android:textColor="#ffffff"
37.         android:textStyle="bold"
38.         android:id="@+id/textView" />
39. 
    
40. </LinearLayout>

The nav_header_main.xml file is made to build the sliding menu drawer.

activity_main_drawer.xml

1. <?xml version="1.0" encoding="utf-8"?>
2. <menu xmlns:android="http://schemas.android.com/apk/res/android">
3. 
   
4.     <group android:checkableBehavior="single">
5.         <item
6.             android:id="@+id/nav_camera"
7.             android:icon="@drawable/ic_menu_camera"
8.             android:title="Fragment One" />
9.         <item
10.             android:id="@+id/nav_gallery"
11.             android:icon="@drawable/ic_menu_gallery"
12.             android:title="Fragment Two" />
13.         <item
14.             android:id="@+id/nav_slideshow"
15.             android:icon="@drawable/ic_menu_slideshow"
16.             android:title="Fragment Three" />
17.         <item
18.             android:id="@+id/nav_manage"
19.             android:icon="@drawable/ic_menu_manage"
20.             android:title="NextActivity" />
21.     </group>
22. 
    
23.     <item android:title="Communicate">
24.         <menu>
25.             <item
26.                 android:id="@+id/nav_share"
27.                 android:icon="@drawable/ic_menu_share"
28.                 android:title="Share" />
29.             <item
30.                 android:id="@+id/nav_send"
31.                 android:icon="@drawable/ic_menu_send"
32.                 android:title="Send" />
33.         </menu>
34.     </item>
35. 
    
36. </menu>

The activity_main_drawer.xml file is made to fill the values into sliding menu drawer.

Program Code

In our Main Activity, make sure to locate all the views, set the adapter for ViewPager (containing fragments which have RecyclerView embedded), attach TabLayout with ViewPager. It must implement OnNavigationItemSelectedListener interface to handle NavigationView item clicked event.

Source code should be like:

MainActivity.java

1. package test.ku.codedivas.sampleapp;
2. 
   
3. import android.content.Intent;
4. import android.os.Bundle;
5. import android.support.design.widget.FloatingActionButton;
6. import android.support.design.widget.Snackbar;
7. import android.support.design.widget.TabLayout;
8. import android.support.v4.app.FragmentManager;
9. import android.support.v4.view.ViewPager;
10. import android.view.View;
11. import android.support.design.widget.NavigationView;
12. import android.support.v4.view.GravityCompat;
13. import android.support.v4.widget.DrawerLayout;
14. import android.support.v7.app.ActionBarDrawerToggle;
15. import android.support.v7.app.AppCompatActivity;
16. import android.support.v7.widget.Toolbar;
17. import android.view.Menu;
18. import android.view.MenuItem;
19. 
    
20. public class MainActivity extends AppCompatActivity
21.         implements NavigationView.OnNavigationItemSelectedListener {
22. 
    
23.     private ViewPager viewPager;
24.     private DrawerLayout drawer;
25.     public String title;
26. 
    
27.     private TabLayout tabLayout;
28.     private String[] pageTitle = {"First", "Second", "Third"};
29. 
    
30.     @Override
31.     protected void onCreate(Bundle savedInstanceState) {
32.         super.onCreate(savedInstanceState);
33.         setContentView(R.layout.activity_main);
34. 
    
35.         viewPager = (ViewPager)findViewById(R.id.view_pager);
36. 
    
37.         tabLayout = (TabLayout) findViewById(R.id.tab_layout);
38.         for (int i = 0; i < 3; i++) {
39.             tabLayout.addTab(tabLayout.newTab().setText(pageTitle[i]));
40.         }
41. 
    
42.         //set gravity for tab bar
43.         tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
44. 
    
45.         Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
46.         setSupportActionBar(toolbar);
47. 
    
48.         DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawerLayout);
49.         ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
50.                 this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
51.         drawer.setDrawerListener(toggle);
52.         toggle.syncState();
53. 
    
54.         NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
55.         assert navigationView != null;
56.         navigationView.setNavigationItemSelectedListener(this);
57. 
    
58.         //set viewpager adapter
59.         ViewPagerAdapter pagerAdapter = new ViewPagerAdapter(getSupportFragmentManager());
60.         viewPager.setAdapter(pagerAdapter);
61. 
    
62.         //change Tab selection when swipe ViewPager
63.     viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
64. 
    
65.         //change ViewPager page when tab selected
66.         tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
67.             @Override
68.             public void onTabSelected(TabLayout.Tab tab) {
69.                 viewPager.setCurrentItem(tab.getPosition());
70.             }
71. 
    
72.             @Override
73.             public void onTabUnselected(TabLayout.Tab tab) {
74.             }
75. 
    
76.             @Override
77.             public void onTabReselected(TabLayout.Tab tab) {
78.             }
79.         });
80. 
    
81.         if (savedInstanceState == null) {
82.             navigationView.getMenu().performIdentifierAction(R.id.nav_camera,0);
83.         }
84.     }
85. 
    
86.     @Override
87.     public void onBackPressed() {
88.         DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawerLayout);
89.         if (drawer.isDrawerOpen(GravityCompat.START)) {
90.             drawer.closeDrawer(GravityCompat.START);
91.         } else {
92.             super.onBackPressed();
93.         }
94.     }
95. 
    
96.     @SuppressWarnings("StatementWithEmptyBody")
97.     @Override
98.     public boolean onNavigationItemSelected(MenuItem item) {
99.         // Handle navigation view item clicks here.
100. 
     
101.         FragmentManager fm  = getSupportFragmentManager();
102.         switch(item.getItemId()) {
103.             case R.id.nav_camera:
104.                 title="Sample App";
105.                 viewPager.setCurrentItem(0);
106.                 break;
107. 
     
108.             case R.id.nav_gallery:
109.                 viewPager.setCurrentItem(1);
110.                 break;
111. 
     
112.             case R.id.nav_slideshow:
113.                 viewPager.setCurrentItem(2);
114.                 break;
115. 
     
116.             case R.id.nav_manage:
117.                 Intent intent = new Intent(MainActivity.this,NextActivity.class);
118.                 startActivity(intent);
119.                 break;
120. 
     
121.         }
122. 
     
123.         DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawerLayout);
124.         item.setChecked(true);
125.         getSupportActionBar().setTitle(title);
126.         assert drawer != null;
127.         drawer.closeDrawer(GravityCompat.START);
128.         return true;
129. 
     
130.     }
131. }

Customizing the ViewPager adapter based on FragmentPagerAdapter or FragmentStatePagerAdapter.

ViewPagerAdapter.java

1. package test.ku.codedivas.sampleapp;
2. 
   
3. import android.support.v4.app.Fragment;
4. import android.support.v4.app.FragmentManager;
5. import android.support.v4.app.FragmentPagerAdapter;
6. 
   
7. public class ViewPagerAdapter extends FragmentPagerAdapter {
8.     public ViewPagerAdapter(FragmentManager fm) {
9.         super(fm);
10.     }
11. 
    
12.     @Override
13.     public Fragment getItem(int position) {
14.         if (position ==0) {
15.             return new FirstFragment();
16.         }
17. 
    
18.         else if (position == 1) {
19.             return new SecondFragment();
20.         }
21. 
    
22.         else
23.             return new ThirdFragment();
24.     }
25. 
    
26.     @Override
27.     public int getCount() {
28.         return 3;
29.     }
30. }

Now, we need to make the list item layout for RecyclerView. The layout code is as:

list_item.xml

1. <?xml version="1.0" encoding="utf-8"?>
2. <android.support.v7.widget.CardView
3.     xmlns:android="http://schemas.android.com/apk/res/android"
4.     xmlns:card_view="http://schemas.android.com/apk/res-auto"
5.     android:id="@+id/cvItem"
6.     android:layout_gravity="top"
7.     android:layout_width="match_parent"
8.     android:layout_height="65dp"
9.     android:layout_marginBottom="4dp"
10.     android:layout_marginLeft="8dp"
11.     android:layout_marginRight="8dp"
12.     android:layout_marginTop="4dp"
13.     android:minHeight="65dp"
14.     card_view:cardCornerRadius="10dp">
15. 
    
16.     <LinearLayout
17.         xmlns:android="http://schemas.android.com/apk/res/android"
18.         android:id="@+id/text_container"
19.         android:layout_width="match_parent"
20.         android:layout_height="65dp"
21.         android:minHeight="65dp"
22.         android:gravity="center_vertical"
23.         android:orientation="vertical">
24. 
    
25.         <TextView
26.             android:id="@+id/list_text"
27.             android:text="text"
28.             android:gravity="center_vertical"
29.             android:layout_gravity="center"
30.             android:paddingLeft="16dp"
31.             android:textSize="16sp"
32.             android:layout_width="match_parent"
33.             android:layout_height="wrap_content"
34.             android:textAppearance="?android:textAppearanceSmall"
35.             android:textColor="@android:color/black"
36.             android:textStyle="normal"/>
37.     </LinearLayout>
38. 
    
39. </android.support.v7.widget.CardView>

Now, We need to make the model for taking data in RecyclerView and adapter class also needs to be built for setting data into it and adding RecyclerView item one after the other.

RecyclerViewModel.java

1. package test.ku.codedivas.sampleapp;
2. 
   
3. public class RecyclerViewModel {
4. 
   
5.     private String mItemName;
6. 
   
7.     public RecyclerViewModel(String ItemName){
8.         mItemName = ItemName;
9.     }
10. 
    
11.     public String getmItemName() {
12.         return mItemName;
13.     }
14. }

RecyclerViewAdapter.java

1. package test.ku.codedivas.sampleapp;
2. 
   
3. import android.app.Activity;
4. import android.content.Context;
5. import android.content.Intent;
6. import android.support.v7.widget.CardView;
7. import android.support.v7.widget.RecyclerView;
8. import android.view.LayoutInflater;
9. import android.view.View;
10. import android.view.ViewGroup;
11. import android.widget.TextView;
12. import android.widget.Toast;
13. import java.util.ArrayList;
14. 
    
15. public class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerViewAdapter.ViewHolder> {
16.     private static final String LOG_TAG = RecyclerViewAdapter.class.getSimpleName();
17.     private ArrayList<RecyclerViewModel> mItems;
18.     ItemListener mListener;
19.     Context context;
20.     public static int position;
21. 
    
22.     public RecyclerViewAdapter(Activity context, ArrayList<RecyclerViewModel> program, ItemListener listener) {
23. 
    
24.         this.context = context;
25.         mItems = program;
26.         mListener = listener;
27.     }
28. 
    
29.     public void setOnItemClickListener(ItemListener listener) {
30.         mListener = listener;
31.     }
32. 
    
33.     @Override
34.     public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
35.         View v = LayoutInflater
36.                 .from(parent.getContext())
37.                 .inflate(R.layout.list_item, parent, false);
38.         context = parent.getContext();
39.         return new ViewHolder(v);
40.     }
41. 
    
42.     @Override
43.     public void onBindViewHolder(ViewHolder holder, int position) {
44.         holder.setData(mItems.get(position));
45.     }
46. 
    
47.     @Override
48.     public int getItemCount() {
49.         if (mItems != null) {
50.             return mItems.size();
51.         }
52.         return 0;
53.     }
54. 
    
55.     public class ViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener {
56.         public CardView cardView;
57.         public RecyclerViewModel pName;
58.         TextView name;
59.         View textContainer;
60. 
    
61.         public ViewHolder(View itemView) {
62. 
    
63.             super(itemView);
64.             itemView.setOnClickListener(this);
65.             cardView = (CardView)itemView.findViewById(R.id.cvItem);
66.             name = (TextView) itemView.findViewById(R.id.list_text);
67.             textContainer = itemView.findViewById(R.id.text_container);
68.         }
69. 
    
70.         public void setData(RecyclerViewModel pName) {
71.             this.pName = pName;
72.             name.setText(pName.getmItemName());
73.         }
74. 
    
75.         @Override
76.         public void onClick(View v) {
77.             if (mListener != null) {
78.                 mListener.onItemClick(pName, getAdapterPosition());
79.             }
80.             Toast.makeText(context,pName.getmItemName(),Toast.LENGTH_SHORT).show();
81. 
    
82.         }
83. 
    
84.     }
85. 
    
86.     public interface ItemListener {
87.         void onItemClick(RecyclerViewModel pName, int position);
88.     }
89. }

There are 3 fragments of ViewPager in this project.

FirstFragment.java

1. package test.ku.codedivas.sampleapp;
2. 
   
3. import android.os.Bundle;
4. import android.support.annotation.Nullable;
5. import android.support.v4.app.Fragment;
6. import android.support.v7.widget.LinearLayoutManager;
7. import android.support.v7.widget.RecyclerView;
8. import android.view.LayoutInflater;
9. import android.view.View;
10. import android.view.ViewGroup;
11. 
    
12. import java.util.ArrayList;
13. 
    
14. public class FirstFragment extends Fragment {
15.     @Nullable
16.     @Override
17.     public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
18.         View rootView = inflater.inflate(R.layout.fragment_layout,container, false);
19.         return rootView;
20.     }
21.     @Override
22.     public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
23.         super.onViewCreated(view, savedInstanceState);
24. 
    
25.         final ArrayList<RecyclerViewModel> pname = new ArrayList<RecyclerViewModel>();
26. 
    
27.         pname.add(new RecyclerViewModel("Alpha"));
28.         pname.add(new RecyclerViewModel("Beta"));
29.         pname.add(new RecyclerViewModel("Cupcake"));
30.         pname.add(new RecyclerViewModel("Donut"));
31.         pname.add(new RecyclerViewModel("Eclairs"));
32.         pname.add(new RecyclerViewModel("Froyo"));
33.         pname.add(new RecyclerViewModel("GingerBread"));
34.         pname.add(new RecyclerViewModel("HoneyComb"));
35.         pname.add(new RecyclerViewModel("IceCreamSandwich"));
36.         pname.add(new RecyclerViewModel("JellyBean"));
37.         pname.add(new RecyclerViewModel("KitKat"));
38.         pname.add(new RecyclerViewModel("Lollipop"));
39.         pname.add(new RecyclerViewModel("MarshMallow"));
40.         pname.add(new RecyclerViewModel("Nougat"));
41. 
    
42.         final RecyclerViewAdapter itemsAdapter = new RecyclerViewAdapter(FirstFragment.this.getActivity(), pname, null);
43.         final RecyclerView clv = (RecyclerView) view.findViewById(R.id.clist);
44.         clv.setLayoutManager(new LinearLayoutManager(FirstFragment.this.getActivity()));
45.         clv.setHasFixedSize(true);
46.         clv.setAdapter(itemsAdapter);
47. 
    
48.     }
49.     }

SecondFragment.java

1. package test.ku.codedivas.sampleapp;
2. 
   
3. import android.os.Bundle;
4. import android.support.annotation.Nullable;
5. import android.support.v4.app.Fragment;
6. import android.support.v7.widget.LinearLayoutManager;
7. import android.support.v7.widget.RecyclerView;
8. import android.view.LayoutInflater;
9. import android.view.View;
10. import android.view.ViewGroup;
11. 
    
12. import java.util.ArrayList;
13. 
    
14. public class SecondFragment extends Fragment {
15.     @Nullable
16.     @Override
17.     public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
18.         View rootView = inflater.inflate(R.layout.fragment_layout,container, false);
19.         return rootView;
20.     }
21.     @Override
22.     public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
23.         super.onViewCreated(view, savedInstanceState);
24. 
    
25.         final ArrayList<RecyclerViewModel> pname = new ArrayList<RecyclerViewModel>();
26. 
    
27.         pname.add(new RecyclerViewModel("Alpha"));
28.         pname.add(new RecyclerViewModel("Beta"));
29.         pname.add(new RecyclerViewModel("Cupcake"));
30.         pname.add(new RecyclerViewModel("Donut"));
31.         pname.add(new RecyclerViewModel("Eclairs"));
32.         pname.add(new RecyclerViewModel("Froyo"));
33.         pname.add(new RecyclerViewModel("GingerBread"));
34.         pname.add(new RecyclerViewModel("HoneyComb"));
35.         pname.add(new RecyclerViewModel("IceCreamSandwich"));
36.         pname.add(new RecyclerViewModel("JellyBean"));
37.         pname.add(new RecyclerViewModel("KitKat"));
38.         pname.add(new RecyclerViewModel("Lollipop"));
39.         pname.add(new RecyclerViewModel("MarshMallow"));
40.         pname.add(new RecyclerViewModel("Nougat"));
41.         final RecyclerViewAdapter itemsAdapter = new RecyclerViewAdapter(SecondFragment.this.getActivity(), pname, null);
42.         final RecyclerView clv = (RecyclerView) view.findViewById(R.id.clist);
43.         clv.setLayoutManager(new LinearLayoutManager(SecondFragment.this.getActivity()));
44.         clv.setHasFixedSize(true);
45.         clv.setAdapter(itemsAdapter);
46. 
    
47.     }
48. }

ThirdFragment.java

1. package test.ku.codedivas.sampleapp;
2. 
   
3. import android.os.Bundle;
4. import android.support.annotation.Nullable;
5. import android.support.v4.app.Fragment;
6. import android.support.v7.widget.LinearLayoutManager;
7. import android.support.v7.widget.RecyclerView;
8. import android.view.LayoutInflater;
9. import android.view.View;
10. import android.view.ViewGroup;
11. import java.util.ArrayList;
12. 
    
13. public class ThirdFragment extends Fragment {
14.     @Nullable
15.     @Override
16.     public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
17.         View rootView = inflater.inflate(R.layout.fragment_layout,container, false);
18.         return rootView;
19.     }
20.     @Override
21.     public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
22.         super.onViewCreated(view, savedInstanceState);
23. 
    
24.         final ArrayList<RecyclerViewModel> pname = new ArrayList<RecyclerViewModel>();
25. 
    
26.         pname.add(new RecyclerViewModel("Alpha"));
27.         pname.add(new RecyclerViewModel("Beta"));
28.         pname.add(new RecyclerViewModel("Cupcake"));
29.         pname.add(new RecyclerViewModel("Donut"));
30.         pname.add(new RecyclerViewModel("Eclairs"));
31.         pname.add(new RecyclerViewModel("Froyo"));
32.         pname.add(new RecyclerViewModel("GingerBread"));
33.         pname.add(new RecyclerViewModel("HoneyComb"));
34.         pname.add(new RecyclerViewModel("IceCreamSandwich"));
35.         pname.add(new RecyclerViewModel("JellyBean"));
36.         pname.add(new RecyclerViewModel("KitKat"));
37.         pname.add(new RecyclerViewModel("Lollipop"));
38.         pname.add(new RecyclerViewModel("MarshMallow"));
39.         pname.add(new RecyclerViewModel("Nougat"));
40. 
    
41.         final RecyclerViewAdapter itemsAdapter = new RecyclerViewAdapter(ThirdFragment.this.getActivity(), pname, null);
42.         final RecyclerView clv = (RecyclerView) view.findViewById(R.id.clist);
43.         clv.setLayoutManager(new LinearLayoutManager(ThirdFragment.this.getActivity()));
44.         clv.setHasFixedSize(true);
45.         clv.setAdapter(itemsAdapter);
46. 
    
47.     }
48. }

In order to show Recycler View in each fragment of ViewPager, the layout code should be like this:

fragment_layout.xml

1. <?xml version="1.0" encoding="utf-8"?>
2. <android.support.v7.widget.RecyclerView
3. xmlns:android="http://schemas.android.com/apk/res/android"
4.     xmlns:app="http://schemas.android.com/apk/res-auto"
5.     android:layout_width="match_parent"
6.     android:layout_height="match_parent"
7.     android:id="@+id/clist"
8.     android:drawSelectorOnTop="true"
9.     android:background="#D0D0D0"
10.     app:layout_scrollFlags="scroll|enterAlways"
11.     app:layout_behavior="@string/appbar_scrolling_view_behavior" />

Now, when we need to call next activity on sliding menu item click then we need to create new Activity and its layout and call it from MainActivity of sliding menu (Navigation Drawer).

The code for new activity should be like this:

NextActivity.java

1. package test.ku.codedivas.sampleapp;
2. 
   
3. import android.support.v7.app.AppCompatActivity;
4. import android.os.Bundle;
5. 
   
6. public class NextActivity extends AppCompatActivity {
7. 
   
8.     @Override
9.     protected void onCreate(Bundle savedInstanceState) {
10.         super.onCreate(savedInstanceState);
11.         setContentView(R.layout.activity_next);
12. 
    
13.         getSupportActionBar().setDisplayHomeAsUpEnabled(true);
14.     }
15. 
    
16.  @Override 
17. public void onBackPressed() {
18. finish();
19. }
20. }

In layout file, any layout can be created according the user.

The code for layout could be like this:

activity_next.xml

1. <?xml version="1.0" encoding="utf-8"?>
2. 
   
3. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
4.     android:id="@+id/activity_next"
5.     android:layout_width="match_parent"
6.     android:layout_height="match_parent"
7.     android:layout_gravity="center_vertical"
8.     android:gravity="center_vertical"
9.     android:orientation="vertical">
10. 
    
11.     <TextView
12.         android:id="@+id/tv1"
13.         android:layout_width="match_parent"
14.         android:layout_height="wrap_content"
15.         android:text="Hi"
16.         android:gravity="center"
17.         android:textSize="40sp"/>
18. 
    
19.     <TextView
20.         android:layout_width="match_parent"
21.         android:layout_height="wrap_content"
22.         android:gravity="center"
23.         android:text="Inside NextActivity"
24.         android:textSize="30sp"/>
25. 
    
26. </LinearLayout>

Note: In this project, I use Toolbar as ActionBar, so the project theme is "No Action Bar" theme.

styles.xml

1. <resources>
2. 
   
3. <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
4. <!-- Customize your theme here. -->
5. <item name="colorPrimary">@color/colorPrimary</item>
6. <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
7. <item name="colorAccent">@color/colorAccent</item>
8. </style>
9. 
   
10. </resources>

The manifest file should be like this:

AndroidManifest.xml

1. <?xml version="1.0" encoding="utf-8"?>
2. <manifest xmlns:android="http://schemas.android.com/apk/res/android"
3.     package="test.ku.codedivas.sampleapp">
4. 
   
5.     <application
6.         android:allowBackup="true"
7.         android:icon="@mipmap/ic_launcher"
8.         android:label="@string/app_name"
9.         android:supportsRtl="true"
10.         android:theme="@style/AppTheme">
11.         <activity
12.             android:name=".MainActivity"
13.             android:label="@string/app_name"
14.             android:theme="@style/AppTheme.NoActionBar">
15.             <intent-filter>
16.                 <action android:name="android.intent.action.MAIN" />
17.                 <category android:name="android.intent.category.LAUNCHER" />
18.             </intent-filter>
19.         </activity>
20.         <activity android:name=".NextActivity"
21.             android:label="@string/activityname"
22.             android:parentActivityName=".MainActivity">
23.             <meta-data
24.                 android:name="android.support.PARENT_ACTIVITY"
25.                 android:value=".MainActivity"/>
26.         </activity>
27.     </application>
28. 
    
29. </manifest>

Running Application

Demo Video :

Output should be like: 

On clicking at the NavigationView's list item:

Toast Method on clicking the RecyclerView item:

On clicking at the NavigationView's list item and calling Next Activity:

Conclusions

Through this post, I hope you could learn about  combining the popular and powerful widgets in developing Android Application. Further, you can subscribe my blog  to get the newest tutorials..!