Android Material TabLayout using Fragments | Badges in TabLayout | Android Studio | Java

Published in

Nerd For Tech

3 min readMar 8, 2021

Android Material TabLayout using Fragments | Badges in TabLayout | Android Studio | Java

In this tutorial, we’re going to create a material tab layout using fragments. Here we’re going to see how to add badges to the tab layout.

You can also visit the previous tutorial on how to create a simple tab layout in android. CLICK HERE.

Now let’s see what you’re going to see in this tutorial:

Let’s create it

Step 1: Add the dependency

add the google material dependency in the build.gradle app file.

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

Step 2: Design the Main Layout

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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"
    tools:context=".RippleTabLayout">
    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="28dp">        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/white"
            android:minHeight="?attr/actionBarSize"/>        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tab_layout"
            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="wrap_content"
        app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

Step 3: Add the Fragments

Here I used three fragments as you see in the above video. So go to the package and create three blank fragments. (package/new/blank fragment).

First Fragment: Android

Second Fragment: Google Play

Third Fragment: Favourite

Step 4: Add the Functionality

package com.codewithgolap.tablayout;import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentPagerAdapter;
import androidx.viewpager.widget.ViewPager;import android.os.Bundle;import com.codewithgolap.tablayout.Fragments.ChatsFragment;
import com.codewithgolap.tablayout.Fragments.HomeFragment;
import com.codewithgolap.tablayout.Fragments.SettingsFragment;
import com.google.android.material.badge.BadgeDrawable;
import com.google.android.material.tabs.TabLayout;import java.util.ArrayList;
import java.util.List;public class RippleTabLayout extends AppCompatActivity {    private Toolbar toolbar;
    private ViewPager viewPager;
    private TabLayout tabLayout;    private HomeFragment homeFragment;
    private SettingsFragment settingsFragment;
    private ChatsFragment chatsFragment;    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_ripple_tab_layout);        toolbar = findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);        viewPager = findViewById(R.id.view_pager);
        tabLayout = findViewById(R.id.tab_layout);        homeFragment = new HomeFragment();
        settingsFragment = new SettingsFragment();
        chatsFragment = new ChatsFragment();        tabLayout.setupWithViewPager(viewPager);
        //create viewpager adapter
        //here we will create inner class for adapter
        ViewPagerAdapter viewPagerAdapter = new ViewPagerAdapter(getSupportFragmentManager(), 0);        //add fragments and set the adapter
        viewPagerAdapter.addFragment(homeFragment,"");
        viewPagerAdapter.addFragment(settingsFragment,"");
        viewPagerAdapter.addFragment(chatsFragment,"");
        viewPager.setAdapter(viewPagerAdapter);        //set the icons
        tabLayout.getTabAt(0).setIcon(R.drawable.android);
        tabLayout.getTabAt(1).setIcon(R.drawable.google_play);
        tabLayout.getTabAt(2).setIcon(R.drawable.heart);        //set the badge
        BadgeDrawable badgeDrawable = tabLayout.getTabAt(0).getOrCreateBadge();
        badgeDrawable.setVisible(true);
        badgeDrawable.setNumber(5);
    }    private 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);
        }        //add fragment to the viewpager
        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();
        }        //to setup title of the tab layout
        @Nullable
        @Override
        public CharSequence getPageTitle(int position) {
            return fragmentTitles.get(position);
        }
    }
}