Kaitou kid code

Khi siêu đạo chích đi code dạo :)

notification screen

BottomNavigationView is one of the most component in Material Design supported by Google.
Link:
https://material.io/develop/android/components/bottom-navigation-view/
Today, I will show you how to implement BottomNavigationView and how to add Badge in BottomNavigationView at special position menu.
Firstly, we must create a layout include BottomNavigationView like bellow:


As you can see, we have a BottomNavigationView at Bottom of layout. labelVisibilityMode = “labeled” make sure we will see icon and text together.

private fun initBottomView() {
navigation = findViewById(R.id.nav_view) as BottomNavigationView
navigation?.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener)
navigation?.setOnNavigationItemReselectedListener(mOnNavigationItemReSelectedListener)
navigation?.itemIconTintList = null

}

private val mOnNavigationItemReSelectedListener: BottomNavigationView.OnNavigationItemReselectedListener = BottomNavigationView.OnNavigationItemReselectedListener { }

private val mOnNavigationItemSelectedListener: BottomNavigationView.OnNavigationItemSelectedListener = BottomNavigationView.OnNavigationItemSelectedListener { item ->
when (item.itemId) {
R.id.nav_home -> {
if (homeViewPager.currentItem != BOTTOM_TAB_HOME) {
homeViewPager.currentItem = BOTTOM_TAB_HOME
}
}
R.id.nav_performance -> {
if (homeViewPager.currentItem != BOTTOM_TAB_PERFORMANCE) {
homeViewPager.currentItem = BOTTOM_TAB_PERFORMANCE
}
}
R.id.nav_notification -> {
if (homeViewPager.currentItem != BOTTOM_TAB_NOTIFICATION) {
homeViewPager.currentItem = BOTTOM_TAB_NOTIFICATION
}
}

R.id.nav_transactions -> {
if (homeViewPager.currentItem != BOTTOM_TAB_TRANSACTION) {
homeViewPager.currentItem = BOTTOM_TAB_TRANSACTION
}
}

R.id.nav_account -> {
if (homeViewPager.currentItem != BOTTOM_TAB_ACCOUNT) {
homeViewPager.currentItem = BOTTOM_TAB_ACCOUNT
}
}
}

true
}

And this is code for make Badge at BottomNavigationView:

try {
val numberCount = event.numberCount // Int value for display number count notification.
val badge: BadgeDrawable? = navigation?.getOrCreateBadge(R.id.nav_notification) // find Id of item menu you want to show Badge.
badge?.badgeTextColor = resources.getColor(R.color.white) // set text color for Badge.
badge?.maxCharacterCount = 3 // maximum character count for display Badge, ex: 999+
badge?.backgroundColor = resources.getColor(R.color.c_FF3A30) // set background color for Badge ex: Red.
if (numberCount > 0) {
badge?.number = numberCount
badge?.isVisible = true // show Badge
} else {
badge?.isVisible = false // hide Badge if number count is equal zero.
}
} catch (ex: Exception) {
ex.printStackTrace()
}

That all! Happy coding.

Bình luận qua Facebook

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *