Display badge on top of bottom navigation bar’s icon

by

If you just want to use a stock BottomNavigationView and no third party lib here’s how I’ve done it:

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);

Then here’s the layout file:

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

Then just find TextView by id and set text.
@drawable/notification_badge is just a circle shape drawable

More Related Contents:

  1. What is the difference between Android Material Design UI and Android UI without material design?
  2. This Activity already has an action bar supplied by the window decor
  3. Put constant text inside EditText which should be non-editable – Android
  4. Outlined Edit Text from Material Design
  5. Android new Bottom Navigation bar or BottomNavigationView
  6. How to achieve ripple animation using support library?
  7. Android “elevation” not showing a shadow
  8. Creating a SearchView that looks like the material design guidelines
  9. Error inflating class android.support.v7.widget.Toolbar?
  10. Material Design not styling alert dialogs
  11. Navigation Drawer semi-transparent over status bar not working
  12. NavigationView menu items with counter on the right
  13. How to implement the Material-design Elevation for Pre-lollipop
  14. Selected tab’s color in Bottom Navigation View
  15. Remove BottomNavigationView labels
  16. Android FAB icon always black with MaterialComponents theme
  17. MaterialComponents theme alert dialog buttons
  18. What should be the color of the Ripple, colorPrimary or colorAccent? (Material Design)
  19. how to highlight the selected Item of Recycler View?
  20. Android Design Support Library expandable Floating Action Button(FAB) menu
  21. Error : IllegalArgumentException: The style on this component requires your app theme to be Theme.MaterialComponents
  22. How can I change the NavigationView’s item text size?
  23. Disable icon colorStateList in NavigationView
  24. FAB animation with viewpager/tabslider
  25. Change dialog button color
  26. Rounded corners on material button
  27. Toolbar.inflateMenu seems to do nothing
  28. Android CollapsingToolbarLayout with custom View
  29. How to create a card toolbar using appcompat v7
  30. CollapsingToolbarLayout setTitle() does not update unless collapsed

Leave a Comment