Skip to content

Commit 90b8500

Browse files
jakerosemanJolandaVerhoef
jakeroseman
and
JolandaVerhoef
authored
Navigation drawer examples (#380)
* Basic navigation drawer examples * Add previews * Fix merge issue * Apply Spotless * rearrange functions * Narrowing the examples to just the example with nested items * Apply Spotless * refactoring as dismissable drawer * Fixing imports * refactor, new region tags * Renaming functions * Apply Spotless * Add horizontal padding to the drawer content * Apply Spotless * Make drawer content scrollable to make it work on small screens / landscape --------- Co-authored-by: jakeroseman <[email protected]> Co-authored-by: Jolanda Verhoef <[email protected]>
1 parent 5545f37 commit 90b8500

File tree

3 files changed

+151
-1
lines changed

3 files changed

+151
-1
lines changed

‎compose/snippets/src/main/java/com/example/compose/snippets/SnippetsActivity.kt

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616

1717
package com.example.compose.snippets
1818

19+
import NavigationDrawerExamples
1920
import android.os.Bundle
2021
import android.os.StrictMode
2122
import androidx.activity.ComponentActivity
@@ -117,6 +118,7 @@ class SnippetsActivity : ComponentActivity() {
117118
TopComponentsDestination.CarouselExamples -> CarouselExamples()
118119
TopComponentsDestination.MenusExample -> MenusExamples()
119120
TopComponentsDestination.TooltipExamples -> TooltipExamples()
121+
TopComponentsDestination.NavigationDrawerExamples -> NavigationDrawerExamples()
120122
}
121123
}
122124
}

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

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
/*
2+
* Copyright 2024 The Android Open Source Project
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* https://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
import androidx.compose.foundation.layout.Box
18+
import androidx.compose.foundation.layout.Column
19+
import androidx.compose.foundation.layout.PaddingValues
20+
import androidx.compose.foundation.layout.Spacer
21+
import androidx.compose.foundation.layout.height
22+
import androidx.compose.foundation.layout.padding
23+
import androidx.compose.foundation.rememberScrollState
24+
import androidx.compose.foundation.verticalScroll
25+
import androidx.compose.material.icons.Icons
26+
import androidx.compose.material.icons.automirrored.outlined.Help
27+
import androidx.compose.material.icons.filled.Menu
28+
import androidx.compose.material.icons.outlined.Settings
29+
import androidx.compose.material3.DrawerValue
30+
import androidx.compose.material3.ExperimentalMaterial3Api
31+
import androidx.compose.material3.HorizontalDivider
32+
import androidx.compose.material3.Icon
33+
import androidx.compose.material3.IconButton
34+
import androidx.compose.material3.MaterialTheme
35+
import androidx.compose.material3.ModalDrawerSheet
36+
import androidx.compose.material3.ModalNavigationDrawer
37+
import androidx.compose.material3.NavigationDrawerItem
38+
import androidx.compose.material3.Scaffold
39+
import androidx.compose.material3.Text
40+
import androidx.compose.material3.TopAppBar
41+
import androidx.compose.material3.rememberDrawerState
42+
import androidx.compose.runtime.Composable
43+
import androidx.compose.runtime.rememberCoroutineScope
44+
import androidx.compose.ui.Modifier
45+
import androidx.compose.ui.tooling.preview.Preview
46+
import androidx.compose.ui.unit.dp
47+
import kotlinx.coroutines.launch
48+
49+
@Composable
50+
fun NavigationDrawerExamples() {
51+
// Add more examples here in future if necessary.
52+
53+
DetailedDrawerExample { innerPadding ->
54+
Box(modifier = Modifier.padding(innerPadding)) {
55+
Text(
56+
"Swipe from left edge or use menu icon to open the dismissible drawer",
57+
modifier = Modifier.padding(16.dp)
58+
)
59+
}
60+
}
61+
}
62+
63+
@OptIn(ExperimentalMaterial3Api::class)
64+
// [START android_compose_components_detaileddrawerexample]
65+
@Composable
66+
fun DetailedDrawerExample(
67+
content: @Composable (PaddingValues) -> Unit
68+
) {
69+
val drawerState = rememberDrawerState(initialValue = DrawerValue.Closed)
70+
val scope = rememberCoroutineScope()
71+
72+
ModalNavigationDrawer(
73+
drawerContent = {
74+
ModalDrawerSheet {
75+
Column(
76+
modifier = Modifier.padding(horizontal = 16.dp)
77+
.verticalScroll(rememberScrollState())
78+
) {
79+
Spacer(Modifier.height(12.dp))
80+
Text("Drawer Title", modifier = Modifier.padding(16.dp), style = MaterialTheme.typography.titleLarge)
81+
HorizontalDivider()
82+
83+
Text("Section 1", modifier = Modifier.padding(16.dp), style = MaterialTheme.typography.titleMedium)
84+
NavigationDrawerItem(
85+
label = { Text("Item 1") },
86+
selected = false,
87+
onClick = { /* Handle click */ }
88+
)
89+
NavigationDrawerItem(
90+
label = { Text("Item 2") },
91+
selected = false,
92+
onClick = { /* Handle click */ }
93+
)
94+
95+
HorizontalDivider(modifier = Modifier.padding(vertical = 8.dp))
96+
97+
Text("Section 2", modifier = Modifier.padding(16.dp), style = MaterialTheme.typography.titleMedium)
98+
NavigationDrawerItem(
99+
label = { Text("Settings") },
100+
selected = false,
101+
icon = { Icon(Icons.Outlined.Settings, contentDescription = null) },
102+
badge = { Text("20") }, // Placeholder
103+
onClick = { /* Handle click */ }
104+
)
105+
NavigationDrawerItem(
106+
label = { Text("Help and feedback") },
107+
selected = false,
108+
icon = { Icon(Icons.AutoMirrored.Outlined.Help, contentDescription = null) },
109+
onClick = { /* Handle click */ },
110+
)
111+
Spacer(Modifier.height(12.dp))
112+
}
113+
}
114+
},
115+
drawerState = drawerState
116+
) {
117+
Scaffold(
118+
topBar = {
119+
TopAppBar(
120+
title = { Text("Navigation Drawer Example") },
121+
navigationIcon = {
122+
IconButton(onClick = {
123+
scope.launch {
124+
if (drawerState.isClosed) {
125+
drawerState.open()
126+
} else {
127+
drawerState.close()
128+
}
129+
}
130+
}) {
131+
Icon(Icons.Default.Menu, contentDescription = "Menu")
132+
}
133+
}
134+
)
135+
}
136+
) { innerPadding ->
137+
content(innerPadding)
138+
}
139+
}
140+
}
141+
// [END android_compose_components_detaileddrawerexample]
142+
143+
@Preview
144+
@Composable
145+
fun DetailedDrawerExamplePreview() {
146+
NavigationDrawerExamples()
147+
}

‎compose/snippets/src/main/java/com/example/compose/snippets/navigation/Destination.kt

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,5 +47,6 @@ enum class TopComponentsDestination(val route: String, val title: String) {
4747
DatePickerExamples("datePickerExamples", "Date Pickers"),
4848
CarouselExamples("carouselExamples", "Carousel"),
4949
MenusExample("menusExamples", "Menus"),
50-
TooltipExamples("tooltipExamples", "Tooltips")
50+
TooltipExamples("tooltipExamples", "Tooltips"),
51+
NavigationDrawerExamples("navigationDrawerExamples", "Navigation drawer")
5152
}

0 commit comments

Comments
 (0)