Can a custom view be used as a TabItem?

Try to use code below

private View mCustomView;
private ImageView mImageViewCustom;
private TextView mTextViewCustom;
private int count = 0;

public View getCustomTab() {
    mCustomView = LayoutInflater.from(NewHomePageActivity.this).inflate(R.layout.custom_tab, null);
    mImageViewCustom = (ImageView) mCustomView.findViewById(R.id.custom_tab_imageView);
    mTextViewCustom = (TextView) mCustomView.findViewById(R.id.custom_tab_textView_count);
    if (count > 0) {
        mTextViewCustom.setVisibility(View.VISIBLE);
        mTextViewCustom.setText(String.valueOf(count));
    } else {
        mTextViewCustom.setVisibility(View.GONE);
    }
    return mCustomView;
}

private void setupTabIcons() {
    tabLayout.getTabAt(0).setIcon(R.mipmap.ic_home_gray_48);
    tabLayout.getTabAt(1).setIcon(R.mipmap.ic_follow_gray_48);
    tabLayout.getTabAt(2).setIcon(R.mipmap.ic_follower_gray_48);
    tabLayout.getTabAt(3).setIcon(R.mipmap.ic_news_event_gray_48);
    tabLayout.getTabAt(4).setCustomView(getCustomTab());
    tabLayout.getTabAt(5).setIcon(R.mipmap.ic_menu_gray_48);
}

XML

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimary">

    <ImageView
        android:id="@+id/custom_tab_imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@mipmap/ic_bell_gray_48"
        android:contentDescription="@string/image_dsc" />

    <TextView
        android:id="@+id/custom_tab_textView_count"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:layout_marginEnd="5dp"
        android:layout_marginRight="5dp"
        android:layout_marginBottom="5dp"
        android:background="@drawable/shape_circle"
        android:padding="2dp"
        android:text="1"
        android:textColor="@color/colorWhite"
        android:textSize="11sp" />

</FrameLayout>

In certain cases, instead of the default tab view we may want to apply a custom XML layout for each tab. To achieve this, iterate over all the TabLayout.Tabs after attaching the sliding tabs to the pager:

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // Get the ViewPager and set it's PagerAdapter so that it can display items
        ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
        SampleFragmentPagerAdapter pagerAdapter = 
            new SampleFragmentPagerAdapter(getSupportFragmentManager(), MainActivity.this);
        viewPager.setAdapter(pagerAdapter);

        // Give the TabLayout the ViewPager
        TabLayout tabLayout = (TabLayout) findViewById(R.id.sliding_tabs);
        tabLayout.setupWithViewPager(viewPager);

        // Iterate over all tabs and set the custom view
        for (int i = 0; i < tabLayout.getTabCount(); i++) {
            TabLayout.Tab tab = tabLayout.getTabAt(i);
            tab.setCustomView(pagerAdapter.getTabView(i));
        }
    }

    //...
} 

Next, we add the getTabView(position) method to the SampleFragmentPagerAdapter class:

public class SampleFragmentPagerAdapter extends FragmentPagerAdapter {
   private String tabTitles[] = new String[] { "Tab1", "Tab2" };
   private int[] imageResId = { R.drawable.ic_one, R.drawable.ic_two };

    public View getTabView(int position) {
        // Given you have a custom layout in `res/layout/custom_tab.xml` with a TextView and ImageView
        View v = LayoutInflater.from(context).inflate(R.layout.custom_tab, null);
        TextView tv = (TextView) v.findViewById(R.id.textView);
        tv.setText(tabTitles[position]);
        ImageView img = (ImageView) v.findViewById(R.id.imgView);
        img.setImageResource(imageResId[position]);
        return v;
    }

} 

With this you can setup any custom tab content for each page in the adapter.

SOURCE

you can use any layout for each tab item. Firstly add TabItems to TabLayout like that; (my layout has 2 textview and 1 image for each tab)

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tabLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_constraintTop_toTopOf="parent">

    <com.google.android.material.tabs.TabItem
        android:id="@+id/ti_payroll_tab_tab1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout="@layout/your_custom_layout" />

    <com.google.android.material.tabs.TabItem
        android:id="@+id/ti_payroll_tab_tab2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout="@layout/your_custom_layout" />
</com.google.android.material.tabs.TabLayout>

Then you must find and set views in custom layout.

TabLayout.Tab tab1 = tabLayout.getTabAt(0);

tvTab1Title = tab1.getCustomView().findViewById(R.id.txt_payroll_tab_title);
tvTab1Value = tab1.getCustomView().findViewById(R.id.txt_payroll_tab_value);
ivTab1 = tab1.getCustomView().findViewById(R.id.img_payroll_tab_image);