Android Tablayout tabs with notification badge like whatsApp

Question

I want to implement notification badge with android.support.design.widget.TabLayout. I had tried my best effort to implement it but fails.

Any help would by greatly appreciated.

Just create a relative layout for the tab and add textview in it. Then on run time change its text. — Nouman Ghaffar, Aug 12 '15 at 14:31
would you provide, me a demo of the app?? as i had tried my every possible way to do this. — Arjun sharma, Aug 12 '15 at 14:43
https://github.com/natuan241/Android-Design-Support-Library-Sample, I am using the following code for navigation — Arjun sharma, Aug 12 '15 at 15:07
Add a customview to your tablayout tabs and you can attach a badge from https://github.com/jgilfelt/android-viewbadger easily — Benoit, Sep 04 '15 at 11:05
Benoit, viewbadger didn't work for TabLayout..you can check it — Arjun sharma, Sep 07 '15 at 07:17
@Arjunsharma im using Tablayout, and my badge is at the last of my Tabs because im using only one Tab id , idont know how to give each tab a diffrent id ,plz help — Sandeep Singh, Apr 08 '16 at 23:17
you can also use this library https://github.com/rahimlis/badgedtablayout — rahimli, Jan 21 '18 at 21:29
Check this https://stackoverflow.com/questions/40896907/can-a-custom-view-be-used-as-a-tabitem/51151541#51151541 — Ashwin H, Jul 03 '18 at 09:58

mikepenz · Answer 1 · 2019-06-03T08:44:00.370

EDIT: UPDATE

With the newest release of the Material Components, the Android team now offers an official BadgeDrawable to be used on the TabLayout to achieve the asked result. It is part of the v1.1.0-alpha07 update. https://github.com/material-components/material-components-android/releases/tag/1.1.0-alpha07

The usage is very simple and can be done as following:

tabLayout.getTabAt(0).showBadge().setNumber(1);

See the integration in the material components demo app: https://github.com/material-components/material-components-android/commit/111cd001f5302bd6899f181ab7ccea2fd4002f63#diff-bf3e9a8a208f0ecab05088823fba99c4R239

OLD ANSWER

I tried some of the above mentioned solutions, but they did not deliver proper results. If you take a closer look in the TabLayout implementation you will realize that the TabView will try to get the textView and iconView from the CustomView if applied.

So instead of doing some hacky implementations I rather came up with a layout equal to the one from the original TabView but an additional view which can have a badge.

So you will need the badged_tab.xml layout

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

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="4dp"
        android:layout_marginTop="4dp">

        <ImageView
            android:id="@android:id/icon"
            android:layout_width="24dp"
            android:layout_height="24dp"
            android:scaleType="centerInside" />

        <TextView
            android:id="@android:id/text1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:ellipsize="end"
            android:gravity="center"
            android:maxLines="2" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/badgeCotainer"
        android:layout_width="wrap_content"
        android:layout_height="16dp"
        android:layout_marginStart="12dp"
        android:background="@drawable/notifications_background"
        android:gravity="center"
        android:minWidth="16dp"
        android:visibility="gone">

        <TextView
            android:id="@+id/badge"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAlignment="center"
            android:textColor="#fff"
            android:textSize="10sp" />
    </LinearLayout>
</RelativeLayout>

And some sort of notification background:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="@color/red" />
</shape>

When adding your tab programatically just call

tab.setCustomView(R.layout.badged_tab);

And then you can show / hide / set a badge cound at any time via:

if(tab != null && tab.getCustomView() != null) {
    TextView b = (TextView) tab.getCustomView().findViewById(R.id.badge);
    if(b != null) {
        b.setText(notifications + "");
    }
    View v = tab.getCustomView().findViewById(R.id.badgeCotainer);
    if(v != null) {
        v.setVisibility(View.VISIBLE);
    }
}

I used this approach, and it worked for me. I adapted this solution to add a custom view that contained the badge, and then simply setCustomView(null) to remove it when it wasn't needed in the UI. Creating a custom view that has the same spacings and margins is important so you get a seamless transition to the default view for the respective tab. I used this successfully with TabLayouts. Alternatively, you can use a custom view on all tabs and switch between badge and non-badged layouts as required if you're having trouble with UI consistency between them. — angryITguy, May 09 '17 at 00:49
This worked for me, but for any others finding this post, can you add android:orientation="vertical" to the first Linear Layout in badged_tab.xml? I believe that is the desired result. — Robert Bentley, May 31 '19 at 19:41
Please note that there is now a better way via the latest material components update — mikepenz, Jun 03 '19 at 08:44
but this material design shows badge counter on my TabTitle ,,it looks creeep...Is there any way I can give orientation or gravity to badge counter? — Android Geek, Jul 12 '19 at 05:26
For newer version for material TabLayout you can use getOrCreateBadge() tabLayout.getTabAt(0).getOrCreateBadge() .setNumber(1); — Cjames, Nov 07 '19 at 05:00
How to use the updated answer? I'm unable to access BadgeDrawable. What import library should I put in my gradle? — luhluh, Dec 02 '19 at 00:12
did showBadge() get removed? It's also no longer available for bottomnavigationview, but getOrCreateBadge it there — behelit, Jul 01 '20 at 03:14
Getting @id/text is private when using the @android:id notation — user1114, Apr 26 '21 at 16:27

