Tab View Inside Navigation Drawer for android

Tab View inside Navigation Drawer image logicchip 3

To create a project that displays Tab View inside navigation drawer selection. By simple step by step process. It’s simple to combine tab view inside navigation drawer. First start by creating a “Navigation Drawer Activity” in android studio (assuming you are aware of those things). Second part is to create a fragments to handle the navigation drawer activities.

This flow chart may help you to better understand what we want to achieve.

Tab View inside Navigation Drawer image logicchip 1

FragmentA contains the Tablayout (Tab View) and view pager, the navigation drawer pass id to FragmentA it displays tabs and content to be displayed in the viewpager according to the navigation drawer and tab selected. In this case the id passed is the name of navigation drawer menu.

Tab View inside Navigation Drawer image logicchip4

This project contains.

MainActivity.java => Navigation Drawer Activity.

FragmentA.java => Fragment containing Tab View.

FragmentB.java => Fragment for viewpager.

FragmentC.java => Fragment for running first and menu without tabs.

Constants.java => Class file for keeping constant values.

SectionsPageAdapter.java => It’s a Fragment Page Adapter to handle FragmentB from FragmentA.

OnFragmentInteractionListener.java => for handling communication between Fragment and parent activity.

Below is a simple step by step explanation.


1.Constants.java

 

This class contain only key values for passing data to fragments.

 

2.OnFragmentInteractionListener.java

 

A simple interface for communicating between fragments and parent activity.

 

3. FragmentC.java

 

This fragment is only for displaying message of those menu that don’t have any tabs. The arguments are the name of navigation menu name (id).

fragment_c.xml



 

4. FragmentB.java

 

FragmentB is for displaying the contents of the tab selected. The arguments are the name of the selected tabs (id).

fragment_b.xml

 

5. SectionsPageAdapter.java

 

This class file is an adapter for handling instance of tabs selected, which displays contents of FragmentB according to the tab selected. It extents FragmentPagerAdapter class.

 

6. FragmentA.java

 

This fragment contains tablayout and viewpager. FragmentB is displayed inside viewpager. FragmentA is placed inside the parent activity, so when clicking a menu item it displays Parent Activity and inside it FragmentA with Tabs and Viewpager also FragmentB inside Viewpager.
This figure shows how it’s implemented.

Tab View Inside Navigation Drawer logicchip 2

 

fragment_a.xml

 

7. MainActivity.java

The mainactivity.java is the launcher activity (parent activity) it implements navigation item selected listener and OnFragmentInteractionListener (our 2nd step mentioned above). Coding take place in the “onNavigationItemSelected (MenuItem item)” method, handling the menu items clicks. Another method name “homeFragment ()” is also created to display when starting up otherwise we get a blank screen when starting. Back pressed method “onBackPressed ()” is slightly modified to handle back click for selected drawer menu item. All the other things we need are already included in the template “Navigation Drawer Activity in Android Studio”.
Because it’s Navigation Drawer it contains more than one xml file.

app_bar_main.xml

Download full source code for free

You Might Also Like

29 Replies to “Tab View Inside Navigation Drawer for android”

  1. Hi Akhil Ashok,

    Thanks for your code, but how to change the tab name and become individual ?

    Thanks &Regards,
    Anakin

    1. use string array for naming.
      private String[] tabNames = {
      “a”,
      “b”,
      “c”,…….
      };
      tabLayout.addTab(tabLayout.newTab().setText(tabNames(i)));

      use this. hope this helps

  2. Hi Akhil
    Is it posible to change the thickness of the Top bar, right now it looks to be higher than the tabs and i would like to have it on de same level so ik looks smoother
    Ruben

  3. Hi Akhil,

    thanks for the Sample.
    I compile it with Android Studio 3 and run with Emulator and Android 8.
    The problem is, that I get a shadow between toolbar and tabbar. Your picture at the beginning didn’t has this ??
    do you have any idea why ?

    Thanks & Regards Hans

  4. hellos thanks for the tutorial but my application does not look like yours because there is a separation line between the tablayout and the frame layout please help me out i want to have to have them inside the toolbar as on

    1. FragmentA and SectionsPagerAdapter decide whats the result of the selected tab, The results are shown in a reused FragmentB. You can simply modify SectionsPagerAdapter to show multiple fragments. A small example is shown below.

      public Fragment getItem(int position) {
      if(tabName.get(position).equals(“Import 0”){

      FragmentX comn=new FragmentX();
      return comn.newInstance(tabName.get(position));
      }else{

      FragmentB comn=new FragmentB();
      return comn.newInstance(tabName.get(position));
      }
      }

      1. hello im korean
        I do not have enough English. I want you to understand.

        i want tab(ex import 0,1,2,~) add new fragment (ex new blink fragment ->fragment_one)
        but i don
        t know ㅠㅠ

        plz new source Example or detail skil

        Thank you!

Leave a Reply