CODEWITHSUNDEEP
androidandroid-jetpackandroid-jetpack-compose
Pioak
Pioak

Reputation: 147

Dynamic row width compose

I need to create a searchbar that looks like this (strictly compose): Without Text

With Text

Now i managed to get the one without text working, but i cannot get the cancel text to show up without bugs.

For example when using constraint row and some paddings i get effect like this Bug

link to the working code:

https://gist.github.com/piotrsedlak/d71da26299946ef6fc5125042e04a154

I also tried working with animateContentSize but that didnt really help.

Upvotes: 0

Views: 1687

Answers (1)

Kshitij Patil
Kshitij Patil

Reputation: 162

I think this can be easily achieved using weight modifier. Conditionally adjust the weights and you'll get the desired effect. Here's a snippet for the same:

@Composable
fun DynamicToolbar() {
    var text by remember { mutableStateOf(TextFieldValue()) }
    val fieldWeight = if (text.text.isNotBlank()) 0.8f else 1f
    Row(modifier = Modifier.fillMaxWidth()
    ) {
        OutlinedTextField(
            value = text,
            onValueChange = { text = it },
            leadingIcon = { Icon(Icons.Default.Search, null, tint = Color.DarkGray) },
            trailingIcon = {
                if (text.text.isNotBlank()) {
                    Icon(
                        Icons.Default.Close,
                        null,
                        tint = Color.LightGray,
                        modifier = Modifier.clickable { text = text.copy("") }
                    )
                }
            },
            modifier = Modifier
                .weight(fieldWeight)
                .alignBy(FirstBaseline)
        )
        if (text.text.isNotBlank()) {
            TextButton(
                onClick = { },
                modifier = Modifier
                    .fillMaxWidth()
                    .weight(1 - fieldWeight)
                    .alignBy(FirstBaseline)
            ) {
                Text("Cancel")
            }
        }
    }
}

I'm using Compose 1.0.0-alpha11

PS: I fixed the baseline alignment problem as well (credits). Hope that helps.

Upvotes: 2

Related Questions