Icône de compte de notification de la barre d'action (badge) comme Google l'a

146

Existe-t-il un badge ou une méthode standard Android pour afficher l'icône de notification de la barre d'action avec un décompte comme sur les exemples Google?

comptez 3 sur photo

Sinon, quelle est la meilleure façon de le faire?
Je suis nouveau sur Android, veuillez aider.

AndrewS
la source
J'ai mis à jour ma réponse pour créer un lien vers une implémentation complète de l'icône de notification.
pqn

Réponses:

228

Je ne sais pas si c'est la meilleure solution ou non, mais c'est ce dont j'ai besoin.

Veuillez me dire si vous savez ce qui doit être changé pour une meilleure performance ou une meilleure qualité. Dans mon cas, j'ai un bouton.

Élément personnalisé dans mon menu - main.xml

<item
    android:id="@+id/badge"
    android:actionLayout="@layout/feed_update_count"
    android:icon="@drawable/shape_notification"
    android:showAsAction="always">
</item>

Forme personnalisée dessinable (carré d'arrière-plan) - shape_notification.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
   android:shape="rectangle">
    <stroke android:color="#22000000" android:width="2dp"/>
    <corners android:radius="5dp" />
    <solid android:color="#CC0001"/>
</shape>

Mise en page pour ma vue - feed_update_count.xml

<?xml version="1.0" encoding="utf-8"?>
<Button xmlns:android="http://schemas.android.com/apk/res/android"
     android:id="@+id/notif_count"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:minWidth="32dp"
     android:minHeight="32dp"
     android:background="@drawable/shape_notification"
     android:text="0"
     android:textSize="16sp"
     android:textColor="@android:color/white"
     android:gravity="center"
     android:padding="2dp"
     android:singleLine="true">    
</Button>

MainActivity - paramétrer et mettre à jour ma vue

static Button notifCount;
static int mNotifCount = 0;    

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    MenuInflater inflater = getSupportMenuInflater();
    inflater.inflate(R.menu.main, menu);

    View count = menu.findItem(R.id.badge).getActionView();
    notifCount = (Button) count.findViewById(R.id.notif_count);
    notifCount.setText(String.valueOf(mNotifCount));
    return super.onCreateOptionsMenu(menu);
}

private void setNotifCount(int count){
    mNotifCount = count;
    invalidateOptionsMenu();
}
AndrewS
la source
53
C'est bien ! Mais si vous utilisez AppCompat, vous devez définir le ActionLayout dans le code:MenuItem item = menu.findItem(R.id.badge); MenuItemCompat.setActionView(item, R.layout.feed_update_count); notifCount = (Button) MenuItemCompat.getActionView(item);
Sylphe
7
supportInvalidateOptionsMenu () doit utiliser à la place de invalidateOptionsMenu () si vous ciblez un niveau d'API inférieur à 11
Balaji
10
+1 beaucoup aidé! Cependant: vous n'avez pas besoin android:icon="..."de l'élément de menu XML. C'est android:actionLayout="..."assez, là. Pour le ButtonXML de mise en page, vous pouvez utiliser la balise à fermeture automatique <Button ... />car la balise ne peut pas avoir de contenu. Vous devez fermer la <shape>balise (encore une fois: fermeture automatique). Et vous n'avez pas besoin du invalidateOptionsMenu(). Pour moi, cela ne fonctionne même pas, car le badge est toujours gonflé à partir de XML. Donc, le tout setNotifCount(...)est inutile. Appelez simplement setText(...)le badge. Et vous pouvez jeter getActionView()à Buttondirectement.
caw
4
De plus, si vous utilisez AppCompat, vous devez modifier le menu xml du badge <menu xmlns: android = " schemas.android.com/apk/res/android " xmlns: appcompat = " schemas.android.com/apk/res-auto "> <item android: id = "@ + id / badge" android: actionLayout = "@ layout / feed_update_count" android: icon = "@ drawable / shape_notification" appcompat: showAsAction = "always" /> </item> </menu>
ajdeguzman
4
@Webster notifCount.setOnClickListener (...); c'est tout à l'intérieur
AndrewS
132

Modifier Depuis la version 26 de la bibliothèque de support (ou androidx), vous n'avez plus besoin d'implémenter une personnalisation OnLongClickListenerpour afficher l'info-bulle. Appelez simplement ceci:

TooltipCompat.setTooltipText(menu_hotlist, getString(R.string.hint_show_hot_message));