score 16 · Answer 2 · edited May 03 '16 at 03:35

16

I would suggest you look at this website:

https://guides.codepath.com/android/Google-Play-Style-Tabs-using-TabLayout#design-support-library

You can iterate through the different tabs using this method and set the custom views to whatever you want:

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

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

}

edited May 03 '16 at 03:35

Anirudh Sharma

7,968
13
40
42

answered Sep 22 '15 at 09:13

Simon

19,658
27
149
217

1

i tried this and its working, but if for example i selected the custom tab and want the tab to return to its default view after that (having normal and selected color) like the other tabs, how can i do that – Rashad.Z Oct 02 '15 at 13:42
This should be the accepted answer. Works perfectly fine with great explanation in the link. – Shubhral Mar 14 '17 at 14:00
it's working but how to set default width and height like other tabs? – vishal patel May 25 '17 at 09:28

score 7 · Accepted Answer · answered Oct 01 '15 at 14:17

7

My solution to this was using https://github.com/jgilfelt/android-viewbadger and setting a custom view to each tab:

My tabs have only icons so I used ImageView, but I believe you can use any other view, check https://github.com/jgilfelt/android-viewbadger/blob/master/README.markdown:

private BadgeView badge;

Tab tab = tabLayout.getTabAt(position);
ImageView imageView = new ImageView(context);
tab.setCustomView(imageView);
badge = new BadgeView(context, imageView);

answered Oct 01 '15 at 14:17

lucas_sales

129
2

14

this library is deprecated now – Ibrahim Gharyali Jan 23 '17 at 07:09
it works for me thanks! – neo Oct 22 '21 at 03:43

score 5 · Answer 4 · answered Sep 06 '19 at 19:05

This is an old cuestion, but Its much more simple these days. Im using Kotlin, AndroidX, using the next widget as TabLayout:

com.google.android.material.tabs.TabLayout

and inside my gradel app file:

implementation 'com.google.android.material:material:1.1.0-alpha09'

For setting a simple badge, just write..

yourTabLayout?.getTabAt(currentTabPosition)?.apply{
                        orCreateBadge
                        badge?.isVisible = true
                    }

Then just set isVisible = false to hide, like this:

private fun changeYourTabMethod(newTabPosition : Int) {
    // do some stuff and then hide the badge...
    yourTabLayout?.getTabAt(newTabPosition)?.apply{
        badge?.isVisible = false
    }
}

score 5 · Answer 5 · answered Jan 13 '20 at 03:54

5

I will use this:

  tabLayout.getTabAt(0).getOrCreateBadge().setNumber(10);

answered Jan 13 '20 at 03:54

Javier Monzon

59
1
1

Depreciated. not available in androidx anymore. – Satyajit Mar 02 '20 at 06:32
@SatyajitDas TabLayout is a part of Material Components for Android rather than AndroidX now. You should switch to the former. – TonnyL Jan 19 '21 at 06:05

score 3 · Answer 6 · answered Dec 25 '16 at 10:54

I don' know why but none of the above answers worked for me :(

I have my own Solution that is gonna make the same tablayout as the whatsapp with that badge :)

First make a custom tab Layout as custom_tab

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="48dp"
android:padding="12dp">

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:orientation="horizontal">

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Calls"
        android:textColor="@drawable/tab_text_color_selector"
        android:textSize="@dimen/large_text" />

    <TextView
        android:id="@+id/tv_count"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_marginLeft="6dp"
        android:background="@drawable/badge_background"
        android:gravity="center"
        android:text="99"
        android:textColor="@color/colorPrimary"
        android:textSize="@dimen/medium_text" />

</LinearLayout>

</RelativeLayout>

Second a badge_background

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item xmlns:android="http://schemas.android.com/apk/res/android">
    <shape android:shape="oval">
        <solid android:color="@drawable/tab_text_color_selector" />
    </shape>
</item>
</layer-list>

Third a tab_color_selector

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
     <item android:color="@color/colorTextPrimary"android:state_selected="true" />
<item android:color="@color/colorAccent"/>
 </selector>

Fourth in your activity

    viewPager = (ViewPager) findViewById(R.id.viewpager);
    viewPager.setOffscreenPageLimit(3);
    setupViewPager(viewPager);

    //Initializing the tablayout
    tabLayout = (TabLayout) findViewById(R.id.tablayout);
    tabLayout.setupWithViewPager(viewPager);

    try
    {
        setupTabIcons();
    }
    catch (Exception e)
    {
        e.printStackTrace();
    }

