@Preview(showBackground = true)
@Composable
fun Search(modifier: Modifier = Modifier) {
var isSearchClicked by remember {
mutableStateOf(false)
}
var text by remember {
mutableStateOf("")
}
Column(Modifier.fillMaxSize()) {
AnimatedVisibility(visible = isSearchClicked.not()) {
Row(
Modifier
.fillMaxWidth()
.height(60.dp)
.background(Color.Gray),
horizontalArrangement = Arrangement.SpaceEvenly,
verticalAlignment = Alignment.CenterVertically
) {
Icon(
imageVector = Icons.Outlined.Search,
contentDescription = "",
Modifier.clickable {
isSearchClicked = true
})
Button(onClick = { /*TODO*/ }) {
Text("Button")
}
}
}
AnimatedVisibility(visible = isSearchClicked) {
OutlinedTextField(
value = text,
onValueChange = { text = it },
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = 10.dp)
.padding(top = 10.dp),
placeholder = { Text(text = "Search")}
)
}
}
}
Also, you can set the custom animation as per your requirements.
Luckily, I found a temporary working answer for this problem,
What we need to use is just pass `DialogProperties(usePlatformDefaultWidth = false)` as properties `parameter` for dialog. This will make the dialog to resizable like this
@Composable
private fun ShowDialog() {
var showText by remember { mutableStateOf(false) }
val text = if (showText) {
"Hide Text"
} else {
"Show Text"
}
Dialog(
onDismissRequest = { },
properties = DialogProperties(usePlatformDefaultWidth = false)
) {
Card(
modifier = Modifier
.padding(15.dp)
.wrapContentWidth()
.animateContentSize()
) {
Column(modifier = Modifier.padding(15.dp).fillMaxWidth(1f)) {
AnimatedVisibility(visible = showText) {
Text(
text = "Sample",
modifier = Modifier
.padding(5.dp)
.fillMaxWidth(1f),
style = MaterialTheme.typography.body1,
color = Color.Black
)
}
Button(onClick = { showText = !showText }) {
Text(text = text)
}
}
}
}
}
Caution: It uses `@ExperimentalComposeUiApi`
> This API is experimental and is likely to change in the future.
