Zeigen Sie das Abzeichen oben auf dem Symbol der unteren Navigationsleiste an

Ich habe die untere Navigationsansicht in meiner Anwendung implementiert , und ich habe jeden sieht , wo wie Abzeichen auf die Icons anzuzeigen diesen Ich fragt sich , ob dies überhaupt möglich ist zu implementieren. Jede Hilfe wird geschätzt. Vielen Dank.

Edit 2020:

Wenn Sie BottomNavigationstattdessen Materialkomponenten verwenden, können Sie sofort Abzeichen für Artikel und viele andere Funktionen hinzufügen:

https://github.com/material-components/material-components-android/blob/master/docs/components/BottomNavigation.md

Alte Antwort:

Bei Verwendung der unteren Navigationsleiste der Unterstützungsbibliothek ist es recht komplex, ein Abzeichen / eine Benachrichtigung für Menüelemente anzuzeigen. Es gibt jedoch einfache Lösungen, um dies zu erreichen. Zum Beispiel https://github.com/aurelhubert/ahbottomnavigation

Diese Bibliothek ist eine erweiterte Version der unteren Navigationsleiste. Und Sie können einfach mit diesem Code-Snippet ein Abzeichen für den Menüpunkt setzen.

bottomNavigation.setNotification(notification, bottomNavigation.getItemsCount() - 1);

Und Sie erhalten folgendes Ergebnis

Wenn Sie nur eine Aktie BottomNavigationViewund keine Drittanbieter-Bibliothek verwenden möchten, habe ich Folgendes getan:

BottomNavigationMenuView bottomNavigationMenuView =
            (BottomNavigationMenuView) navigationView.getChildAt(0);
View v = bottomNavigationMenuView.getChildAt(3); 
BottomNavigationItemView itemView = (BottomNavigationItemView) v;

View badge = LayoutInflater.from(this)
            .inflate(R.layout.notification_badge, itemView, true);

Dann ist hier die Layoutdatei:

<merge xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">

    <TextView
        android:id="@+id/notifications.badge"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="top|center_horizontal"
        android:layout_marginLeft="10dp"
        android:layout_marginStart="10dp"
        android:background="@drawable/notification_badge"
        android:gravity="center"
        android:padding="3dp"
        android:text="9+"
        android:textColor="@color/white"
        android:textSize="11sp" />
</merge>

Dann einfach TextViewnach ID suchen und Text einstellen. @drawable/notification_badgeist nur eine Kreisform zeichnbar

Das Hinzufügen von Badges wird jetzt nativ unterstützt. Fügen Sie dies mithilfe der neuesten Materialabhängigkeit zu Ihrem build.gradle hinzu

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

Fügen Sie dies in Ihrem Layout hinzu

<!-- The rest of your layout here ....-->

  <com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/bottom_navigation"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:menu="@menu/bottom_nav_menu"
            />

dann kannst du einfach

     val navBar  = findViewById<BottomNavigationView>(R.id.bottom_navigation)
     navBar.getOrCreateBadge(R.id.action_add).number = 2

R.id.action_add für Sie wäre die ID des Menüelements, auf das Sie ein Abzeichen setzen möchten. Überprüfen Sie dies anhand der Menüdatei, die Sie der BottomNavigationView zuführen.

Stellen Sie sicher, dass sich Ihr App-Thema in Theme.MaterialComponents befindet

Sie können es in Stilen oder Manifest überprüfen. für dieses Beispiel war meins das

     <style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:statusBarColor" tools:targetApi="lollipop">@color/colorPrimary</item>
    </style>

BEARBEITEN 2: BottomNavigationView unterstützt jetzt das native Anzeigen von Badges, wie im Dokument hier angegeben .

bottomNavigation.getOrCreateBadge(menuItemId)

Ich hatte das gleiche Problem und wollte keine Bibliothek benutzen.

