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
300
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
86
My Workspace [2020/06版]
umechanhika
0
33
Capture view and Register to gallery
umechanhika
0
42
Shape Design with Material Components
umechanhika
3
210
Firebase MLKit AutoML Vision Edgeを触ってみた
umechanhika
3
500
Google Play Consoleの時間指定公開のハマりポイント
umechanhika
1
1.4k
UIテスト初心者のチームにUIテスト自動化を導入した話
umechanhika
0
100
GoogleI/Oアプリのようなフィルター機能を実装する
umechanhika
2
470
Jenkins + Bitbucketでアプリリリースを自動化してみた
umechanhika
1
600
Other Decks in Programming
See All in Programming
Асинхронность неизбежна: как мы проектировали сервис уведомлений
lamodatech
0
690
rails statsで大解剖 🔍 “B/43流” のRailsの育て方を歴史とともに振り返ります
shoheimitani
2
930
モバイルアプリにおける自動テストの導入戦略
ostk0069
0
110
StarlingMonkeyを触ってみた話 - 2024冬
syumai
3
270
KMP와 kotlinx.rpc로 서버와 클라이언트 동기화
kwakeuijin
0
140
nekko cloudにおけるProxmox VE利用事例
irumaru
3
420
Cloudflare MCP ServerでClaude Desktop からWeb APIを構築
kutakutat
1
530
競技プログラミングへのお誘い@阪大BOOSTセミナー
kotamanegi
0
350
useSyncExternalStoreを使いまくる
ssssota
6
1k
クリエイティブコーディングとRuby学習 / Creative Coding and Learning Ruby
chobishiba
0
3.9k
testcontainers のススメ
sgash708
1
120
複雑な仕様に立ち向かうアーキテクチャ
myohei
0
170
Featured
See All Featured
What's in a price? How to price your products and services
michaelherold
243
12k
StorybookのUI Testing Handbookを読んだ
zakiyama
27
5.3k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7k
Unsuck your backbone
ammeep
669
57k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
0
96
Faster Mobile Websites
deanohume
305
30k
The Language of Interfaces
destraynor
154
24k
How to Think Like a Performance Engineer
csswizardry
22
1.2k
Side Projects
sachag
452
42k
A Modern Web Designer's Workflow
chriscoyier
693
190k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
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!