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
230
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
75
My Workspace [2020/06版]
umechanhika
0
25
Capture view and Register to gallery
umechanhika
0
38
Shape Design with Material Components
umechanhika
3
210
Firebase MLKit AutoML Vision Edgeを触ってみた
umechanhika
3
440
Google Play Consoleの時間指定公開のハマりポイント
umechanhika
1
1.3k
UIテスト初心者のチームにUIテスト自動化を導入した話
umechanhika
0
95
GoogleI/Oアプリのようなフィルター機能を実装する
umechanhika
2
450
Jenkins + Bitbucketでアプリリリースを自動化してみた
umechanhika
1
530
Other Decks in Programming
See All in Programming
イベントストーミングによるオブジェクトモデリング・オブジェクト指向プログラミングの適用・開発プロセスの変遷・アーキテクチャの変革 / Object modeling with Event Storming.
nrslib
12
2.9k
TDDと今まで
kanayannet
0
140
Open Source Swiftc Workshop
kitasuke
1
180
PHP8の機能を使って堅牢にコードを書く
fendo181
6
2.6k
品質が高いコードって何?Rev2.1
ickx
1
490
WebComponentsで フレームワークを1ページに共存させる
webuilder240
0
150
App Router への移行は「改善」となり得るのか?/ Can migration to App Router be an improvement
takefumiyoshii
1
120
ここ1~2年くらいで 使えるようになった(主要ブラウザーの最新版 がすべて対応した ) ウェブの新機能について ランダムに喋る!
myzkyy
9
6.5k
決断するための勇気、そのためのBacklog / Courage to make decisions, Backlog for that.
seike460
PRO
4
1.9k
Kotlinを用いたDSL的な設計手法と使用上の注意
kohii00
3
530
IntelliJ IDEA を知らなかった 自分に教えたい小ネタ集 / IntelliJ IDEA Hints for My Past Self
mackey0225
3
170
生成 AI の中身を覗いてみよう〜基礎から医療現場での応用まで〜
soh9834
2
760
Featured
See All Featured
Keith and Marios Guide to Fast Websites
keithpitt
407
22k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
19
1.9k
Testing 201, or: Great Expectations
jmmastey
27
6.3k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
355
22k
Being A Developer After 40
akosma
56
580k
GraphQLとの向き合い方2022年版
quramy
28
12k
From Idea to $5000 a Month in 5 Months
shpigford
376
45k
Adopting Sorbet at Scale
ufuk
66
8.5k
jQuery: Nuts, Bolts and Bling
dougneiner
57
7.1k
In The Pink: A Labor of Love
frogandcode
137
21k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
242
20k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
272
12k
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!