Search code examples
androidmaterial-designmdc-componentsmaterial-components-android

How can i change the background color in a BadgeDrawable Android


i want to create a bottomNavigationBar with badges.

I already did it with the com.google.android.material.bottomnavigation.BottomNavigationView that can be found at https://material.io/develop/android/components/bottom-navigation-view/.

However the badge is red and i want it yellow. I've been reading the documentation from here: https://material.io/develop/android/components/badging/. but isn't clear for me.

I've already tried to create a badgeDrawable, set the background color, call the function attachBadgeDrawable and pass to it the badgeDrawable, and the Child of bottom navigation view at position 3 (Which is where i want the badge to be placed). what isn't clear for me it's the third parameter.

This is my navigation view code:

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bottom_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:background="@color/clr_white"
    app:elevation="0dp"
    app:menu="@menu/menu_bottom_navigator" />



BadgeDrawable badgeDrawable = BadgeDrawable.create(this);
           badgeDrawable.setBackgroundColor(getResources().getColor(R.color.app_yellow));
BadgeUtils.attachBadgeDrawable(badgeDrawable, mBottomNavigation.getChildAt(3), null);

The documentation says:

BadgeUtils.attachBadgeDrawable(badgeDrawable, anchor, null);

I've expected the badge should be yellow but instead, i'm getting a NPE

E/AndroidRuntime: FATAL EXCEPTION: main
    Process: com.myappclient.develop, PID: 15853
    io.reactivex.exceptions.OnErrorNotImplementedException: Attempt to invoke virtual method 'void android.view.View.getDrawingRect(android.graphics.Rect)' on a null object reference
        at io.reactivex.internal.functions.Functions$OnErrorMissingConsumer.accept(Functions.java:704)
        at io.reactivex.internal.functions.Functions$OnErrorMissingConsumer.accept(Functions.java:701)
        at io.reactivex.internal.observers.LambdaObserver.onError(LambdaObserver.java:77)
        at io.reactivex.internal.observers.LambdaObserver.onNext(LambdaObserver.java:67)
        at io.reactivex.internal.operators.observable.ObservableObserveOn$ObserveOnObserver.drainNormal(ObservableObserveOn.java:200)
        at io.reactivex.internal.operators.observable.ObservableObserveOn$ObserveOnObserver.run(ObservableObserveOn.java:252)
        at io.reactivex.android.schedulers.HandlerScheduler$ScheduledRunnable.run(HandlerScheduler.java:109)
        at android.os.Handler.handleCallback(Handler.java:873)
        at android.os.Handler.dispatchMessage(Handler.java:99)
        at android.os.Looper.loop(Looper.java:193)
        at android.app.ActivityThread.main(ActivityThread.java:6669)
        at java.lang.reflect.Method.invoke(Native Method)
        at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:493)
        at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:858)
     Caused by: java.lang.NullPointerException: Attempt to invoke virtual method 'void android.view.View.getDrawingRect(android.graphics.Rect)' on a null object reference

I'm using the library version 'com.google.android.material:material:1.1.0-alpha07' and my min API is 19


Solution

  • i recommend you to update your library from "alpha-07" to "alpha-08". Also in the activity you had the BottomNavigationView you can the following. This is going to set the badge background color to blue.

    For the third position

        navView.menu.forEachIndexed { index, item ->
            if (index == 2) {
                val badgeDrawable = navView.getOrCreateBadge(item.itemId)
                badgeDrawable.backgroundColor = Color.BLUE
            }
        }
    

    For the last position

        navView.menu.forEachIndexed { index, item ->
            if (index == navView.menu.size() - 1) {
                val badgeDrawable = navView.getOrCreateBadge(item.itemId)
                badgeDrawable.backgroundColor = Color.BLUE
            }
        }