LoginSignup
3
1

More than 3 years have passed since last update.

BottomNavigationViewにバッジを表示する

Last updated at Posted at 2019-07-29

BottomNavigationViewでバッジを表示する機能が追加されたっていう記事をみて自分でも試してみた。
が、バッジを表示なんてできないじゃないか!?

どういうことか?
しらべてみた。

結論

AndroidXのmaterialライブラリのalpha06から使えるようになった。
フツーにサポートライブラリで使えるのかと思っていたよ。。。
皆さんも、AndroidXにのりかえましょー!

  • android.support.design.widget.BottomNavigationView
    (com.android.support:design)

    • 28.0.0 →非対応
  • com.google.android.material.bottomnavigation.BottomNavigationView
    (com.google.android.material:material)

    • 1.0.0 : 非対応
    • 1.1.0-alpha05 : 非対応
    • 1.1.0-alpha06 : 対応!!!(ここから)
    • 1.1.0-alpha07 : 対応
    • 1.1.0-alpha08 : 対応(showBadge()が消えたので注意)

画面サンプル

device-2019-07-29-165303.png

実装方法

AndroidStudio のBottomNavigationViewActivity をベースに修正。

alpha06~alpha07まで

バッヂ表示が追加されました。
showBadge()でバッヂが表示されますが、
引数 menuItemId はgetMenu().getItem(0).itemId で取得したIDを使ってください。

MainActivity.kt
package com.example.androidxapp

import android.os.Bundle
import com.google.android.material.bottomnavigation.BottomNavigationView
import androidx.appcompat.app.AppCompatActivity
import android.widget.TextView
import androidx.core.view.get

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val navView: BottomNavigationView = findViewById(R.id.nav_view)

        textMessage = findViewById(R.id.message)
        navView.setOnNavigationItemSelectedListener(onNavigationItemSelectedListener)

        navView.menu.getItem(0).itemId.let {
            navView.showBadge(it).apply {
                number = 999
            }
        }
    }
}

alpha08から

showBadge()が削除されました。
BadgeDrawable#isVisible=trueにします。

MainActivity.kt
package com.example.androidxapp

import android.os.Bundle
import com.google.android.material.bottomnavigation.BottomNavigationView
import androidx.appcompat.app.AppCompatActivity
import android.widget.TextView
import androidx.core.view.get

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val navView: BottomNavigationView = findViewById(R.id.nav_view)

        textMessage = findViewById(R.id.message)
        navView.setOnNavigationItemSelectedListener(onNavigationItemSelectedListener)

        navView.menu.getItem(0).itemId.let {
            navView.getOrCreateBadge(it).apply {
                number = 999
                isVisible = true
            }
        }
    }
}

いじょ

3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
1