From 209a6aebc9588f947507c200af54d4d77054d0ec Mon Sep 17 00:00:00 2001 From: Jolanda Verhoef Date: Fri, 11 Oct 2024 11:40:56 +0100 Subject: [PATCH 1/2] Filter chip dropdown menu --- .../compose/snippets/components/Menus.kt | 88 +++++++++++++++++++ 1 file changed, 88 insertions(+) diff --git a/compose/snippets/src/main/java/com/example/compose/snippets/components/Menus.kt b/compose/snippets/src/main/java/com/example/compose/snippets/components/Menus.kt index c355f948..d950d2f6 100644 --- a/compose/snippets/src/main/java/com/example/compose/snippets/components/Menus.kt +++ b/compose/snippets/src/main/java/com/example/compose/snippets/components/Menus.kt @@ -16,16 +16,26 @@ package com.example.compose.snippets.components +import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.wrapContentSize import androidx.compose.material.icons.Icons +import androidx.compose.material.icons.automirrored.filled.DirectionsBike +import androidx.compose.material.icons.automirrored.filled.DirectionsRun +import androidx.compose.material.icons.automirrored.filled.DirectionsWalk import androidx.compose.material.icons.automirrored.outlined.Help import androidx.compose.material.icons.automirrored.outlined.OpenInNew import androidx.compose.material.icons.automirrored.outlined.Send +import androidx.compose.material.icons.filled.ArrowDropDown +import androidx.compose.material.icons.filled.Check +import androidx.compose.material.icons.filled.Hiking import androidx.compose.material.icons.filled.MoreVert +import androidx.compose.material.icons.filled.Tune import androidx.compose.material.icons.outlined.Feedback import androidx.compose.material.icons.outlined.Info import androidx.compose.material.icons.outlined.Person @@ -33,6 +43,7 @@ import androidx.compose.material.icons.outlined.Settings import androidx.compose.material3.Button import androidx.compose.material3.DropdownMenu import androidx.compose.material3.DropdownMenuItem +import androidx.compose.material3.FilterChip import androidx.compose.material3.FloatingActionButton import androidx.compose.material3.HorizontalDivider import androidx.compose.material3.Icon @@ -76,6 +87,9 @@ fun MenusExamples() { Button(onClick = { currentExample = { DropdownMenuWithDetails() } }) { Text("Dropdown menu with sections and icons") } + Button(onClick = { currentExample = { DropdownFilter() } }) { + Text("Menu for applying a filter, attached to a filter chip") + } } } } @@ -212,3 +226,77 @@ fun DropdownMenuWithDetails() { fun DropdownMenuWithDetailsPreview() { DropdownMenuWithDetails() } + +@Composable +fun DropdownFilter(modifier: Modifier = Modifier) { + Row( + modifier = modifier + .padding(16.dp) + .wrapContentSize(unbounded = true), + horizontalArrangement = Arrangement.spacedBy(8.dp), + verticalAlignment = Alignment.CenterVertically + ) { + Icon(Icons.Default.Tune, "Filters") + FilterChip(selected = false, onClick = { /*TODO*/ }, label = { Text("Time")}) + DropdownFilterChip() + FilterChip(selected = false, onClick = { /*TODO*/ }, label = { Text("Wheelchair accessible")}) + } +} + +// [START android_compose_components_dropdownfilterchip] +@Composable +fun DropdownFilterChip(modifier: Modifier = Modifier) { + var isDropdownExpanded by remember { mutableStateOf(false) } + var selectedChipText by remember { mutableStateOf(null) } + Box(modifier) { + FilterChip( + selected = selectedChipText != null, + onClick = { isDropdownExpanded = !isDropdownExpanded }, + label = { Text(if(selectedChipText == null) "Type" else "$selectedChipText") }, + leadingIcon = { if(selectedChipText != null) Icon(Icons.Default.Check, null) }, + trailingIcon = { Icon(Icons.Default.ArrowDropDown, null) }, + ) + DropdownMenu(expanded = isDropdownExpanded, + onDismissRequest = { isDropdownExpanded = !isDropdownExpanded }) { + DropdownMenuItem( + text = { Text("Running") }, + leadingIcon = { Icon(Icons.AutoMirrored.Default.DirectionsRun, null) }, + onClick = { + selectedChipText = + if(selectedChipText == "Running") null else "Running" + } + ) + DropdownMenuItem( + text = { Text("Walking") }, + leadingIcon = { Icon(Icons.AutoMirrored.Default.DirectionsWalk, null) }, + onClick = { + selectedChipText = + if(selectedChipText == "Walking") null else "Walking" + } + ) + DropdownMenuItem( + text = { Text("Hiking") }, + leadingIcon = { Icon(Icons.Default.Hiking, null) }, + onClick = { + selectedChipText = + if(selectedChipText == "Hiking") null else "Hiking" + } + ) + DropdownMenuItem( + text = { Text("Cycling") }, + leadingIcon = { Icon(Icons.AutoMirrored.Default.DirectionsBike, null) }, + onClick = { + selectedChipText = + if(selectedChipText == "Cycling") null else "Cycling" + } + ) + } + } +} +// [END android_compose_components_dropdownfilterchip] + +@Preview +@Composable +private fun DropdownFilterPreview() { + DropdownFilter() +} \ No newline at end of file From 103bd22163c7c74f7d00f93d9aa42ff34eccfea3 Mon Sep 17 00:00:00 2001 From: JolandaVerhoef Date: Fri, 11 Oct 2024 10:46:40 +0000 Subject: [PATCH 2/2] Apply Spotless --- .../compose/snippets/components/Menus.kt | 24 ++++++++++--------- 1 file changed, 13 insertions(+), 11 deletions(-) diff --git a/compose/snippets/src/main/java/com/example/compose/snippets/components/Menus.kt b/compose/snippets/src/main/java/com/example/compose/snippets/components/Menus.kt index d950d2f6..a3468a7c 100644 --- a/compose/snippets/src/main/java/com/example/compose/snippets/components/Menus.kt +++ b/compose/snippets/src/main/java/com/example/compose/snippets/components/Menus.kt @@ -237,9 +237,9 @@ fun DropdownFilter(modifier: Modifier = Modifier) { verticalAlignment = Alignment.CenterVertically ) { Icon(Icons.Default.Tune, "Filters") - FilterChip(selected = false, onClick = { /*TODO*/ }, label = { Text("Time")}) + FilterChip(selected = false, onClick = { /*TODO*/ }, label = { Text("Time") }) DropdownFilterChip() - FilterChip(selected = false, onClick = { /*TODO*/ }, label = { Text("Wheelchair accessible")}) + FilterChip(selected = false, onClick = { /*TODO*/ }, label = { Text("Wheelchair accessible") }) } } @@ -252,18 +252,20 @@ fun DropdownFilterChip(modifier: Modifier = Modifier) { FilterChip( selected = selectedChipText != null, onClick = { isDropdownExpanded = !isDropdownExpanded }, - label = { Text(if(selectedChipText == null) "Type" else "$selectedChipText") }, - leadingIcon = { if(selectedChipText != null) Icon(Icons.Default.Check, null) }, + label = { Text(if (selectedChipText == null) "Type" else "$selectedChipText") }, + leadingIcon = { if (selectedChipText != null) Icon(Icons.Default.Check, null) }, trailingIcon = { Icon(Icons.Default.ArrowDropDown, null) }, ) - DropdownMenu(expanded = isDropdownExpanded, - onDismissRequest = { isDropdownExpanded = !isDropdownExpanded }) { + DropdownMenu( + expanded = isDropdownExpanded, + onDismissRequest = { isDropdownExpanded = !isDropdownExpanded } + ) { DropdownMenuItem( text = { Text("Running") }, leadingIcon = { Icon(Icons.AutoMirrored.Default.DirectionsRun, null) }, onClick = { selectedChipText = - if(selectedChipText == "Running") null else "Running" + if (selectedChipText == "Running") null else "Running" } ) DropdownMenuItem( @@ -271,7 +273,7 @@ fun DropdownFilterChip(modifier: Modifier = Modifier) { leadingIcon = { Icon(Icons.AutoMirrored.Default.DirectionsWalk, null) }, onClick = { selectedChipText = - if(selectedChipText == "Walking") null else "Walking" + if (selectedChipText == "Walking") null else "Walking" } ) DropdownMenuItem( @@ -279,7 +281,7 @@ fun DropdownFilterChip(modifier: Modifier = Modifier) { leadingIcon = { Icon(Icons.Default.Hiking, null) }, onClick = { selectedChipText = - if(selectedChipText == "Hiking") null else "Hiking" + if (selectedChipText == "Hiking") null else "Hiking" } ) DropdownMenuItem( @@ -287,7 +289,7 @@ fun DropdownFilterChip(modifier: Modifier = Modifier) { leadingIcon = { Icon(Icons.AutoMirrored.Default.DirectionsBike, null) }, onClick = { selectedChipText = - if(selectedChipText == "Cycling") null else "Cycling" + if (selectedChipText == "Cycling") null else "Cycling" } ) } @@ -299,4 +301,4 @@ fun DropdownFilterChip(modifier: Modifier = Modifier) { @Composable private fun DropdownFilterPreview() { DropdownFilter() -} \ No newline at end of file +}