Nerd For Tech
Published in

Nerd For Tech

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

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

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:

Golap Barman

Also, visit my website/blog:

www.gbandroidblogs.com

Follow me on Instagram

Android App Developer

Follow me on Facebook

GBAndroidBlogs

--

--

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
Golap Gunjan Barman

Golap Gunjan Barman

Hi everyone, myself Golap an Android app developer with UI/UX designer.