HOW TO ADD MENU ITEM BADGE TO ANDROID COMPONENT NAVIGATION IN KOTLIN » InduceSmile - Android Tutorial, Android Apps, Android Studio, Android SDK, Android Development

In this android kotlin source code example, we are going to add menu item badge to Android Component Navigation in Kotlin.

You can copy and adopt this source code example to your Kotlin android project without reinventing the wheel.

Below is a step by step source code to add menu item badge to Android Component Navigation in Kotlin.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:fitsSystemWindows="true">

    <androidx.drawerlayout.widget.DrawerLayout
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:openDrawer="start">

        <include
            layout="@layout/app_bar_main"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

        <com.google.android.material.navigation.NavigationView
            android:id="@+id/nav_view"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:fitsSystemWindows="true"
            app:headerLayout="@layout/drawer_header"
            app:menu="@menu/drawermenubadge" />

    </androidx.drawerlayout.widget.DrawerLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

layout/app_bar_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay"/>

    </com.google.android.material.appbar.AppBarLayout>

    <include layout="@layout/content_main" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

layout/content_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:showIn="@layout/app_bar_main">

    <fragment
        android:id="@+id/nav_host_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:defaultNavHost="true"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:navGraph="@navigation/nav_graph11" />

</androidx.constraintlayout.widget.ConstraintLayout>

navigation/nav_graph11.xml

<?xml version="1.0" encoding="utf-8"?>
<navigation 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"
    android:id="@+id/nav_graph11"
    app:startDestination="@+id/nav_item_home">

    <!-- Drawer Navigation -->

    <fragment
        android:id="@+id/nav_item_home"
        android:name="com.bluapp.kotlinview.Navigation.NavFragment"
        android:label="@string/app_name"
        tools:layout="@layout/fragment_nav" />

    <fragment
        android:id="@+id/nav_item_blog"
        android:name="com.bluapp.kotlinview.Navigation.NavFragment"
        android:label="@string/app_name"
        tools:layout="@layout/fragment_nav" />

    <fragment
        android:id="@+id/nav_item_app"
        android:name="com.bluapp.kotlinview.Navigation.NavFragment"
        android:label="@string/app_name"
        tools:layout="@layout/fragment_nav" />

    
</navigation>

layout/drawer_header.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="178dp"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="#9c9c9c"
    android:gravity="bottom"
    android:orientation="vertical"
    android:padding="16dp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark">

    <androidx.appcompat.widget.AppCompatImageView
        android:id="@+id/profile_image"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:layout_marginTop="15dp"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <androidx.appcompat.widget.AppCompatTextView
        android:id="@+id/username_field"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/profile_image"
        android:text="Username"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1"
        android:textStyle="bold"
        app:layout_constraintTop_toBottomOf="@id/profile_image"/>

    <androidx.appcompat.widget.AppCompatTextView
        android:id="@+id/email_field"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/username_field"
        android:text="Email"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1"
        app:layout_constraintTop_toBottomOf="@id/username_field"/>

</androidx.constraintlayout.widget.ConstraintLayout>

menu/drawermenubadge.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/nav_item_home"
        android:title="@string/home" />
    <item
        android:id="@+id/nav_item_blog"
        android:title="@string/blog"
        app:actionViewClass="androidx.appcompat.widget.AppCompatTextView"/>
    <item
        android:id="@+id/nav_item_app"
        android:title="@string/App" />
</menu>

MainActivity.kt

import android.graphics.Color
import android.graphics.Typeface
import android.os.Bundle
import android.view.Gravity
import androidx.appcompat.app.AppCompatActivity
import androidx.appcompat.widget.AppCompatTextView
import androidx.appcompat.widget.Toolbar
import androidx.core.view.MenuItemCompat
import androidx.drawerlayout.widget.DrawerLayout
import androidx.navigation.findNavController
import androidx.navigation.ui.AppBarConfiguration
import androidx.navigation.ui.navigateUp
import androidx.navigation.ui.setupActionBarWithNavController
import androidx.navigation.ui.setupWithNavController
import com.bluapp.kotlinview.R
import com.google.android.material.navigation.NavigationView