Je vais juste partager mon code au cas où quelqu'un voudrait quelque chose comme ça: entrez la description de l'image ici

  • layout / menu / menu_actionbar.xml

    <?xml version="1.0" encoding="utf-8"?>
    
    <menu xmlns:android="http://schemas.android.com/apk/res/android">
        ...
        <item android:id="@+id/menu_hotlist"
            android:actionLayout="@layout/action_bar_notifitcation_icon"
            android:showAsAction="always"
            android:icon="@drawable/ic_bell"
            android:title="@string/hotlist" />
        ...
    </menu>
    
  • layout / action_bar_notifitcation_icon.xml

    Note style et android: propriétés cliquables . ceux-ci donnent à la mise en page la taille d'un bouton et rendent l'arrière-plan gris au toucher.

    <?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="fill_parent"
        android:orientation="vertical"
        android:gravity="center"
        android:layout_gravity="center"
        android:clickable="true"
        style="@android:style/Widget.ActionButton">
    
        <ImageView
            android:id="@+id/hotlist_bell"
            android:src="@drawable/ic_bell"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:layout_margin="0dp"
            android:contentDescription="bell"
            />
    
        <TextView xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/hotlist_hot"
            android:layout_width="wrap_content"
            android:minWidth="17sp"
            android:textSize="12sp"
            android:textColor="#ffffffff"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="@null"
            android:layout_alignTop="@id/hotlist_bell"
            android:layout_alignRight="@id/hotlist_bell"
            android:layout_marginRight="0dp"
            android:layout_marginTop="3dp"
            android:paddingBottom="1dp"
            android:paddingRight="4dp"
            android:paddingLeft="4dp"
            android:background="@drawable/rounded_square"/>
    </RelativeLayout>
    
  • drawable-xhdpi / ic_bell.png

    Une image de 64x64 pixels avec 10 pixels de large rembourrage de tous les côtés. Vous êtes censé avoir des rembourrages de 8 pixels de large, mais je trouve que la plupart des éléments par défaut sont légèrement plus petits que cela. Bien sûr, vous voudrez utiliser différentes tailles pour différentes densités.

  • drawable / round_square.xml

    Ici, # ff222222 (couleur # 222222 avec alpha #ff (entièrement visible)) est la couleur d'arrière-plan de ma barre d'action.

    <?xml version="1.0" encoding="utf-8"?>
    
    <shape
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle">
        <corners android:radius="2dp" />
        <solid android:color="#ffff0000" />
        <stroke android:color="#ff222222" android:width="2dp"/>
    </shape>
    
  • com / ubergeek42 / WeechatAndroid / WeechatActivity.java

    Ici, nous le rendons cliquable et modifiable! J'ai créé un écouteur abstrait qui fournit la création de Toast sur onLongClick, le code a été extrait des sources d'ActionBarSherlock .

    private int hot_number = 0;
    private TextView ui_hot = null;
    
    @Override public boolean onCreateOptionsMenu(final Menu menu) {
        MenuInflater menuInflater = getSupportMenuInflater();
        menuInflater.inflate(R.menu.menu_actionbar, menu);
        final View menu_hotlist = menu.findItem(R.id.menu_hotlist).getActionView();
        ui_hot = (TextView) menu_hotlist.findViewById(R.id.hotlist_hot);
        updateHotCount(hot_number);
        new MyMenuItemStuffListener(menu_hotlist, "Show hot message") {
            @Override
            public void onClick(View v) {
                onHotlistSelected();
            }
        };
        return super.onCreateOptionsMenu(menu);
    }
    
    // call the updating code on the main thread,
    // so we can call this asynchronously
    public void updateHotCount(final int new_hot_number) {
        hot_number = new_hot_number;
        if (ui_hot == null) return;
        runOnUiThread(new Runnable() {
            @Override
            public void run() {
                if (new_hot_number == 0)
                    ui_hot.setVisibility(View.INVISIBLE);
                else {
                    ui_hot.setVisibility(View.VISIBLE);
                    ui_hot.setText(Integer.toString(new_hot_number));
                }
            }
        });
    }
    
    static abstract class MyMenuItemStuffListener implements View.OnClickListener, View.OnLongClickListener {
        private String hint;
        private View view;
    
        MyMenuItemStuffListener(View view, String hint) {
            this.view = view;
            this.hint = hint;
            view.setOnClickListener(this);
            view.setOnLongClickListener(this);
        }
    
        @Override abstract public void onClick(View v);
    
        @Override public boolean onLongClick(View v) {
            final int[] screenPos = new int[2];
            final Rect displayFrame = new Rect();
            view.getLocationOnScreen(screenPos);
            view.getWindowVisibleDisplayFrame(displayFrame);
            final Context context = view.getContext();
            final int width = view.getWidth();
            final int height = view.getHeight();
            final int midy = screenPos[1] + height / 2;
            final int screenWidth = context.getResources().getDisplayMetrics().widthPixels;
            Toast cheatSheet = Toast.makeText(context, hint, Toast.LENGTH_SHORT);
            if (midy < displayFrame.height()) {
                cheatSheet.setGravity(Gravity.TOP | Gravity.RIGHT,
                        screenWidth - screenPos[0] - width / 2, height);
            } else {
                cheatSheet.setGravity(Gravity.BOTTOM | Gravity.CENTER_HORIZONTAL, 0, height);
            }
            cheatSheet.show();
            return true;
        }
    }
    
