wake-up-neo.net

Zeigen Sie das Abzeichen oben auf dem unteren Navigationsleistensymbol an

Ich habe die untere Navigationsansicht in meiner App implementiert und habe nach allen Stellen gesucht, an denen Abzeichen über den Symbolen angezeigt werden sollen, z. B. this . Ich habe mich gefragt, ob dies überhaupt möglich ist. Jede Hilfe wird geschätzt. Danke.

androidmaterial-designbottomnavigationview
54
heisenberg91

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. Wie https://github.com/aurelhubert/ahbottomnavigation

Diese Bibliothek ist eine erweiterte Version der unteren Navigationsleiste. Mit diesem Code-Snippet können Sie einfach ein Abzeichen für einen Menüpunkt festlegen.

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

Und Sie werden folgendes Ergebnis erhalten

enter image description here

27
Noman Rafique

Wenn Sie nur eine Aktie BottomNavigationView und keine Drittanbieter-Bibliothek verwenden möchten, gehen Sie wie folgt vor:

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 suchen Sie einfach TextView nach id und geben Sie Text ein. @drawable/notification_badge ist nur eine Kreisform, die gezeichnet werden kann

136
Tinashe

Das Hinzufügen von Ausweisen wird jetzt von Haus aus unterstützt. Verwenden Sie dazu die neueste Materialabhängigkeit und fügen Sie diese zu Ihrem build.gradle hinzu

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

fügen Sie dies in Ihr Layout ein

<!-- 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üpunkts, auf den Sie ein Abzeichen setzen möchten. Überprüfen Sie es in der Menüdatei, die Sie an BottomNavigationView senden.

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>
26
Abel

Ich hatte das gleiche Problem und wollte keine Bibliothek benutzen.

Also habe ich ein benutzerdefiniertes Layout mit dem Namen layout_news_badge Erstellt:

<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 mit diesen 2 Methoden ein BottomMenuHelper 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 aufrufe:

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

BEARBEITEN: Zusätzliche Verbesserung durch Vorschlag jatin rana

24
ilbose

basierend auf der Antwort von @ Tinashe möchte ich ein Abzeichen ohne Nummer zeigen: enter image description here

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>
9
vuhung3990

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

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 von mein Kern

6
Agi Maulana

Das Abzeichen wurde jetzt als Teil von AndroidX BottomNavigationView von BadgeDrawable hinzugefügt. Siehe Dokumentation

fun setBadge(count: Int) {
    if (count == 0) {
        bottomNavigationView.removeBadge(R.id.ticketsNavigation)
    } else {
        val badge = bottomNavigationView.showBadge(R.id.ticketsNavigation)
        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>
1
Morten Holmgaard

Sie können es folgendermaßen versuchen:

Fügen Sie ein TextView in das BottomNavigationView ein, um ( BottomNavigationView) zu zählen 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 gestalte 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>
1
Arash

Bitte versuchen Sie es einmal.

1) XML-Datei für Badge erstellen (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) Zeichnungsdatei für Benachrichtigungspunktform erstellen (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-Methode 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 Ansicht der unteren Leiste.

5) Aktualisieren Sie das Abzeichen, um es wie folgt anzuzeigen 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 es fein versteckt, wenn wir auf eine bestimmte Leistenunterseite klicken, indem wir der 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;
            }
        });
0
Surendar D

@Abels Antwort ist die beste, es sei denn, Sie haben bereits komplexe Themen und haben nicht die Zeit, 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 mit com.google.Android.material:material:1.1.0 Nicht.

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 remove und number sind nur in der Version 1.1.0-alpha09 (und höher) verfügbar.

0
d4c0d312

Die Verwendung der Unterstützungsbibliothek BottomNavigationView ist schwierig. Eine einfache Lösung ist die Verwendung externer Komponenten. Eine einfach zu handhabende ist: https://github.com/roughike/BottomBar Überprüfen 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/();
0
Fran

sie können diese Bibliothek verwenden, um ein Abzeichen in der Navigationsleiste hinzuzufügen

https://github.com/ahmedewess/Badged-BottomNavigationBar

enter image description here

0
ahmed ewess