class NavigationActivity11 : AppCompatActivity() {
    private lateinit var appBarConfiguration: AppBarConfiguration
    private var blogTv: AppCompatTextView? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_navigation11)
        val toolbar: Toolbar = findViewById(R.id.toolbar)

        setSupportActionBar(toolbar)
        val drawerLayout: DrawerLayout = findViewById(R.id.drawer_layout)
        val navView: NavigationView = findViewById(R.id.nav_view)
        val navController = findNavController(R.id.nav_host_fragment)
        appBarConfiguration = AppBarConfiguration(
            setOf(R.id.nav_item_home, R.id.nav_item_blog, R.id.nav_item_app), drawerLayout
        )
        setupActionBarWithNavController(navController, appBarConfiguration)
        navView.setupWithNavController(navController)
        blogTv = MenuItemCompat.getActionView(navView.menu.findItem(R.id.nav_item_blog)) as AppCompatTextView
        initCountOnDrawer()
    }

    override fun onSupportNavigateUp(): Boolean {
        val navController = findNavController(R.id.nav_host_fragment)
        return navController.navigateUp(appBarConfiguration) || super.onSupportNavigateUp()
    }

    fun initCountOnDrawer(){
        blogTv!!.gravity = Gravity.CENTER_VERTICAL
        blogTv!!.setTypeface(null, Typeface.BOLD)
        blogTv!!.setTextColor(Color.RED)
        blogTv!!.text = "60"
    }
}

fragment_nav.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".Navigation.NavFragment">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="NavFragment"
        android:textSize="20sp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>


</androidx.constraintlayout.widget.ConstraintLayout>

NavFragment.kt

import android.os.Bundle
import androidx.fragment.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup

import com.bluapp.kotlinview.R


class NavFragment : Fragment() {

    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        return inflater.inflate(R.layout.fragment_nav, container, false)
    }

}

values/styles.xml

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />

    <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />

    <style name="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
        <item name="android:windowDrawsSystemBarBackgrounds">true</item>
    </style>

AndroidManifest.xml

<activity
            android:name=".Navigation.NavigationActivity11"
            android:theme="@style/AppTheme.NoActionBar" />

app/build.gradle

 implementation 'androidx.navigation:navigation-fragment:2.1.0'
    implementation 'androidx.navigation:navigation-ui:2.1.0'
    implementation 'androidx.navigation:navigation-fragment-ktx:2.1.0'
    implementation 'androidx.navigation:navigation-ui-ktx:2.1.0'

If you have any question or suggestions kindly use the comment box or you can contact us directly through our contact page below.

HOW TO ADD MENU ITEM BADGE TO ANDROID COMPONENT NAVIGATION IN KOTLIN

You like what you Read then Vote!

0 / 5 5 3

Your page rank:

Recent Articles

HOW TO POSITION A VIEW AT THE BOTTOM RIGHT SIDE OF A PAGE IN REACT NATIVE

HOW TO POSITION A VIEW ABOVE ANOTHER VIEW IN REACT NATIVE

HOW TO MAKE A VIEW OCCUPY THE ENTIRE SCREEN IN REACT NATIVE

HOW TO PLACE A VIEW AT THE BOTTOM OF THE SCREEN IN REACT NATIVE

HOW TO PLACE A VIEW AT THE TOP OF THE SCREEN IN REACT NATIVE

Related Stories

Stay on op - Ge the daily news in your inbox

HOW TO ADD MENU ITEM BADGE TO ANDROID COMPONENT NAVIGATION IN KOTLIN You like what you Read then Vote! 0 / 5 5 3 Your page rank:

Recent Articles

Related Stories

Stay on op - Ge the daily news in your inbox

HOW TO ADD MENU ITEM BADGE TO ANDROID COMPONENT NAVIGATION IN KOTLIN

You like what you Read then Vote!

0 / 5 5 3

Your page rank: