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
M3 NavigationBar をマスターする
Search
akkiee76
November 05, 2023
Technology
0
940
M3 NavigationBar をマスターする
akkiee76
November 05, 2023
Tweet
Share
More Decks by akkiee76
See All by akkiee76
Graph Art with Charts API – Beyond Data Visualization
akkie76
0
140
Meet the Translation API
akkie76
0
380
コードレビューで開発を加速させるAIコードレビュー
akkie76
1
610
Android Target SDK 35 (Android 15) 対応の概要
akkie76
0
5.6k
コードレビューを支援するAI技術の応用
akkie76
5
1.2k
オブジェクト指向コードレビューの新しいアプローチ
akkie76
3
9k
Jetpack Compose で Adaptive Layout に対応しよう
akkie76
0
890
Observationではじめる値監視
akkie76
4
4.6k
TextField 表示スタイル変更の 有効活用例 5 選
akkie76
0
690
Other Decks in Technology
See All in Technology
React開発にStorybookとCopilotを導入して、爆速でUIを編集・確認する方法
yu_kod
1
130
Connect 100+を支える技術
kanyamaguc
0
180
高速なプロダクト開発を実現、創業期から掲げるエンタープライズアーキテクチャ
kawauso
2
7.6k
20250707-AI活用の個人差を埋めるチームづくり
shnjtk
3
2.9k
無意味な開発生産性の議論から抜け出すための予兆検知とお金とAI
i35_267
3
11k
Flutter向けPDFビューア、pdfrxのpdfium WASM対応について
espresso3389
0
120
Geminiとv0による高速プロトタイピング
shinya337
0
230
mrubyと micro-ROSが繋ぐロボットの世界
kishima
3
400
Southwest airlines®️ USA Contact Numbers: Complete 2025 Support Guide
oliversmith12
0
110
モバイル界のMCPを考える
naoto33
0
410
マネジメントって難しい、けどおもしろい / Management is tough, but fun! #em_findy
ar_tama
4
670
FOSS4G 2025 KANSAI QGISで点群データをいろいろしてみた
kou_kita
0
380
Featured
See All Featured
Balancing Empowerment & Direction
lara
1
410
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
The Cult of Friendly URLs
andyhume
79
6.5k
Embracing the Ebb and Flow
colly
86
4.7k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
5
250
Making Projects Easy
brettharned
116
6.3k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.8k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Six Lessons from altMBA
skipperchong
28
3.9k
Transcript
©2023 RAKUS Co., Ltd. M3 NavigationBar をマスターする Shibuya.apk #45 2023/11/10
@akkiee76
Akihiko Sato 株式会社ラクス / 楽楽精算 / モバイル開発チーム @akkiee76 自己紹介
M3 NavigationBar 概要 • 画面下部に表示し、ナビゲーションを提供するコンポーネント • M2 BottomNavigation が M3
NavigationBar に名称変更 • NavigationBar の要素は NavigationBarItem • 「Bottom Navigation Views Activity」 は M3 Compose 非対応 https://developer.android.com/jetpack/compose/designsystems/material2-material3?hl=ja#bottom-navigation NavigationBar BottomNavigation
Implementation 1. NavigationBar を設定する 2. NavigationBarItem を追加する 3. 画面切り替えを行う 4.
Badge を付ける
Let's Implement 🛠
1. NavigationBar を設定する Scaffold( bottomBar = { NavigationBar { }
} ) { Surface( modifier = Modifier .padding(bottom = it.calculateBottomPadding()) ) { }
2. NavigationBarItem を追加する enum class NavigationItem ( val label: String,
@DrawableRes val resId: Int ) { HOME("Home", R.drawable.ic_home), EXPLORE("Explore", R.drawable.ic_fmd_good), MESSAGE("Message", R.drawable.ic_chat), STARRED("For You", R.drawable.ic_star); }
Scaffold( bottomBar = { NavigationBar { NavigationItem.entries.forEach { item ->
NavigationBarItem( selected = false, onClick = {}, icon = { Icon( painter = painterResource(id = item.resId), contentDescription = null ) }, label = { Text(text = item.label) } ) } } } 2. NavigationBarItem を追加する
NavigationBarItem の注意点(M3 Guidelines) OK Don’t • ユーザにとって遷移が明確であること • NavigationBarItem は
3 ~ 5 であること • Label を表示すること https://m3.material.io/components/navigation-bar/guidelines
build.gradle.kts dependencies { implementation("androidx.navigation:navigation-compose:2.7.4" ) } val navController = rememberNavController
() Scaffold(bottomBar = { // NavigationBar } ) { Surface(modifier = Modifier.padding(bottom = it.calculateBottomPadding())) { NavHost(navController = navController , startDestination = NavigationItem .HOME.route) { composable(NavigationItem .HOME.route) { HomeScreen() } composable(NavigationItem .EXPLORE.route) { ExploreScreen () } composable(NavigationItem .MESSAGE.route) { MessageScreen () } composable(NavigationItem .STARRED.route) { FavoriteScreen () } } 3. Navigation を行う
val navBackStackEntry by navController.currentBackStackEntryAsState() val destination = navBackStackEntry?.destination NavigationBar {
NavigationItem.entries.forEach { item -> val selected = destination?.hierarchy ?.any { it.route == item.route } == true NavigationBarItem( selected = selected, onClick = { navController.navigate(item.route) { launchSingleTop = true } }, icon = { }, label = { } ) } } 3. Navigation を行う https://developer.android.com/jetpack/compose/navigation?hl=ja#bottom-nav
NavigationBarItem( icon = { BadgedBox( badge = { Badge() }
) { Icon( painter = painterResource(id = item.resId), contentDescription = null ) } 4. Badge を付ける
@ExperimentalMaterial3Api @Composable fun Badge( modifier: Modifier = Modifier, containerColor: Color
= BadgeDefaults.containerColor, contentColor: Color = contentColorFor(containerColor), content: @Composable (RowScope.() -> Unit)? = null, ) BadgedBox( badge = { Badge { Text(text = "1") } }) { Icon( painter = painterResource(id = item.resId), contentDescription = null ) } 4. Badge を付ける(カスタマイズ)
Implementation completed 🛠
Material Design 3 Guidelines 👀
Item 設定の注意点 • 選択時のアイコンは filled(塗りつぶし)を使用すること https://m3.material.io/components/navigation-bar/guidelines OK Caution • Label
は明確かつ十分なコントラストを設定すること OK Don’t Don’t
NavigationBarItem( selected = selected, onClick = onClick, icon = {
val resId = if (selected) item.filledResId else item.outlinedResId Icon( painter = painterResource(id = resId), contentDescription = null ) }, label = { val fontWeight = if (selected) FontWeight.Bold else FontWeight.Normal Text( text = item.label, fontWeight = fontWeight ) } ) M3 Guidelines に準拠する
Implementation completed 🎉
まとめ • NavigationBar は Item を content に指定するだけで 実装可能 ◦
NavigationBarItem の Composable に詳細設定 • M3 Guidelines のチェックも忘れずに
Thank you 🎉