web-dev-qa-db-fra.com

Android Onglets Tablayout avec badge de notification comme WhatsApp

Je souhaite implémenter un badge de notification avec Android.support.design.widget.TabLayout. J'avais fait de mon mieux pour le mettre en œuvre mais échoue.

Toute aide serait grandement appréciée.

androidbadgeandroid-tablayout
17
Arjun sharma

Ma solution était d'utiliser https://github.com/jgilfelt/Android-viewbadger et de définir une vue personnalisée pour chaque onglet:

Mes onglets n'ont que des icônes, j'ai donc utilisé ImageView, mais je pense que vous pouvez utiliser n'importe quelle autre vue, vérifiez 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);
5
lucas_sales

Je vous suggère de consulter ce site Web:

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

Vous pouvez parcourir les différents onglets à l'aide de cette méthode et définir les vues personnalisées comme vous le souhaitez:

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

}
16
Simon

Je ne sais pas pourquoi mais aucune des réponses ci-dessus n'a fonctionné pour moi :(

J'ai ma propre solution qui va faire le même tablayout que le whatsapp avec ce badge :)

Créez d'abord un onglet personnalisé en tant que 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>

Seconder un 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>

Troisièmement, un 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>

Quatrième de votre activité

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

Cinquième définition des méthodes setupTabIcons et prepareTabView

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

J'ai peut-être laissé quelque chose lors de la réponse à cette question, envoyez-moi un ping, je serais heureux de vous aider: D

2
codepeaker

C'est une vieille cuestion, mais c'est beaucoup plus simple de nos jours. J'utilise Kotlin, AndroidX, en utilisant le widget suivant comme TabLayout:

com.google.Android.material.tabs.TabLayout

et à l'intérieur de mon fichier d'application gradel:

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

Pour définir un simple badge, il suffit d'écrire ..

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

Ensuite, définissez isVisible = false pour masquer, comme ceci:

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

Je suggère d'utiliser un CustomView pour les onglets. vous pouvez créer une nouvelle vue avec badge et la définir dans vos onglets.

tab.setCustomView(R.layout.badged_tab);
0
Majid Khosravi

utilisez simplement cette astuce:

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