Material Design Tab Layout with child tab layout in Android

Material Design Tab Layout with child tab layout in Android

 

In this tutorial, we will learn about how to create a Tab Layout with child tabs in Android App.

For single tab layout tutorial,see here

Official Documentation of TabLayout

Material Design Child tab layout in Android

Use Material design library in app-level build.gradle

  implementation 'com.google.android.material:material:1.5.0'  

style.xml (App theme)

 <style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">  
     <!-- Customize your theme here. -->  
     <item name="colorPrimary">@color/colorPrimary</item>  
     <item name="colorPrimaryDark">@color/colorPrimaryDark</item>  
     <item name="colorAccent">@color/colorAccent</item>  
   </style>  

• Create One Main Activity to handle top 3 fragments in a Tab Layout.
• Create tab layout and view pager in activity main.
• Create 3 Parent Fragments to show in Tab Layout.
• Create Tab Layout in your parent fragment and use another 3 child fragments in that Tab Layout.

For. example,

• We have a Main activity (in XML, tab layout and view pager) in Java class (added 3 parent fragments and use with Tab Layout of Main activity).
• Now in our parent fragment (in XML, tab layout and view pager) in fragment (added 3 child fragment and use with parent fragment tab layout).
• Only change is where we use getsupportfragmentmanager() in parent fragment. We use getchildfragmentmanager for child fragments. 

Let's try it practical

Our all fragments and child fragments code are same, design it accordingly.

Child Fragment.xml

 <?xml version="1.0" encoding="utf-8"?>  
 <FrameLayout 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:orientation="vertical">  
   <TextView  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content"  
     android:gravity="center"  
     android:layout_gravity="center"  
     android:text="Morning Fragment"  
     android:textStyle="bold" />  
 </FrameLayout>  

Child Fragment class

 public class Morning_fragment extends Fragment {  
   public Yesterday_fragment() {  
     // Required empty public constructor  
   }  
   @Override  
   public View onCreateView(LayoutInflater inflater, ViewGroup container,  
                Bundle savedInstanceState) {  
     // Inflate the layout for this fragment  
     return inflater.inflate(R.layout.fragment_yesterday_fragment, container, false);  
   }  
 }  

 

Parent fragment xml

 <?xml version="1.0" encoding="utf-8"?>  
 <RelativeLayout 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:orientation="vertical">  
   <com.google.android.material.tabs.TabLayout  
     android:id="@+id/tabs_layout"  
     android:layout_width="match_parent"  
     android:layout_height="wrap_content"/>  
 <androidx.viewpager.widget.ViewPager  
 android:id="@+id/view_pager"  
 android:layout_width="match_parent"  
 android:layout_height="wrap_content"  
 app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior"/>  
 </RelativeLayout>  

Parent Fragment Class

 public class Yesterday_fragment extends Fragment {  
   TabLayout tabLayout;  
   ViewPager view_pager;  
   Morning_fragment morning_fragment;  
   Afternoon_fragment afternoon_fragment;  
   Evening_fragment evening_fragment;  
   public Yesterday_fragment() {  
     // Required empty public constructor  
   }  
   @Override  
   public View onCreateView(LayoutInflater inflater, ViewGroup container,  
                Bundle savedInstanceState) {  
     // Inflate the layout for this fragment  
     View v = inflater.inflate(R.layout.fragment_yesterday_fragment, container, false);  
     tabLayout = v.findViewById(R.id.tabs_layout);  
     view_pager = v.findViewById(R.id.view_pager);  
     morning_fragment = new Morning_fragment();  
     afternoon_fragment = new Afternoon_fragment();  
     evening_fragment = new Evening_fragment();  
     tabLayout.setupWithViewPager(view_pager);  
     ViewPagerAdapter adapter = new ViewPagerAdapter(getChildFragmentManager(),0);  
     adapter.addfragment(morning_fragment,"Morning");  
     adapter.addfragment(afternoon_fragment,"Afternoon");  
     adapter.addfragment(evening_fragment,"Evening");  
     view_pager.setAdapter(adapter);  
     //tab layout created successfully but text not visible of child fragments..  
     tabLayout.getTabAt(0).setText("Morning");  
     tabLayout.getTabAt(1).setText("Afternoon");  
     tabLayout.getTabAt(2).setText("Evening");  
     return v;  
   }  
   public class ViewPagerAdapter extends FragmentPagerAdapter  
   {  
     private List<Fragment> fragments = new ArrayList<>();  
     private List<String> fragmentTitles = new ArrayList<>();  
     public ViewPagerAdapter(FragmentManager manager,int behaviour) {  
       super(manager,behaviour);  
     }  
     public void addfragment(Fragment fragment , String title)  
     {  
       fragments.add(fragment);  
       fragmentTitles.add(title);  
     }  
     @NonNull  
     @Override  
     public Fragment getItem(int position) {  
       return fragments.get(position);  
     }  
     @Override  
     public int getCount() {  
       return fragments.size();  
     }  
   }  
 }  

