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

77

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.

heisenberg91
quelle
1
Sicher wäre es möglich. Sie können das Abzeichen selbst in der Layout-XML für Ihre untere Navigationsansicht erstellen. Erstellen Sie ein Rahmenlayout, platzieren Sie Ihr Menüsymbol unter dem Ausweis und erstellen Sie eine Logik zum Ein- / Ausblenden Ihrer Ausweisansicht.
Velval
1
Sie können BadgeView verwenden . Oder suchen Sie in Github.
Zxbin
@velval Haben Sie ein Codebeispiel oder ein Tutorial, wie Sie dies erreichen können?
Kalamar
thisLink in OP ist 404
John

Antworten:

41

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

Geben Sie hier die Bildbeschreibung ein

Noman Rafique
quelle
funktioniert gut und diese Bibliothek ist besser als die native BottomNav
Syed Usama Ahmad
1
Schauen Sie sich für 2020 ans die Antwort von @ Abel an, die eine Möglichkeit zeigt, die Bestandsansicht aus der Materialbibliothek von Google zu verwenden. Für weitere Informationen: material.io/develop/android/components/bottom-navigation-view
HBB20
153

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

Tinashe
quelle
Es ist nicht notwendig, Ihre TextViewin eine FrameLayoutseitdem BottomNavigationItemViewverlängertFrameLayout
Victor Rendina
Es funktioniert wie ein Zauber, aber ich habe Mühe, es zu entfernen. Wie kann ich es bitte tun?
ismail alaoui
11
Verwenden Sie einfach diese Methode, um das Abzeichen zu entfernen. public void removeBadge(BottomNavigationView navigationView, int index) { BottomNavigationMenuView bottomNavigationMenuView = (BottomNavigationMenuView) navigationView.getChildAt(0); View v = bottomNavigationMenuView.getChildAt(index); BottomNavigationItemView itemView = (BottomNavigationItemView) v; itemView.removeViewAt(itemView.getChildCount()-1); }
Nilesh Rathore
3
Ich glaube, ich habe einen etwas aufgeräumteren Weg gefunden, um das Abzeichen aus der @ NileshRathore-Antwort zu entfernen. Anstelle von itemView.removeViewAt(itemView.getChildCount()-1);ich stattdessen verwendet:View badge = itemView.findViewById(R.id.notifications_badge); ((ViewGroup)badge.getParent()).removeView(badge);
JamTheMan
9
Ich habe eine Laufzeitausnahme: android.view.InflateException: Binäre XML-Dateizeile Nr. 1: <merge /> kann nur mit einem gültigen ViewGroup-Stammverzeichnis verwendet werden und attachToRoot = true
Blazej SLEBODA
67

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>
Abel
quelle
4
IMHO sollte die Antwort darauf aktualisiert werden. Ich habe dies gerade in meine App implementiert und funktioniert wie ein Zauber.
Oliver Mahoney
5
Wenn Ihr App-Design noch nicht von Theme.MaterialComponents geerbt wurde, wie ich es war (Theme.AppCompat), bereiten Sie sich auf eine Neugestaltung des Restes Ihrer App vor. Ich hätte das zuerst herausfinden sollen. Übrigens ist der Themenwechsel erforderlich oder das Badging stürzt ab. stackoverflow.com/questions/53476115/…
ChrisPrime
4
Wenn Sie meinen vorherigen Kommentar erweitern, um Ihr Styling bei der Migration von einer Theme.AppCompat.*Variante Theme.MaterialCompoonents.*.Bridgebeizubehalten , verwenden Sie einfach die entsprechende Variante für eine direkte Übersetzung, ohne etwas neu stylen zu müssen. medium.com/over-engineering/…
ChrisPrime
1
Sollte die akzeptierte Antwort gewesen sein, verwenden Sie diese Materialthema-Variante Theme.MaterialCompoonents. *. Bridge, um Abstürze zu vermeiden.
Sadda Hussain
42


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

ilbose
quelle
1
Was sind die Werte für marginTop und marginStart?
verkauft für den
Entschuldigung, Sie haben Recht, diese Werte waren nicht klar. Ich habe sie bearbeitet und durch die Werte ersetzt, die ich in meinem Projekt verwendet habe. Vielen Dank :)
Ilbose
1
Rufen Sie removeBadgevor dem Anruf showBadgean, um das Hinzufügen doppelter Ansichten zu vermeiden.
Jatin Rana
1
es funktioniert mit android.support.design.widget.BottomNavigationView
Roger
1
Genial, Bravo!
Raphaelbgr
15

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: Geben Sie hier die Bildbeschreibung ein

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>
vuhung3990
quelle
1
Wie entferne ich das Abzeichen?
Sudhir Khanger
1
@SudhirKhanger zum Entfernen erstellen Sie eine globale Variable für die Badge-Ansicht. und übergeben Sie einfach das gleiche in v.removeView (Abzeichen) wie es hinzugefügt wurde
Narendra Pal
13

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
}
Morten Holmgaard
quelle
Es ist in der Dokumentation enthalten, aber seit Oktober 2019 ist es nicht mehr Teil von com.google.android.material: material: 1.2.0_beta1 und früher.
Flummox - sei nicht böse SE
@ Flummox-notbeevilSE Nun, wir verwenden es in der Produktion mit 1.1.0-alpha07 - also denke ich, dass Sie sich irren.
Morten Holmgaard
@MortenHomgaard, das ist interessant, vielleicht Unterschied zwischen Java und Kotlin? Ich habe damit herumgespielt, konnte es aber nicht so machen, wie Sie es hier gepostet haben.
Flummox - sei nicht böse SE
showBadgewurde geändert in getOrCreateBadge.
Morten Holmgaard
1
Nur zu Ihrer Information für zukünftige Leser. Wenn Sie den Ausweis einfach ein- / ausblenden möchten, können Sie mit bottom_navigation_view.getBadge (menuItemId) darauf zugreifen. IsVisible = NEW_VISIBILITY_STATE Sie müssen Ausweise nicht ständig entfernen / erstellen :).
Joaquim Ley
8

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

Agi Maulana
quelle
Hallo, wie man den rechten Rand des Abzeichens einstellt, während es nur an der richtigen Stelle
angezeigt wird
Schlechte Dokumentation, sieht aber in der Tat ideal aus
TheRealChx101
5

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;
            }
        });
Surendar D.
quelle
3

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.

d4c0d312
quelle
3

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: 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:

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());
            }
        });
Acauã Pitta
quelle
Das ist die beste Antwort. Beachten Sie jedoch, dass Sie Ihr übergeordnetes Thema von Theme.MaterialComponents erben müssen, um es verwenden zu können.
porya74
2

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)
}
Pedro Romão
quelle
1

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/();
Fran
quelle
3
Für alle, die dies 2019 lesen, ist diese Bibliothek veraltet und wurde seit 2 Jahren nicht mehr gepflegt.
Brandonx
Sie haben Recht, und heutzutage haben wir native BottomNavigationView, die viel einfacher zu verwenden ist.
Fran
1

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>
Arash
quelle
0

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);
    }
}
Vibhanshu Tiwari
quelle