BottomNavigationViewにバッジを表示する

7968 ワード
Android MaterialDesign AndroidX Android テキストリンク

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()が消えたので注意)

画面サンプル

実装方法

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
            }
        }
    }
}

いじょ