Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add show on click to the advanced tooltip example #447

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Add show on click to the advanced tooltip example #447

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0b8cf78
Add show on click to the advanced example
jakeroseman Feb 5, 2025
cfad6d8
Apply Spotless
jakeroseman Feb 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions .idea/codeStyles/Project.xml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

94 changes: 81 additions & 13 deletions compose/snippets/src/main/java/com/example/compose/snippets/components/SearchBar.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ import androidx.compose.material.icons.filled.MoreVert
import androidx.compose.material.icons.filled.Search
import androidx.compose.material.icons.filled.Star
import androidx.compose.material3.Button
import androidx.compose.material3.DockedSearchBar
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.ListItem
Expand Down Expand Up @@ -68,12 +69,16 @@ fun SearchBarExamples() {
var currentExample by remember { mutableStateOf<String?>(null) }

when (currentExample) {
"basic" -> SearchBarBasicFilterList()
"advanced" -> AppSearchBar()
"basic" -> SearchBarBasicExample()
"docked" -> DockedSearchBarExample()
"advanced" -> SearchBarFilterListPreview()
else -> {
Button(onClick = { currentExample = "basic" }) {
Text("Basic search bar with filter")
}
Button(onClick = { currentExample = "docked" }) {
Text("Basic docked search bar with filter")
}
Button(onClick = { currentExample = "advanced" }) {
Text("Advanced search bar with filter")
}
Expand All @@ -83,11 +88,12 @@ fun SearchBarExamples() {
}

@OptIn(ExperimentalMaterial3Api::class)
// [START android_compose_components_searchbarbasicfilterlist]
// [START android_compose_components_searchbarbasicexample]
@Composable
fun SearchBarBasicFilterList(modifier: Modifier = Modifier) {
fun SearchBarBasicExample(modifier: Modifier = Modifier) {
var text by rememberSaveable { mutableStateOf("") }
var expanded by rememberSaveable { mutableStateOf(false) }

Box(
modifier
.fillMaxSize()
Expand All @@ -104,12 +110,15 @@ fun SearchBarBasicFilterList(modifier: Modifier = Modifier) {
onSearch = { expanded = false },
expanded = expanded,
onExpandedChange = { expanded = it },
placeholder = { Text("Hinted search text") }
placeholder = { Text("Hinted search text") },
leadingIcon = { Icon(Icons.Default.Search, contentDescription = null) },
trailingIcon = { Icon(Icons.Default.MoreVert, contentDescription = null) },
)
},
expanded = expanded,
onExpandedChange = { expanded = it },
) {
// Dummy suggestions
Column(Modifier.verticalScroll(rememberScrollState())) {
repeat(4) { index ->
val resultText = "Suggestion $index"
Expand All @@ -128,18 +137,18 @@ fun SearchBarBasicFilterList(modifier: Modifier = Modifier) {
}
}
}
// [END android_compose_components_searchbarbasicfilterlist]
// [END android_compose_components_searchbarbasicexample]

@Preview(showBackground = true)
@Composable
private fun SearchBarBasicFilterListPreview() {
SearchBarBasicFilterList()
private fun SearchBarBasicExamplePreview() {
SearchBarBasicExample()
}

// [START android_compose_components_searchbarfilterlist]
// [START android_compose_components_searchbarfilterlistexample]
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun SearchBarFilterList(
fun SearchBarFilterListExample(
list: List<String>,
modifier: Modifier = Modifier
) {
Expand Down Expand Up @@ -217,12 +226,71 @@ fun SearchBarFilterList(
}
}
}
// [END android_compose_components_searchbarfilterlist]
// [END android_compose_components_searchbarfilterlistexample]

@OptIn(ExperimentalMaterial3Api::class)
// This example is the same as SearchBarExample, but with DockedSearchBar.
// [START android_compose_components_dockedsearchbarexample]
@Composable
fun DockedSearchBarExample(modifier: Modifier = Modifier) {
var text by rememberSaveable { mutableStateOf("") }
var expanded by rememberSaveable { mutableStateOf(false) }

Box(
modifier
.fillMaxSize()
.semantics { isTraversalGroup = true }
) {
DockedSearchBar(
modifier = Modifier
.align(Alignment.TopCenter)
.semantics { traversalIndex = 0f },
inputField = {
SearchBarDefaults.InputField(
query = text,
onQueryChange = { text = it },
onSearch = { expanded = false },
expanded = expanded,
onExpandedChange = { expanded = it },
placeholder = { Text("Hinted search text") },
leadingIcon = { Icon(Icons.Default.Search, contentDescription = null) },
trailingIcon = { Icon(Icons.Default.MoreVert, contentDescription = null) },
)
},
expanded = expanded,
onExpandedChange = { expanded = it },
) {
// Dummy suggestions
Column(Modifier.verticalScroll(rememberScrollState())) {
repeat(4) { index ->
val resultText = "Suggestion $index"
ListItem(
headlineContent = { Text(resultText) },
supportingContent = { Text("Additional info") },
modifier = Modifier
.clickable {
text = resultText
expanded = false
}
.fillMaxWidth()
)
}
}
}
}
}
// [END android_compose_components_dockedsearchbarexample]

@Preview(showBackground = true)
@Composable
fun DockedSearchBarExamplePreview(modifier: Modifier = Modifier) {
DockedSearchBarExample()
}

@Preview(showBackground = true)
@Composable
fun AppSearchBar(modifier: Modifier = Modifier) {
SearchBarFilterList(
fun SearchBarFilterListPreview(modifier: Modifier = Modifier) {
SearchBarFilterListExample(
list = listOf(
"Cupcake",
"Donut",
Expand Down
17 changes: 13 additions & 4 deletions compose/snippets/src/main/java/com/example/compose/snippets/components/Tooltips.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,14 +36,14 @@ import androidx.compose.material3.TooltipBox
import androidx.compose.material3.TooltipDefaults
import androidx.compose.material3.rememberTooltipState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.setValue
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.DpSize
import androidx.compose.ui.unit.dp
import kotlinx.coroutines.launch

@Composable
fun TooltipExamples() {
Expand Down Expand Up @@ -147,6 +147,7 @@ fun AdvancedRichTooltipExample(
richTooltipActionText: String = "Dismiss"
) {
val tooltipState = rememberTooltipState()
val coroutineScope = rememberCoroutineScope() // Key for launching coroutines

TooltipBox(
modifier = modifier,
Expand All @@ -156,7 +157,11 @@ fun AdvancedRichTooltipExample(
title = { Text(richTooltipSubheadText) },
action = {
Row {
TextButton(onClick = { tooltipState.dismiss() }) {
TextButton(onClick = {
coroutineScope.launch { // Use a coroutine to dismiss
tooltipState.dismiss()
}
}) {
Text(richTooltipActionText)
}
}
Expand All @@ -168,7 +173,11 @@ fun AdvancedRichTooltipExample(
},
state = tooltipState
) {
IconButton(onClick = { tooltipState.dismiss() }) {
IconButton(onClick = {
coroutineScope.launch { // Launch a coroutine to show the tooltip
tooltipState.show()
}
}) {
Icon(
imageVector = Icons.Filled.Camera,
contentDescription = "Open camera"
Expand Down