écureuil
la source
14
Très utile et descriptif. Merci! C'est ce dont j'avais vraiment besoin. Juste pour ajouter quelques sujets qui pourraient être utiles. Vous devez mettre app:actionLayout="@layout/action_bar_notifitcation_icon"au lieu de android:actionLayout="@layout/action_bar_notifitcation_icon"si vous devez utiliser MenuItemCompat.getActionViewau lieu de menu.findItem(R.id.menu_hotlist).getActionView();pour des problèmes de compatibilité. MenuItem.getActionViewn'est pas compatible avec le niveau d'API <11.
Reaz Murshed
Remarque style et android: propriétés cliquables. ceux-ci donnent à la mise en page la taille d'un bouton et rendent l'arrière-plan sélectionné coloré au toucher. Très utile!
David
2
il fonctionne comme un charme. tnx bro. mais dans mon cas, j'utilise la barre d'outils par défaut et je devrais utiliser "app: actionLayout =" @ layout / action_bar_notifitcation_icon "à la place ou je reçois toujours null. tnx à nouveau
Omid Heshmatinia
3
En guise d'astuce, Android a un dessin à la notification. Ainsi, au lieu de créer une forme personnalisée, vous pouvez définir l'arrière-plan du TextView sur @android: drawable / ic_notification_overlay ".
androidevil
2
Natif android:actionLayout:; AppCompat: app:actionLayoutdans votre élément de menu.
Benoit Duffez
61

Juste pour ajouter. Si quelqu'un veut implémenter une bulle de cercle rempli, voici le code (nommez-le bage_circle.xml):

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:useLevel="false"
    android:thickness="9dp"
    android:innerRadius="0dp"
    >

    <solid
        android:color="#F00"
        />
    <stroke
        android:width="1dip"
        android:color="#FFF" />

    <padding
        android:top="2dp"
        android:bottom="2dp"/>

</shape>

Vous devrez peut-être ajuster l'épaisseur en fonction de vos besoins.

entrez la description de l'image ici

EDIT: Voici la disposition du bouton (nommez-le badge_layout.xml):

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

    <com.joanzapata.iconify.widget.IconButton
        android:layout_width="44dp"
        android:layout_height="44dp"
        android:textSize="24sp"
        android:textColor="@color/white"
        android:background="@drawable/action_bar_icon_bg"
        android:id="@+id/badge_icon_button"/>

    <TextView
        android:id="@+id/badge_textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@id/badge_icon_button"
        android:layout_alignRight="@id/badge_icon_button"
        android:layout_alignEnd="@id/badge_icon_button"
        android:text="10"
        android:paddingEnd="8dp"
        android:paddingRight="8dp"
        android:paddingLeft="8dp"
        android:gravity="center"
        android:textColor="#FFF"
        android:textSize="11sp"
        android:background="@drawable/badge_circle"/>
</RelativeLayout>

Dans le menu créer un élément:

<item
        android:id="@+id/menu_messages"
        android:showAsAction="always"
        android:actionLayout="@layout/badge_layout"/>

