2
votes

Comment afficher le badge sur les éléments de bottomNavigationView Android?

J'ai vu cette question - Afficher le badge en haut du bas icône de la barre de navigation et a décidé d'ajouter mes propres badges personnalisés à mon bottomNavigationView. Tout d'abord, j'ai créé une mise en page spéciale de mon badge:

java.lang.NullPointerException: Attempt to invoke virtual method 'android.view.View android.support.design.internal.BottomNavigationMenuView.getChildAt(int)' on a null object reference

puis j'ajoute des informations au texte du badgeAfficher à mon activité:

BottomNavigationMenuView menuView = (BottomNavigationMenuView) bottomNavigationView.getChildAt(0);
BottomNavigationItemView itemView = (BottomNavigationItemView) menuView.getChildAt(0);

notificationBadge = LayoutInflater.from(this).inflate(R.layout.notification_badge, menuView, false);
TextView textView = notificationBadge.findViewById(R.id.counter_badge);

textView.setText("15");

itemView.addView(notificationBadge);

mais comme je vois, je ne peux travailler qu'avec un seul élément de ma vue, lorsque j'ai essayé de passer de 0 à 1 élément, j'ai reçu cette erreur:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/counter_badge"
        android:layout_width="wrap_content"
        android:layout_height="20dp"
        android:layout_gravity="top|center_horizontal"
        android:layout_marginStart="20dp"
        android:gravity="center"
        android:textSize="12sp"
        android:textStyle="bold"
        android:ellipsize="end"
        android:textAlignment="center"
        android:textColor="@color/white"
        android:padding="3dp"
        android:background="@drawable/badge"/>
</FrameLayout>

puis j'ai essayé d'utiliser identifiants spéciaux d'articles, mais je reçois une erreur similaire. Peut-être que smb sait comment ajouter des badges aux articles que je veux?

android bottomnavigationview

11 commentaires

peut-être devriez-vous changer menuView.getChildAt (1); ?

vous pouvez ajouter la mise en page personnalisée dans votre menu bottomnav

@JohnJoe, lorsque je change cela, je reçois une erreur au BottomNavigationItemView itemView = (BottomNavigationItemView) menuView.getChildAt (0);

@HussainAbbas, j'ai parcouru toutes les bibliothèques possibles, mais j'ai ensuite décidé de créer mon propre badge

@AndrewGoroshko utilise des mises en page personnalisées et l'ajoute à votre menu

@HussainAbbas, pouvez-vous expliquer plus s'il vous plaît, parce que je n'ai pas compris ce que vous vouliez dire?

@AndrewGoroshko commence par créer votre mise en page xml dans laquelle vous pouvez ajouter la vue de texte et l'image de celle que vous utilisez en bas de la navigation après cela, allez dans votre fichier de menu, utilisez la mise en page d'action à l'intérieur de l'élément et ajoutez votre mise en page, celle que vous avez créée après cela, accédez à votre menu afficher en utilisant la vue du menu accéder à la vue de texte et y ajouter du texte

comprenez vous?

pouvez-vous vérifier la deuxième réponse à ma question, peut-être que cela m'aidera? car je suppose que j'ai bien compris votre commentaire :)

@AndrewGoroshko essaie la réponse de John Joe

stackoverflow.com/a/57073610/7254873

4 Réponses :

3
votes

Vous devez remplacer votre code par

BottomNavigationMenuView menuView = (BottomNavigationMenuView) bottomNavigationView.getChildAt(0);
BottomNavigationItemView itemView = (BottomNavigationItemView) menuView.getChildAt(0);

notificationBadge = LayoutInflater.from(this).inflate(R.layout.notification_badge, menuView, false);
TextView textView = notificationBadge.findViewById(R.id.counter_badge);
textView.setText("15");
itemView.addView(notificationBadge);

BottomNavigationMenuView menuView1 = (BottomNavigationMenuView) bottomNavigationView.getChildAt(0);
BottomNavigationItemView itemView1 = (BottomNavigationItemView) menuView1.getChildAt(1);

notificationBadgeOne = LayoutInflater.from(this).inflate(R.layout.notification_badge_one, menuView1, false);
TextView textView = notificationBadgeOne.findViewById(R.id.counter_badge);
textView.setText("15");
itemView1.addView(notificationBadgeOne);

Modifier

Pour avoir plus d'éléments avec un badge, vous devez créer une autre mise en page et ainsi de suite

BottomNavigationMenuView menuView = (BottomNavigationMenuView) bottomNavigationView.getChildAt(0);
BottomNavigationItemView itemView = (BottomNavigationItemView) menuView.getChildAt(1);

4 commentaires

et comment puis-je ajouter un badge à d'autres articles, pas seulement pour un seul?

Ensuite, vous devez avoir une autre mise en page personnalisée.

donc si j'ai 5 articles, je dois utiliser 5 mises en page différentes?

Je ne suis pas sûr que ce soit la meilleure approche, mais cela a fonctionné pour moi.

1
votes

Ajoutez simplement le badge sur BottomNavigationView comme:

 private lateinit var bottomNavItemView: BottomNavigationItemView
 private var messageBadgeView: View? = null

 val mBottomNavigationMenuView = getChildAt(0) as BottomNavigationMenuView
 val view = mBottomNavigationMenuView.getChildAt(1)
 bottomNavItemView = view as BottomNavigationItemView

 messageBadgeView = LayoutInflater.from(this@Activity)
          .inflate(R.layout.item_message_count_badge,
                        mBottomNavigationMenuView, false)

 messageBadgeView!!.badgeCount.text = "99+"

 //Add badge
 bottomNavItemView.addView(messageBadgeView)

 //Or Remove badge
 bottomNavItemView.removeView(messageBadgeView)

4 commentaires

J'utilise java dans mon projet: (pouvez-vous ajouter du code java?

OP veut avoir un badge sur plus d'articles.

Oui!! vous pouvez comprendre le code kotlin si vous donnez du temps pour la syntaxe de base

Et pour plus de badges, vous devez gonfler plus d'éléments de badge pour des éléments spécifiques de BottomNavigationItemView

2
votes

Ceci est désormais possible sans vues personnalisées en utilisant

com.google.android.material: material: 1.1.0-alpha06

et les versions plus récentes

  bottomNavigationView.getOrCreateBadge(R.id.bottom_navigation_view_item).apply {
  backgroundColor = Color.RED
  badgeTextColor = Color.WHITE
  maxCharacterCount = 3
  number = 0
  isVisible = true
}

0 commentaires

0
votes

Une autre façon pour ceux qui n'ont pas pu accéder à getOrCreaeteBadge est d'utiliser la méthode ci-dessous;

Assurez-vous que votre thème sur votre navigation inférieure est défini sur: Theme.MaterialComponents.Light.DarkActionBar

Alors maintenant:

 String messages = getIntent().getStringExtra("messages_count");
 messages = messages.substring(10,11);
 Log.d("MessagesCount", "getIncomingIntent: "+messages);
 navigation.showBadge(R.id.bottom_messages).setNumber(Integer.parseInt(messages));

Et vous êtes prêt à partir! Exemple de sortie ci-dessous

0 commentaires