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.
android
material-design
bottomnavigationview
heisenberg91
quelle
quelle
this
Link in OP ist 404Antworten:
Edit 2020:
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
quelle
Wenn Sie nur eine Aktie
BottomNavigationView
und 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
TextView
nach ID suchen und Text einstellen.@drawable/notification_badge
ist nur eine Kreisform zeichnbarquelle
TextView
in eineFrameLayout
seitdemBottomNavigationItemView
verlängertFrameLayout
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); }
itemView.removeViewAt(itemView.getChildCount()-1);
ich stattdessen verwendet:View badge = itemView.findViewById(R.id.notifications_badge); ((ViewGroup)badge.getParent()).removeView(badge);
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>
quelle
Theme.AppCompat.*
VarianteTheme.MaterialCompoonents.*.Bridge
beizubehalten , verwenden Sie einfach die entsprechende Variante für eine direkte Übersetzung, ohne etwas neu stylen zu müssen. medium.com/over-engineering/…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
BottomMenuHelper
mit 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
quelle
removeBadge
vor dem AnrufshowBadge
an, um das Hinzufügen doppelter Ansichten zu vermeiden.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>
quelle
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 }
quelle
showBadge
wurde geändert ingetOrCreateBadge
.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
quelle
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; } });
quelle
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.
quelle
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()); } });
quelle
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) }
quelle
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/();
quelle
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>
quelle
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); } }
quelle