Pour onCreateOptionsMenuobtenir une référence à l'élément de menu:

    itemMessages = menu.findItem(R.id.menu_messages);

    badgeLayout = (RelativeLayout) itemMessages.getActionView();
    itemMessagesBadgeTextView = (TextView) badgeLayout.findViewById(R.id.badge_textView);
    itemMessagesBadgeTextView.setVisibility(View.GONE); // initially hidden

    iconButtonMessages = (IconButton) badgeLayout.findViewById(R.id.badge_icon_button);
    iconButtonMessages.setText("{fa-envelope}");
    iconButtonMessages.setTextColor(getResources().getColor(R.color.action_bar_icon_color_disabled));

    iconButtonMessages.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            if (HJSession.getSession().getSessionId() != null) {

                Intent intent = new Intent(getThis(), HJActivityMessagesContexts.class);
                startActivityForResult(intent, HJRequestCodes.kHJRequestCodeActivityMessages.ordinal());
            } else {
                showLoginActivity();
            }
        }
    });

Après avoir reçu une notification pour les messages, définissez le nombre:

itemMessagesBadgeTextView.setText("" + count);
itemMessagesBadgeTextView.setVisibility(View.VISIBLE);
iconButtonMessages.setTextColor(getResources().getColor(R.color.white));

Ce code utilise Iconify-fontawesome .

compile 'com.joanzapata.iconify:android-iconify-fontawesome:2.1.+'
Abdullah Umer
la source
10
Pouvez-vous s'il vous plaît fournir le code pour la barre d'action ci-dessus. Ça a l'air plutôt bien.
Nitesh Kumar
Pourriez-vous élaborer un peu plus? Un peu de code serait très utile
Joaquin Iurchuk
@NiteshKhatri désolé d'avoir été si tard dans la fourniture du code. J'ai pensé que c'était facile. Mais vous avez tellement de votes positifs pour vos commentaires, ce qui signifie que les autres développeurs trouvent cela difficile aussi.
Abdullah Umer
1
iconify est une excellente bibliothèque!
djdance
C'est très bien, cependant le nombre, le texte apparaît sur le côté gauche du milieu du rond (rayon). Comment le résoudre
Farruh Habibullaev
29

Je n'aime pas les ActionViewsolutions basées, mon idée est:

  1. créer une mise en page avec TextView, qui TextViewsera remplie par l'application
  2. lorsque vous devez dessiner un MenuItem:

    2.1. gonfler la mise en page

    2.2. call measure()& layout()(sinon viewsera 0px x 0px, c'est trop petit pour la plupart des cas d'utilisation)

    2.3. définir le TextViewtexte de

    2.4. faire une "capture d'écran" de la vue

    2.6. ensemble MenuItemsur l'icône « sur la base de bitmap créé sur 2,4

  3. profit!

donc, le résultat devrait être quelque chose comme entrez la description de l'image ici

  1. créer une mise en page ici est un exemple simple
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/counterPanel"
    android:layout_width="32dp"
    android:layout_height="32dp"
    android:background="@drawable/ic_menu_gallery">
    <RelativeLayout
        android:id="@+id/counterValuePanel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >

        <ImageView
            android:id="@+id/counterBackground"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/unread_background" />

        <TextView
            android:id="@+id/count"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="1"
            android:textSize="8sp"
            android:layout_centerInParent="true"
            android:textColor="#FFFFFF" />
    </RelativeLayout>
</FrameLayout>

@drawable/unread_backgroundest ce TextViewfond vert , @drawable/ic_menu_galleryn'est pas vraiment nécessaire ici, c'est juste pour prévisualiser le résultat de la mise en page dans l'IDE.

  1. ajouter du code dans onCreateOptionsMenu/onPrepareOptionsMenu

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_main, menu);
    
        MenuItem menuItem = menu.findItem(R.id.testAction);
        menuItem.setIcon(buildCounterDrawable(count, R.drawable.ic_menu_gallery));
    
        return true;
    }
  2. Implémentez la méthode build-the-icon:

    private Drawable buildCounterDrawable(int count, int backgroundImageId) {
        LayoutInflater inflater = LayoutInflater.from(this);
        View view = inflater.inflate(R.layout.counter_menuitem_layout, null);
        view.setBackgroundResource(backgroundImageId);
    
        if (count == 0) {
            View counterTextPanel = view.findViewById(R.id.counterValuePanel);
            counterTextPanel.setVisibility(View.GONE);
        } else {
            TextView textView = (TextView) view.findViewById(R.id.count);
            textView.setText("" + count);
        }
    
        view.measure(
                View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED),
                View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED));
        view.layout(0, 0, view.getMeasuredWidth(), view.getMeasuredHeight());
    
        view.setDrawingCacheEnabled(true);
        view.setDrawingCacheQuality(View.DRAWING_CACHE_QUALITY_HIGH);
        Bitmap bitmap = Bitmap.createBitmap(view.getDrawingCache());
        view.setDrawingCacheEnabled(false);
    
        return new BitmapDrawable(getResources(), bitmap);
    }

