Skip to content

Commit a597454

Browse files
wardlaurenwardlauren
committed
Adding navigation bar, navigation rail, and tabs examples
1 parent 2c3ccf1 commit a597454

File tree

1 file changed

+199
-0
lines changed
  • compose/snippets/src/main/java/com/example/compose/snippets/components

1 file changed

+199
-0
lines changed

‎compose/snippets/src/main/java/com/example/compose/snippets/components/Navigation.kt‎

Lines changed: 199 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,199 @@
1+
package com.example.compose.snippets.components
2+
3+
import androidx.compose.foundation.layout.Box
4+
import androidx.compose.foundation.layout.fillMaxSize
5+
import androidx.compose.material.icons.Icons
6+
import androidx.compose.material.icons.filled.Album
7+
import androidx.compose.material.icons.filled.MusicNote
8+
import androidx.compose.material.icons.filled.PlaylistAddCircle
9+
import androidx.compose.material3.Icon
10+
import androidx.compose.material3.NavigationBar
11+
import androidx.compose.material3.NavigationBarDefaults
12+
import androidx.compose.material3.NavigationBarItem
13+
import androidx.compose.material3.Scaffold
14+
import androidx.compose.material3.Text
15+
import androidx.compose.runtime.Composable
16+
import androidx.compose.runtime.saveable.rememberSaveable
17+
import androidx.compose.ui.Alignment
18+
import androidx.compose.ui.Modifier
19+
import androidx.compose.ui.graphics.vector.ImageVector
20+
import androidx.compose.ui.tooling.preview.Preview
21+
import androidx.navigation.NavHostController
22+
import androidx.navigation.compose.NavHost
23+
import androidx.navigation.compose.composable
24+
import androidx.navigation.compose.rememberNavController
25+
import androidx.compose.runtime.mutableIntStateOf
26+
import androidx.compose.runtime.getValue
27+
import androidx.compose.runtime.setValue
28+
import androidx.compose.material3.NavigationRail
29+
import androidx.compose.material3.NavigationRailItem
30+
import androidx.compose.foundation.layout.padding
31+
import androidx.compose.material3.ExperimentalMaterial3Api
32+
import androidx.compose.material3.PrimaryTabRow
33+
import androidx.compose.material3.Tab
34+
import androidx.compose.ui.text.style.TextOverflow
35+
36+
@Composable
37+
fun SongsScreen(modifier: Modifier = Modifier) {
38+
Box(
39+
modifier = Modifier.fillMaxSize(),
40+
contentAlignment = Alignment.Center
41+
) {
42+
Text("Songs Screen")
43+
}
44+
}
45+
46+
@Composable
47+
fun AlbumScreen(modifier: Modifier = Modifier) {
48+
Box(
49+
modifier = Modifier.fillMaxSize(),
50+
contentAlignment = Alignment.Center
51+
) {
52+
Text("Album Screen")
53+
}
54+
}
55+
56+
@Composable
57+
fun PlaylistScreen(modifier: Modifier = Modifier) {
58+
Box(
59+
modifier = Modifier.fillMaxSize(),
60+
contentAlignment = Alignment.Center
61+
) {
62+
Text("Playlist Screen")
63+
}
64+
}
65+
66+
enum class Destination(
67+
val route: String,
68+
val label: String,
69+
val icon: ImageVector,
70+
val contentDescription: String
71+
) {
72+
SONGS("songs", "Songs", Icons.Default.MusicNote, "Songs"),
73+
ALBUM("album", "Album", Icons.Default.Album, "Album"),
74+
PLAYLISTS("playlist", "Playlist", Icons.Default.PlaylistAddCircle, "Playlist")
75+
}
76+
77+
@Composable
78+
fun AppNavHost(
79+
navController: NavHostController,
80+
startDestination: Destination,
81+
modifier: Modifier = Modifier
82+
) {
83+
NavHost(
84+
navController,
85+
startDestination = startDestination.route
86+
) {
87+
Destination.entries.forEach { destination ->
88+
composable(destination.route) {
89+
when (destination) {
90+
Destination.SONGS -> SongsScreen()
91+
Destination.ALBUM -> AlbumScreen()
92+
Destination.PLAYLISTS -> PlaylistScreen()
93+
}
94+
}
95+
}
96+
}
97+
}
98+
99+
@Preview()
100+
// [START android_compose_components_navigationbarexample]
101+
@Composable
102+
fun NavigationBarExample(modifier: Modifier = Modifier) {
103+
val navController = rememberNavController()
104+
val startDestination = Destination.SONGS
105+
var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) }
106+
107+
Scaffold(
108+
bottomBar = {
109+
NavigationBar(windowInsets = NavigationBarDefaults.windowInsets) {
110+
Destination.entries.forEachIndexed { index, destination ->
111+
NavigationBarItem(
112+
selected = selectedDestination == index,
113+
onClick = {
114+
navController.navigate(route = destination.route)
115+
selectedDestination = index
116+
},
117+
icon = {
118+
Icon(
119+
destination.icon,
120+
contentDescription = destination.contentDescription
121+
)
122+
},
123+
label = { Text(destination.label) }
124+
)
125+
}
126+
}
127+
}
128+
) { contentPadding ->
129+
AppNavHost(navController, startDestination, modifier = Modifier.padding(contentPadding))
130+
}
131+
}
132+
// [END android_compose_components_navigationbarexample]
133+
134+
@Preview()
135+
// [START android_compose_components_navigationrailexample]
136+
@Composable
137+
fun NavigationRailExample(modifier: Modifier = Modifier) {
138+
val navController = rememberNavController()
139+
val startDestination = Destination.SONGS
140+
var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) }
141+
142+
Scaffold { contentPadding ->
143+
NavigationRail (modifier = Modifier.padding(contentPadding)) {
144+
Destination.entries.forEachIndexed { index, destination ->
145+
NavigationRailItem(
146+
selected = selectedDestination == index,
147+
onClick = {
148+
navController.navigate(route = destination.route)
149+
selectedDestination = index
150+
},
151+
icon = {
152+
Icon(
153+
destination.icon,
154+
contentDescription = destination.contentDescription
155+
)
156+
},
157+
label = { Text(destination.label) }
158+
)
159+
}
160+
}
161+
AppNavHost(navController, startDestination)
162+
}
163+
}
164+
// [END android_compose_components_navigationrailexample]
165+
166+
@OptIn(ExperimentalMaterial3Api::class)
167+
@Preview(showBackground = true)
168+
// [START android_compose_components_navigationtabexample]
169+
@Composable
170+
fun NavigationTabExample(modifier: Modifier = Modifier) {
171+
val navController = rememberNavController()
172+
val startDestination = Destination.SONGS
173+
var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) }
174+
175+
Scaffold{ contentPadding ->
176+
PrimaryTabRow(selectedTabIndex = selectedDestination, modifier = Modifier.padding(contentPadding)) {
177+
Destination.entries.forEachIndexed { index, destination ->
178+
Tab(
179+
selected = selectedDestination == index,
180+
onClick = {
181+
navController.navigate(route = destination.route)
182+
selectedDestination = index
183+
},
184+
text = {
185+
Text(
186+
text = destination.label,
187+
maxLines = 2,
188+
overflow = TextOverflow.Ellipsis
189+
)
190+
}
191+
)
192+
}
193+
}
194+
AppNavHost(navController, startDestination)
195+
}
196+
}
197+
// [END android_compose_components_navigationtabexample]
198+
199+

0 commit comments

Comments
 (0)