Also habe ich ein benutzerdefiniertes Layout namens erstellt layout_news_badge:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/badge_frame_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    
    <TextView
        android:id="@+id/badge_text_view"
        android:layout_width="19dp"
        android:layout_height="19dp"
        android:textSize="11sp"
        android:textColor="@android:color/white"
        android:background="@drawable/news_bottom_nav_bg"
        android:layout_gravity="top"
        android:layout_marginTop="4dp"
        android:layout_marginStart="16dp"
        android:gravity="center"
        android:padding="2dp"
        tools:text="9+" />
</FrameLayout>

TextView-Hintergrund ( news_bottom_nav_bg):

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
    <solid android:color="?attr/colorPrimary" />
</shape>

Dann habe ich BottomMenuHelpermit diesen 2 Methoden eine erstellt:

public static void showBadge(Context context, BottomNavigationView 
    bottomNavigationView, @IdRes int itemId, String value) {
    removeBadge(bottomNavigationView, itemId);
    BottomNavigationItemView itemView = bottomNavigationView.findViewById(itemId);
    View badge = LayoutInflater.from(context).inflate(R.layout.layout_news_badge, bottomNavigationView, false);
    
    TextView text = badge.findViewById(R.id.badge_text_view);
    text.setText(value);
    itemView.addView(badge);
}

public static void removeBadge(BottomNavigationView bottomNavigationView, @IdRes int itemId) {
    BottomNavigationItemView itemView = bottomNavigationView.findViewById(itemId);
    if (itemView.getChildCount() == 3) {
        itemView.removeViewAt(2);
    }
}

Wenn ich es dann in meiner Aktivität nenne:

BottomMenuHelper.showBadge(this, mBottomNavigationView, R.id.action_news, "1");

EDIT 1: Verbesserung durch Vorschlag Jatin Rana hinzugefügt

Update: jetzt Material Support Badge, siehe mehr unten

Material Baging

untere Navigation

val badge = bottomNavigation.getOrCreateBadge(menuItemId)
badge.isVisible = true
// An icon only badge will be displayed unless a number is set:
badge.number = 99

Alte Antwort

Basierend auf der Antwort von @ Tinashe möchte ich eine Abzeichen-Show als Balg ohne Nummer:

Code:

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        navigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener)
        // position = 2
        addBadge(POSITION_HISTORY)
    }

    /**
     * add badge(notification dot) to bottom bar
     * @param position to get badge container
     */
    @SuppressLint("PrivateResource")
    private fun addBadge(position: Int) {
        // get badge container (parent)
        val bottomMenu = navigation.getChildAt(0) as? BottomNavigationMenuView
        val v = bottomMenu?.getChildAt(position) as? BottomNavigationItemView

        // inflate badge from layout
        badge = LayoutInflater.from(this)
                .inflate(R.layout.badge_layout, bottomMenu, false)

        // create badge layout parameter
        val badgeLayout: FrameLayout.LayoutParams = FrameLayout.LayoutParams(badge?.layoutParams).apply {
            gravity = Gravity.CENTER_HORIZONTAL
            topMargin = resources.getDimension(R.dimen.design_bottom_navigation_margin).toInt()

            // <dimen name="bagde_left_margin">8dp</dimen>
            leftMargin = resources.getDimension(R.dimen.bagde_left_margin).toInt()
        }

        // add view to bottom bar with layout parameter
        v?.addView(badge, badgeLayout)
    }

badge_layout.xml (badge_size = 12dp)

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="@dimen/badge_size"       
    android:layout_height="@dimen/badge_size"
    android:background="@drawable/new_notification" />

und zeichnbarer Hintergrund new_notification.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <corners android:radius="100dp"/>
    <solid android:color="#F44336"/>
</shape>

Badge wurde jetzt als Teil von AndroidX BottomNavigationView von BadgeDrawable hinzugefügt. Siehe Dokumente

fun setBadge(count: Int) {
    if (count == 0) {
        bottomNavigationView.removeBadge(R.id.ticketsNavigation)
    } else {
        val badge = bottomNavigationView.getOrCreateBadge(R.id.ticketsNavigation) // previously showBadge
        badge.number = count
        badge.backgroundColor = getColor(R.color.badge)
        badge.badgeTextColor = getColor(R.color.blackTextColor)
    }
}

