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

Golap Gunjan Barman
Mar 8 · 3 min read

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

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

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);
}
}
}

Here, we are not creating an extra adapter java class, here we create an inner class for the adapter.

Output:

You can follow me on YouTube:

Also, visit my website/blog:

Follow me on Instagram

Follow me on Facebook

Nerd For Tech

From Confusion to Clarification

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store