Fifth Define setupTabIcons and prepareTabView methods

  private void setupTabIcons()
{

    for(int i=0;i<tabTitle.length;i++)
    {
        /*TabLayout.Tab tabitem = tabLayout.newTab();
        tabitem.setCustomView(prepareTabView(i));
        tabLayout.addTab(tabitem);*/

        tabLayout.getTabAt(i).setCustomView(prepareTabView(i));
    }
    }

 String[] tabTitle={"LOL!","LOL@","LOL#"};
int[] unreadCount={1,3,3};

private View prepareTabView(int pos) {
    View view = getLayoutInflater().inflate(R.layout.custom_tab,null);
    TextView tv_title = (TextView) view.findViewById(R.id.tv_title);
    TextView tv_count = (TextView) view.findViewById(R.id.tv_count);
    tv_title.setText(tabTitle[pos]);
    if(unreadCount[pos]>0)
    {
        tv_count.setVisibility(View.VISIBLE);
        tv_count.setText(""+unreadCount[pos]);
    }
    else
        tv_count.setVisibility(View.GONE);


    return view;
    }

I might have left something during answering this question, Just ping me, I would be happy to help :D

Thanks, as your case, none of above solution worked for me, but yours worked nice. — Mahdi, Jul 24 '17 at 04:25

score 2 · Answer 7 · answered Mar 04 '22 at 09:12

Answer working in 2022

Hi there, I am bit late to answer but as of now with Material components you don't have to look for any custom view or third party library

I am using com.google.android.material.tabs.TabLayout with androidx.viewpager2.widget.ViewPager2 and it is working fine

val requestsTab = viewBinding.tabLayout.getTabAt(2)
            val orCreateBadge = requestsTab?.orCreateBadge
            orCreateBadge?.number=10
            orCreateBadge?.backgroundColor = resources.getColor(R.color.blue,context?.theme)
            orCreateBadge?.badgeTextColor =  resources.getColor(R.color.white,context?.theme)

score 0 · Answer 8 · answered Dec 06 '15 at 23:24

0

just use this trick :

BadgeView bv1 = new BadgeView(this, ((ViewGroup) tabLayout.getChildAt(0)).getChildAt(0));

answered Dec 06 '15 at 23:24

Navidonline

98
1
2
7

8

what is BadgeView? – behelit May 02 '16 at 00:32
3

He is referring to the [ViewBadger](https://github.com/jgilfelt/android-viewbadger/blob/master/README.markdown) Library,to add badges to views.Keep in mind this library is now deprecated. – Pugin Mar 09 '17 at 16:57

score 0 · Answer 9 · answered May 20 '21 at 19:10

0

In kotlin, works:

if(list.isNotEmpty()) {
    mTlSaved.getTabAt(0)?.orCreateBadge?.number = list.size
}

answered May 20 '21 at 19:10

Carlos Galindo

101
1
6

score 0 · Answer 10 · answered Jul 14 '22 at 12:04

0

binding.tabLayout.getTabAt(0)?.orCreateBadge?.number = 5

answered Jul 14 '22 at 12:04

ItSNeverLate

533
7
8

1

For completeness, please always explain your answer – Rohit Gupta Jul 15 '22 at 03:11

score -1 · Answer 11 · answered Mar 06 '19 at 13:25

-1

I suggest use a CustomView for tabs. you can create a new view with badge and set that to your tabs.

tab.setCustomView(R.layout.badged_tab);

answered Mar 06 '19 at 13:25

Majid Khosravi

129
2
4

score -8 · Answer 12 · answered Oct 19 '15 at 03:39

-8

There are easy way as well. Just append a special characters behind. It will look like whatsapp does.

➀ ➁ ➂ ➃ ➄ ➅ ➆ ➇ ➈ ➉ ➊ ➋ ➌ ➍ ➎ ➏ ➐ ➑ ➒ ➓

tabLayout.addTab(tabLayout.newTab().setText("News " + ➊));

answered Oct 19 '15 at 03:39

Jason

878
2
9
21

how can i write my own number in special characters? – MSepehr Apr 01 '16 at 07:51
2

@Jason, then how to dynamically change that value ? – Sandeep Singh Apr 08 '16 at 23:12
2

This seems only valid if the badge number is below 11 or if you create your custom font with more numbers – jeprubio May 04 '16 at 08:33
This seems to be not a comprehensive solution. – Mahdi Jul 24 '17 at 04:03
Even web environment doesn't use this way. – wonsuc Sep 19 '17 at 20:42
This answer must be removed – Anatolii Shuba Jul 18 '21 at 23:54

Android Tablayout tabs with notification badge like whatsApp

12 Answers12

Linked