// Menu:
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/ticketsNavigation"
        android:icon="@drawable/vector_drawable_navbar_tickets"
        android:title="@string/tickets_title"/>
    ...
</menu>

Bearbeiten:

Wie in den Kommentaren erwähnt, sollte es möglich sein, nur die Anzahl der Ausweise zu aktualisieren, ohne den Ausweis die ganze Zeit wie folgt hinzufügen oder entfernen zu müssen:

fun setBadge(count: Int) {
    bottomNavigationView.getBadge(menuItemId)?.isVisible = count > 0
}

Als @zxbin Antwort. Sie können BadgeView überprüfen und den folgenden Code ausprobieren

BottomNavigationView navigation = (BottomNavigationView) findViewById(R.id.navigation);
navigation.setOnNavigationItemSelectedListener(this);
navigation.setSelectedItemId(R.id.navigation_store);
BottomNavigationMenuView bottomNavigationMenuView =
        (BottomNavigationMenuView) navigation.getChildAt(0);
View v = bottomNavigationMenuView.getChildAt(4); // number of menu from left
new QBadgeView(this).bindTarget(v).setBadgeNumber(5);

Quelle aus meinem Kern

Bitte versuchen Sie dies einmal.

1) Erstellen Sie eine XML-Datei für das Abzeichen (z. B. notification_badge_view.xml).

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

    <ImageView
        android:id="@+id/badge"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_gravity="top|center_horizontal"
        android:layout_marginStart="10dp"
        android:gravity="center"
        android:padding="3dp"
        app:srcCompat="@drawable/notification_badge" />
</FrameLayout>

2) Erstellen Sie eine zeichnbare Datei für die Benachrichtigungspunktform (z. B. badge_circle.xml).

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="@color/colorAccent" />
    <stroke
        android:width="2dp"
        android:color="@android:color/white" />
</shape>

3) Fügen Sie in Ihrer Aktivität onCreate die Badge-Ansicht zu BottomNavigationView hinzu

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_landing);

         addBadgeView();

    }

4) Und die addBadgeView-Methode ist unten

private void addBadgeView() {
        try {
            BottomNavigationMenuView menuView = (BottomNavigationMenuView) bottomNavigationBar.getChildAt(0);
            BottomNavigationItemView itemView = (BottomNavigationItemView) menuView.getChildAt(0); //set this to 0, 1, 2, or 3.. accordingly which menu item of the bottom bar you want to show badge
            notificationBadge = LayoutInflater.from(LandingActivity.this).inflate(R.layout.view_notification_badge, menuView, false);
            itemView.addView(notificationBadge);
            notificationBadge.setVisibility(GONE);// initially badge will be invisible 
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

Hinweis: bottomNavigationBar ist Ihre untere Balkenansicht.

5) Aktualisieren Sie das Abzeichen, um es mit der folgenden Methode ein- und auszublenden

private void refreshBadgeView() {
        try {
            boolean badgeIsVisible = notificationBadge.getVisibility() != GONE;
            notificationBadge.setVisibility(badgeIsVisible ? GONE : VISIBLE);//makes badge visible and invisible 
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

6) Und machen Sie feines Verstecken, wenn wir auf eine bestimmte untere Balkenseite klicken, indem Sie der folgenden Zeile folgen.

bottomNavigationBar.setOnNavigationItemSelectedListener(new 
BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) 
              {
                switch (menuItem.getItemId()) {
                    case R.id.bottom_bar_one:
                        //while moving to first fragment
                        notificationBadge.setVisibility(GONE);
                        break;
                    case R.id.bottom_bar_two:
                        //moving to second fragment
                        break;
                    case R.id.bottom_bar_three:
                        //moving to third fragment
                        break;
                }
                return true;
            }
        });

Die Antwort von @ Abel ist die beste, es sei denn, Sie haben bereits komplexe Themen und haben nicht die Zeit, sie alle zu ändern.

