Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Badging for Tabs and Bottom Navigation
Search
umechanhika
February 12, 2020
Programming
0
330
Badging for Tabs and Bottom Navigation
umechanhika
February 12, 2020
Tweet
Share
More Decks by umechanhika
See All by umechanhika
My Workspace [2020/08版]
umechanhika
0
96
My Workspace [2020/06版]
umechanhika
0
41
Capture view and Register to gallery
umechanhika
0
48
Shape Design with Material Components
umechanhika
3
240
Firebase MLKit AutoML Vision Edgeを触ってみた
umechanhika
3
530
Google Play Consoleの時間指定公開のハマりポイント
umechanhika
1
1.5k
UIテスト初心者のチームにUIテスト自動化を導入した話
umechanhika
0
110
GoogleI/Oアプリのようなフィルター機能を実装する
umechanhika
2
500
Jenkins + Bitbucketでアプリリリースを自動化してみた
umechanhika
1
640
Other Decks in Programming
See All in Programming
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
280
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
510
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
760
関数型まつりレポート for JuliaTokai #22
antimon2
0
160
10 Costly Database Performance Mistakes (And How To Fix Them)
andyatkinson
0
230
ニーリーにおけるプロダクトエンジニア
nealle
0
790
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
540
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
550
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
510
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
51
33k
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
730
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
440
Featured
See All Featured
Embracing the Ebb and Flow
colly
86
4.7k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Designing for Performance
lara
610
69k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
How to Ace a Technical Interview
jacobian
277
23k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
The Cult of Friendly URLs
andyhume
79
6.5k
Transcript
Badging for Tabs and Bottom Navigation
About me Hikaru Umetsu (@umechanhika) Fintech startup Individual developer Fav:
Android & Flutter Individual Job ?
Material Components 1.1.0 released !
Today’s topic
Badging for Tabs and Bottom Navigation Reference:https://material.io/develop/android/components/tab-layout/
Use “BadgeDrawable” val tabBadge: BadgeDrawable = tabLayout.getTabAt(0)?.orCreateBadge val navBadge: BadgeDrawable
= bottomNavigation.getOrCreateBadge(R.id.menu1)
Use “BadgeDrawable” val tabBadge: BadgeDrawable = tabLayout.getTabAt(0)?.orCreateBadge val navBadge: BadgeDrawable
= bottomNavigation.getOrCreateBadge(R.id.menu1)
val tabBadge: BadgeDrawable = tabLayout.getTabAt(0)?.orCreateBadge tabBadge.isVisible = true Show “Dot
badge” Reference:https://material.io/develop/android/components/tab-layout/
Show “Badge with number” val tabBadge: BadgeDrawable = tabLayout.getTabAt(0)?.orCreateBadge tabBadge.number
= 99 tabBadge.isVisible = true Reference:https://material.io/develop/android/components/tab-layout/
Show “Badge with a maximum count” val tabBadge: BadgeDrawable =
tabLayout.getTabAt(0)?.orCreateBadge tabBadge.maxCharacterCount = 3 tabBadge.number = 1000 tabBadge.isVisible = true Reference:https://material.io/develop/android/components/tab-layout/
Caution max “character” count It can shows “9+”, “99+” or
etc. It cannot shows “5+”, “10+” or etc. Reference:https://material.io/develop/android/components/tab-layout/
Remove badges tabLayout.getTabAt(0)?.removeBadge() Reference:https://material.io/develop/android/components/tab-layout/
Demo Reference:https://github.com/umechanhika/playground/tree/master/android/BadgeDrawableSample
Tab and BottomNav can show badges since MDC 1.1.0 Use
BadgeDrawable It can show “Dot”, “Number” and “Maximum count” badge Summary
Thanks!