How to add a circled counter to an item in a navigation drawer

Question

I'm referring to this answer.

It worked, giving me count in front of cart in menu of navigation drawer, but how shall I make the counter TextView inside a circle?

What I want is:

What I get from the above link is that it only displays the text 2, not in a circle.

My code:

menu:--

      <item
        android:id="@+id/MyCart"
        android:icon="@drawable/ic_shopping_cart_black_24dp"
        android:title="My Cart"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        app:actionViewClass="android.widget.TextView"

        />

activity:--

 val  slideshow =
        MenuItemCompat.getActionView(navigationView!!.menu.findItem(R.id.MyCart)) as TextView
    //Gravity property aligns the text

    slideshow.setGravity(Gravity.CENTER_VERTICAL);
    slideshow.setTypeface(null,Typeface.BOLD);                                                                                                                    slideshow.setTextColor(getResources().getColor(R.color.colorAccent));
    //count is added


    RetrofitClient.instancecart.listcart(token).enqueue( object :
        Callback<CartResponse> {
        override fun onFailure(call: Call<CartResponse>, t: Throwable) {
            Toast.makeText(applicationContext,"falied", Toast.LENGTH_LONG).show()
        }

        override fun onResponse(
            call: Call<CartResponse>,
            response: Response<CartResponse>
        ) {

            val res=response
            if (response.isSuccessful) {

                val retro: String = response.body()!!.count.toString()

                slideshow.setText(retro) //retrofit api count

            }
        }

    })
}

Answer 1

It seems the answer you linked is outdated in some ways, but also has limited styling options for the TextView. So you can do this instead: setting an actionLayout instead of actionViewClass.

First, create a circle drawable XML resource (let's call it res/drawable/navdrawer_counterbackground.xml):

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="#ff0000"/>
</shape>

Then create a layout for your counter. Let's call it res/layout/nav_counter.xml. The FrameLayout lets us add gravity around the TextView, so it can be centered vertically in the menu item. Note the TextView has an id of counter. The layout width and height of the TextView control the size of the circle.

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="match_parent">
    <TextView
        android:id="@+id/counter"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_gravity="center"
        android:background="@drawable/nav_counterbackground"
        android:gravity="center"
        android:textColor="#ffffff"
        android:textStyle="bold"
        tools:text="99+">
    </TextView>
</FrameLayout>

Assign this layout to your menu item:

        <item
            android:id="@+id/nav_itemwithcounter"
            android:icon="@drawable/ic_whatever"
            android:title="@string/menu_whatever"
            app:actionLayout="@layout/nav_counter"/>

Then in your Activity or Fragment, create a property for the TextView:

private lateinit var counterView: TextView

In onCreate()/onViewCreated() you can get the navigation view and use it to get your TextView reference:

val navView: NavigationView = findViewById(R.id.nav_view)
counterView = navView.menu.findItem(R.id.nav_itemwithcounter).actionView.findViewById(R.id.counter)

And you can update the text property and visibility of this counterView whenever you need to.