Can A Custom View Be Used As A Tabitem?

The TabLayout class in android provides you with a TabItem that can let you specify a text and a icon. Is it possible to use a custom view as a TabItem? My tab would look like thi

Solution 1:

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:

publicclassMainActivityextendsAppCompatActivity {

    @OverrideprotectedvoidonCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

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

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

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

    //...
} 

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

publicclassSampleFragmentPagerAdapterextendsFragmentPagerAdapter {
   private String tabTitles[] = newString[] { "Tab1", "Tab2" };
   privateint[] 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 ImageViewViewv= LayoutInflater.from(context).inflate(R.layout.custom_tab, null);
        TextViewtv= (TextView) v.findViewById(R.id.textView);
        tv.setText(tabTitles[position]);
        ImageViewimg= (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

Solution 2:

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

Solution 3:

Try to use code below

private View mCustomView;
private ImageView mImageViewCustom;
private TextView mTextViewCustom;
privateint 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;
}

privatevoidsetupTabIcons() {
    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"?><FrameLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="wrap_content"android:layout_height="wrap_content"android:background="@color/colorPrimary"><ImageViewandroid: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" /><TextViewandroid: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>

Solution 4:

Documents are very poor on this topic. We can use setCustomView method of tabs to set custom view. Following is a working example:

tab_layout.xml

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tabLayout"
    android:layout_width="match_parent"
    android:layout_height="@dimen/tab_height"
    android:background="@color/primary_dark" />

custom_tab_item.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="@dimen/tab_height"
    android:orientation="horizontal"
    android:padding="@dimen/tab_padding">

    <ImageView
        android:id="@+id/tabIcon"
        android:layout_width="@dimen/tab_icon"
        android:layout_height="@dimen/tab_icon"
        android:layout_centerVertical="true"/>

    <TextView
        android:id="@+id/tabTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toEndOf="@+id/tabIcon"
        android:textColor="@color/white" />

    <TextView
        android:id="@+id/tabSubTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/tabTitle"
        android:layout_toEndOf="@+id/tabIcon"
        android:textColor="@color/white" />

</RelativeLayout>

MainActivity.kt

TabLayoutMediator(binding.tabLayout, binding.viewPager) { tab, position ->
            when (position) {
                0 -> {
                    tab.setCustomView(R.layout.tab_item)
                    tab.customView?.findViewById<ImageView>(R.id.tabIcon)
                        ?.setImageResource(R.drawable.tab1)
                    tab.customView?.findViewById<TextView>(R.id.tabTitle)?.setText(R.string.tab1)
                }
                1 -> {
                    tab.setCustomView(R.layout.tab_item)
                    tab.customView?.findViewById<ImageView>(R.id.tabIcon)
                        ?.setImageResource(R.drawable.tab2)
                    tab.customView?.findViewById<TextView>(R.id.tabTitle)
                        ?.setText(R.string.tab2)
                }
            }
        }.attach()