xml activity

 <?xml version="1.0" encoding="utf-8"?>  
 <LinearLayout 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:orientation="vertical"  
   tools:context=".MaterialDesign.Tabs_Layout">  
   <com.google.android.material.appbar.AppBarLayout  
     android:layout_width="match_parent"  
     android:layout_height="wrap_content">  
     <com.google.android.material.appbar.MaterialToolbar  
       android:layout_width="match_parent"  
       android:layout_height="wrap_content"  
       app:title="Tabs"/>  
     <com.google.android.material.tabs.TabLayout  
       android:id="@+id/tabs_layout"  
       app:tabMode="scrollable"  
       android:layout_width="match_parent"  
       android:layout_height="wrap_content"/>  
   </com.google.android.material.appbar.AppBarLayout>  
   <androidx.viewpager.widget.ViewPager  
     android:id="@+id/view_pager"  
     android:layout_width="match_parent"  
     android:layout_height="match_parent"  
     app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior"/>  
 </LinearLayout>  

Then We will add the fragments to tab layout in our activity class.

activity.java 

 public class Tabs_Layout extends AppCompatActivity {  
   TabLayout tabLayout;  
   ViewPager view_pager;  
   Yesterday_fragment yesterday_fragment;  
   Today_fragment today_fragment;  
   Tomorrow_Fragment tomorrow_fragment;  
   @Override  
   protected void onCreate(Bundle savedInstanceState) {  
     super.onCreate(savedInstanceState);  
     setContentView(R.layout.activity_tabs__layout);  
     tabLayout = findViewById(R.id.tabs_layout);  
     view_pager = findViewById(R.id.view_pager);  
     yesterday_fragment = new Yesterday_fragment();  
     today_fragment = new Today_fragment();  
     tomorrow_fragment = new Tomorrow_Fragment();  
     tabLayout.setupWithViewPager(view_pager);  
     ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager(),0);  
     adapter.addfragment(yesterday_fragment,"Yesterday");  
     adapter.addfragment(today_fragment,"Today");  
     adapter.addfragment(tomorrow_fragment,"Tomorrow");  
     view_pager.setAdapter(adapter);  
     view_pager.setOffscreenPageLimit(3); //how much fragments loaded all time, no need to reload everytime we scroll  
     //here our tab layout now ready  
     //next we can change some layout and some icons and badges to our tablayout  
     //icons to different tab layouts  
     //with only icons also set text to show text also with icons  
     tabLayout.getTabAt(0).setIcon(R.drawable.check_box_tick_20).setText("Yesterday");  
     tabLayout.getTabAt(1).setIcon(R.drawable.check_box_tick_20).setText("Today");  
     tabLayout.getTabAt(2).setIcon(R.drawable.check_box_tick_20).setText("Tomorrow");  
     //badges on tab layout titles  
     BadgeDrawable drawable = tabLayout.getTabAt(0).getOrCreateBadge();  
     drawable.setVisible(true);  
     drawable.setNumber(5);  
   }  
   public class ViewPagerAdapter extends FragmentPagerAdapter  
   {  
     private List<Fragment> fragments = new ArrayList<>();  
     private List<String> fragmentTitles = new ArrayList<>();  
     public ViewPagerAdapter(@NonNull FragmentManager fm, int behavior) {  
       super(fm, behavior);  
     }  
     public void addfragment(Fragment fragment , String title)  
     {  
       fragments.add(fragment);  
       fragmentTitles.add(title);  
     }  
     @NonNull  
     @Override  
     public Fragment getItem(int position) {  
       return fragments.get(position);  
     }  
     @Override  
     public int getCount() {  
       return fragments.size();  
     }  
   }  
 }  

Now, our Tab layout with Child Tab Layout is ready to run..

For single tab layout tutorial,see here

Follow us for more posts like this, 

Subscribe to Harpreet studio on Youtube  
Like Harpreet Studio on Facebook  
Follow me on Instagram

Install our Android app from Google Play store