Wenn Sie jedoch a) unter Zeitdruck stehen und die BottomNavigationView-Leiste der Google-Materialbibliothek verwenden oder b) Ihr eigenes benutzerdefiniertes Ansichtsabzeichen hinzufügen möchten, funktioniert die akzeptierte Antwort nicht com.google.android.material:material:1.1.0

Sie müssen für eine andere Ansichtshierarchie als die akzeptierte Antwort codieren

  BottomNavigationItemView itemView = (BottomNavigationItemView) ((BottomNavigationMenuView) mBottomNavigation.getChildAt(0)).getChildAt(2);
  View badge = LayoutInflater.from(this).inflate(R.layout.navigation_dot, itemView, false);
  itemView.addView(badge);

Wenn Sie Ihr Thema aktualisieren und auf aktualisieren möchten

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

dann brauchen Sie nur noch zu tun

mBottomNavigation.getOrCreateBadge(R.id.navigation_menu_item_one).setNumber(YOUR_NUMBER);

Die Funktionen zum Entfernen und Nummerieren sind nur in der Version 1.1.0-alpha09 (und höher) vorhanden.

Ein einfacher Weg:

Als Material Design aktualisiert ihre Bibliothek und nach

https://medium.com/over-engineering/hands-on-with-material-components-for-android-bottom-navigation-aae2aa9066be

Ich konnte mein BottomNavigationView-Abzeichen innerhalb meines Recycler-Adapters (in einem Fragment) ohne externe Bibliothek aktualisieren (oder erstellen) .

Ausgangszustand:

Also, wie im Adapter habe ich den Kontext von meiner Aktivität erhalten, greife ich darauf zu und stelle die Instanz der unteren Navigation wieder her:

navBottomView = ((AppCompatActivity)this.context).findViewById(R.id.nav_view);

Überprüfen Sie, ob das Abzeichen null ist (noch nicht erstellt). Wenn dies der Fall ist, setzen Sie es auf die ausgewählte Menge:

  BadgeDrawable badgeDrawable = navBottomView.getBadge(R.id.navigation_carrinho);
  if (badgeDrawable == null)
      navBottomView.getOrCreateBadge(R.id.navigation_carrinho).setNumber(item.getQuantidade());

Andernfalls erhalten Sie die vorherige Menge und erhöhen den Ausweiswert:

int previousValue = badgeDrawable.getNumber();
badgeDrawable.setNumber(previousValue + item.getQuantidade());

Vergessen Sie nicht die Importe:

import com.google.android.material.badge.BadgeDrawable;
import com.google.android.material.bottomnavigation.BottomNavigationView;

Endzustand:

All in One mit Add-to-Cart-Button-Listener:

btnAddCarrinho.setOnClickListener(v -> {
            navBottomView = ((AppCompatActivity) this.context).findViewById(R.id.nav_view);
            BadgeDrawable badgeDrawable = navBottomView.getBadge(R.id.navigation_carrinho);
            if (badgeDrawable == null) {
                navBottomView.getOrCreateBadge(R.id.navigation_carrinho).setNumber(item.getQuantidade());
            } else {
                int previousValue = badgeDrawable.getNumber();
                badgeDrawable.setNumber(previousValue + item.getQuantidade());
            }
        });

Schauen Sie sich die Dokumentationsseite an: https://material.io/develop/android/components/bottom-navigation-view/

TL; DR: Sie haben nicht die richtigen Methoden aktualisiert, sodass sie einen kleinen Fehler in der Dokumentation hinterlassen haben. Um ein Abzeichen hinzuzufügen oder zu entfernen, gehen Sie wie folgt vor:

// to remove
bottomNavigationView.removeBadge(R.id.action_settings)

// to add
bottomNavigationView.getOrCreateBadge(R.id.action_settings).apply {
    //if you want to change other attributes, like badge color, add a number, maximum number (a plus sign is added, e.g. 99+)
    number = 100
    maxCharactersCount = 3
    backgroundColor = ContextCompat.getColor(context, R.color.color_red)
}