Le code complet est ici: https://github.com/cvoronin/ActionBarMenuItemCounter

cVoronine
la source
1
camelCaseCoder, lorsque vous souhaitez modifier l'emplacement de l'image du compteur en haut à droite, vous pouvez, par exemple, ajouter android: layout_gravity = "top | right" aux propriétés de mise en page de
counterValuePanel
Il sera utile de savoir pourquoi vous ne préférez pas les solutions basées sur l'actionview. S'agit-il de complexité ou de performances?
Adi
26

Ok, pour que la solution @AndrewS fonctionne avec la bibliothèque appCompat v7 :

<menu 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:someNamespace="http://schemas.android.com/apk/res-auto" >

    <item
        android:id="@+id/saved_badge"
        someNamespace:showAsAction="always"
        android:icon="@drawable/shape_notification" />

</menu>

.

@Override
public void onCreateOptionsMenu(Menu menu, MenuInflater inflater) {
    super.onCreateOptionsMenu(menu, inflater);
    menu.clear();
    inflater.inflate(R.menu.main, menu);

    MenuItem item = menu.findItem(R.id.saved_badge);
    MenuItemCompat.setActionView(item, R.layout.feed_update_count);
    View view = MenuItemCompat.getActionView(item);
    notifCount = (Button)view.findViewById(R.id.notif_count);
    notifCount.setText(String.valueOf(mNotifCount));
}

private void setNotifCount(int count){
    mNotifCount = count;
    supportInvalidateOptionsMenu();
}

Le reste du code est le même.

ILovemyPoncho
la source
7
si vous utilisez xmlns: app = " schemas.android.com/apk/res-auto " dans votre mise en page XML, utilisez app: actionLayout = "@ layout / shoppingcar_icon" au lieu d'android: actionLayout = "@ layout / shoppingcar_icon"
Oscar Calderon
3
@OscarCalderon, c'est vrai. Avant que je reçois NPE, après avoir changé android:actionLayoutà app:actionLayoutce workes comme un charme.
Shashanth
3

Essayez de regarder les réponses à ces questions, en particulier la deuxième qui contient un exemple de code:

Comment implémenter des valeurs dynamiques sur l'élément de menu dans Android

Comment obtenir du texte sur une icône ActionBar?

D'après ce que je vois, vous devrez créer votre propre ActionViewimplémentation personnalisée . Une alternative pourrait être une coutume Drawable. Notez qu'il ne semble y avoir aucune implémentation native d'un nombre de notifications pour la barre d'action.

EDIT: La réponse que vous recherchiez, avec code: Vue de notification personnalisée avec exemple d'implémentation

pqn
la source
tnx pour la réponse, mais je ne comprends pas comment afficher le numéro, pas l'icône comme sur votre premier lien. pouvez-vous m'aider?
AndrewS
Avez-vous lu les autres liens? Ils offrent certaines options. De plus, vous pouvez mettre du texte dans Drawables comme indiqué dans les deux liens suivants: stackoverflow.com/questions/6691818/... et stackoverflow.com/questions/3972445/…
pqn
je vais de plus en plus profond avec vos réponses ... j'ai ce code <layer-list xmlns: android = " schemas.android.com/apk/res/android "> <item android: drawable = "@ drawable / shape_notification "/> <item android: drawable =" @ drawable / ic_menu_preferences "/> </layer-list> et j'ai besoin de remplacer l'icône (ic_menu_preferences) par drawable qui contient du texte. Comment puis-je faire ceci?
AndrewS
Je n'ai pas beaucoup d'expérience avec cela, mais je pense que vous pourrez peut-être créer des attributs XML personnalisés pour un à Drawabletravers quelque chose comme le lien ici , puis créer un attribut pour votre personnalisé Drawablequi contient du texte afin que vous puissiez créer le tout en XML et adaptez-le comme vous le souhaitez. Sinon, vous pouvez ajouter le Drawable en Java si cela est trop difficile.
pqn
3

Lorsque vous utilisez la barre d'outils:

....
private void InitToolbar() {
    toolbar = (Toolbar) findViewById(R.id.my_awesome_toolbar);
    toolbartitle = (TextView) findViewById(R.id.titletool);
    toolbar.inflateMenu(R.menu.show_post);
    toolbar.setOnMenuItemClickListener(this);
    Menu menu = toolbar.getMenu();
    MenuItem menu_comments = menu.findItem(R.id.action_comments);
    MenuItemCompat
            .setActionView(menu_comments, R.layout.menu_commentscount);
    View v = MenuItemCompat.getActionView(menu_comments);
    v.setOnClickListener(new OnClickListener() {

        @Override
        public void onClick(View arg0) {
            // Your Action
        }
    });
    comment_count = (TextView) v.findViewById(R.id.count);
}

et dans votre chargement de données, appelez refreshMenu ():

private void refreshMenu() {
    comment_count.setVisibility(View.VISIBLE);
    comment_count.setText("" + post_data.getComment_count());
}
Omid Omidi
la source
1

J'ai trouvé une très bonne solution ici , je l'utilise avec kotlin.

Tout d'abord, dans le dossier dessinable, vous devez créer item_count.xml:

<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="8dp" />
<solid android:color="#f20000" />
<stroke
    android:width="2dip"
    android:color="#FFF" />
<padding
    android:bottom="5dp"
    android:left="5dp"
    android:right="5dp"
    android:top="5dp" />
</shape>

Dans votre Activity_Mainmise en page, certains aiment:

<RelativeLayout
                    android:id="@+id/badgeLayout"
                    android:layout_width="40dp"
                    android:layout_height="40dp"
                    android:layout_toRightOf="@+id/badge_layout1"
                    android:layout_gravity="end|center_vertical"
                    android:layout_marginEnd="5dp">

                <RelativeLayout
                        android:id="@+id/relative_layout1"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content">

                    <Button
                            android:id="@+id/btnBadge"
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:background="@mipmap/ic_notification" />

                </RelativeLayout>

                <TextView
                        android:id="@+id/txtBadge"
                        android:layout_width="18dp"
                        android:layout_height="18dp"
                        android:layout_alignRight="@id/relative_layout1"
                        android:background="@drawable/item_count"
                        android:text="22"
                        android:textColor="#FFF"
                        android:textSize="7sp"
                        android:textStyle="bold"
                        android:gravity="center"/>

            </RelativeLayout>

Et vous pouvez modifier comme:

btnBadge.setOnClickListener { view ->
        Snackbar.make(view,"badge click", Snackbar.LENGTH_LONG) .setAction("Action", null).show()
        txtBadge.text = "0"
    }
Álvaro Agüero
la source
0

J'ai trouvé une meilleure façon de le faire. si vous voulez utiliser quelque chose comme ça

entrez la description de l'image ici

Utilisez cette dépendance

   compile 'com.nex3z:notification-badge:0.1.0'

créez un fichier xml dans drawable et enregistrez-le sous Badge.xml

<?xml version="1.0" encoding="utf-8"?>
  <layer-list xmlns:android="http://schemas.android.com/apk/res/android">

<item>
    <shape android:shape="oval">
        <solid android:color="#66000000"/>
        <size android:width="30dp" android:height="40dp"/>
    </shape>
</item>
<item android:bottom="1dp" android:right="0.6dp">
    <shape android:shape="oval">
        <solid android:color="@color/Error_color"/>
        <size android:width="20dp" android:height="20dp"/>
    </shape>
</item>
</layer-list>

Maintenant, partout où vous souhaitez utiliser ce badge, utilisez le code suivant en xml. avec l'aide de cela, vous pourrez voir ce badge dans le coin supérieur droit de votre image ou quoi que ce soit.

  <com.nex3z.notificationbadge.NotificationBadge
    android:id="@+id/badge"
    android:layout_toRightOf="@id/Your_ICON/IMAGE"
    android:layout_alignTop="@id/Your_ICON/IMAGE"
    android:layout_marginLeft="-16dp"
    android:layout_marginTop="-8dp"
    android:layout_width="28dp"
    android:layout_height="28dp"
    app:badgeBackground="@drawable/Badge"
    app:maxTextLength="2"
    ></com.nex3z.notificationbadge.NotificationBadge>

Maintenant enfin sur yourFile.java, utilisez cette 2 chose simple. 1) Définir

 NotificationBadge mBadge;

2) où votre boucle ou tout ce qui compte ce nombre utilise ceci:

 mBadge.setNumber(your_LoopCount);

ici, mBadge.setNumber(0)ne montrera rien.

J'espère que cette aide.

bhatt profond
la source