Die Verwendung der Support-Bibliothek BottomNavigationView ist schwierig. Eine einfache Lösung ist die Verwendung externer Komponenten. Eine einfache Handhabung ist: https://github.com/roughike/BottomBar Die Überprüfung der Dokumentation ist so einfach wie:

BottomBarTab nearby = bottomBar.getTabWithId(R.id.tab_nearby);
nearby.setBadgeCount(5);

// Remove the badge when you're done with it.
nearby.removeBadge/();

Sie können dies folgendermaßen versuchen:

Fügen Sie eine Textansicht zum Zählen in die BottomNavigationView ein ( BottomNavigationView ist ein FrameLayout ):

    <android.support.design.widget.BottomNavigationView android:id="@id/bottomMenu" style="@style/bottomMenu">
        <TextView android:id="@id/bottomMenuSelectionsNumber" style="@style/bottomMenuSelectionsNumber"/>
    </android.support.design.widget.BottomNavigationView>

Und stylen Sie sie so:

<style name="bottomMenu">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">@dimen/toolbarHeight</item>
    <item name="android:layout_gravity">center|bottom</item>
    <item name="android:background">@color/colorThird</item>
    <item name="itemBackground">@drawable/tabs_ripple</item>
    <item name="itemIconTint">@drawable/bottom_menu_item_color</item>
    <item name="itemTextColor">@drawable/bottom_menu_item_color</item>
    <item name="menu">@menu/bottom_menu</item>
</style>

<style name="bottomMenuSelectionsNumber">
    <item name="android:text">@string/bottomMenuSelectionsNumber</item>
    <item name="android:textSize">@dimen/appSecondFontSize</item>
    <item name="android:textColor">@color/white</item>
    <item name="android:layout_width">@dimen/bottomMenuSelectionsNumberDim</item>
    <item name="android:layout_height">@dimen/bottomMenuSelectionsNumberDim</item>
    <item name="android:layout_gravity">right|bottom</item>
    <item name="android:layout_marginRight">@dimen/bottomMenuSelectionsNumberMarginR</item>
    <item name="android:layout_marginBottom">@dimen/bottomMenuSelectionsNumberMarginB</item>
    <item name="android:gravity">center</item>
    <item name="android:includeFontPadding">false</item>
    <item name="android:background">@drawable/bottom_menu_selections_number_bg</item>
</style>

Und bottom_menu_selections_number_bg :

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
    <solid android:color="@color/colorAccent"/>
    <corners android:radius="@dimen/cornerRadius"/>
</shape>

Ich habe einige Änderungen an der Antwort von @ilbose vorgenommen, die ich auf diese Weise vorgenommen habe, und kleine und große Bildschirmgrößen getestet

../drawable/badge_circle.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
<solid android:color="@color/solid_red_base" />

und ../layout/notifcation_badge.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/badge_frame_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_marginTop="11dp"
android:layout_gravity="center_horizontal">

<TextView
    android:id="@+id/badge_text_view"
    android:layout_width="12dp"
    android:layout_height="12dp"
    android:textSize="11sp"
    android:textColor="@android:color/white"
    android:background="@drawable/message_badge"
    android:layout_gravity="top"
    android:layout_centerHorizontal="true"
    android:padding="2dp"/> </RelativeLayout>

und in Java-Code

 public static void showBadge(Context context, BottomNavigationView
        bottomNavigationView, @IdRes int itemId, String value) {
    BottomNavigationItemView itemView = bottomNavigationView.findViewById(itemId);
    View badge = LayoutInflater.from(context).inflate(R.layout.message_notification_badge, bottomNavigationView, false);

    TextView text = badge.findViewById(R.id.badge_text_view);
    text.setText(value);
    itemView.addView(badge);
}

 public static void removeBadge(BottomNavigationView bottomNavigationView, @IdRes int itemId) {
    BottomNavigationItemView itemView = bottomNavigationView.findViewById(itemId);
    if (itemView.getChildCount() == 4) {
        itemView.removeViewAt(4);
    }
}