I have a row set to center vertically containing a...

# compose

[zt]

I have a row set to center vertically containing a CrossFade element that contains a text field
whenever the CrossFade transitions to the text field it shifts down a tiny bit once the transition is fully done. i'm unsure how to fix

[Colton Idle]

got code to share?

[zt]

It'll be a few hours until I'm home, I'll share then

[zt]

@Colton Idle

Row(
            modifier = Modifier.padding(horizontal = 4.dp, vertical = 4.dp),
            horizontalArrangement = Arrangement.spacedBy(4.dp),
            verticalAlignment = Alignment.CenterVertically
        ) {
            var searching by rememberSaveable { mutableStateOf(false) }

            Crossfade(
                targetState = searching,
                animationSpec = tween(200)
            ) {
                if (it) {
                    TextField(
                        modifier = Modifier
                            .width(400.dp)
                            .heightIn(min = 42.dp, max = 42.dp),
                        value = state.search,
                        textStyle = MaterialTheme.typography.bodyMedium,
                        onValueChange = state::search::set,
                        placeholder = {
                            Text(
                                text = Res.string.search,
                                style = MaterialTheme.typography.bodyMedium
                            )
                        },
                        // trailingIcon = {
                        //     Icon(Icons.Default.Search, Res.string.search)
                        // },
                        shape = CircleShape,
                        colors = TextFieldDefaults.colors(
                            focusedIndicatorColor = Color.Transparent,
                            unfocusedIndicatorColor = Color.Transparent
                        )
                    )
                } else {
                    PathBar(
                        state = state,
                        modifier = Modifier.weight(1f, true),
                        location = state.currentLocation,
                        onClickSegment = state::navigate
                    )
                }
            }

            Spacer(Modifier.weight(1f, true))

            FilledTonalIconToggleButton(
                checked = searching,
                onCheckedChange = { searching = it }
            ) {
                Icon(
                    imageVector = Icons.Default.Search,
                    contentDescription = Res.string.search
                )
            }
        }

[Colton Idle]

Have the code for pathBar?

[zt]

When the cross fade goes from the text field to the pathbar, the text field shifts back up a bit and then the pathbar comes in. it doesnt move at all strangely

@Composable
fun PathBar(
    state: BrowserState,
    location: Path,
    onClickSegment: (Path) -> Unit,
    modifier: Modifier = Modifier
) {
    val rootPath = location.root

    val segments = remember(location) {
        location
            .absolutePathString()
            .replace("""^[A-Z]:\\""".toRegex(), "")
            .split(File.separatorChar)
            .filter(String::isNotBlank)
    }

    LazyRow(
        modifier = modifier,
        horizontalArrangement = Arrangement.spacedBy(4.dp)
    ) {
        item {
            FilledTonalButton(
                shape = MaterialTheme.shapes.large,
                onClick = { onClickSegment(rootPath) }
            ) {
                Icon(
                    imageVector = Icons.Default.Storage,
                    null
                )
                Spacer(Modifier.width(2.dp))
                Text(rootPath.absolutePathString())
            }
        }

        itemsIndexed(
            items = segments,
            key = { index, _ -> index }
        ) { _, segment ->
            val fullPath =
                remember {
                    Path(state.currentLocation.toString().substringBefore(segment) + segment)
                }

            TooltipArea(
                tooltip = {
                    Surface(
                        shape = MaterialTheme.shapes.medium,
                        tonalElevation = 6.dp,
                        shadowElevation = 4.dp
                    ) {
                        Text(
                            modifier = Modifier.padding(10.dp),
                            text = fullPath.absolutePathString()
                        )
                    }
                }
            ) {
                FolderContextMenu {
                    FilledTonalButton(
                        shape = MaterialTheme.shapes.large,
                        onClick = { onClickSegment(fullPath) }
                    ) {
                        Text(
                            text = segment,
                            overflow = TextOverflow.Ellipsis
                        )
                    }
                }
            }
        }
    }

[Colton Idle]

hm. im inspecting with having "show layout bounds" enabled and there's definitely some different sizing there

[zt]

layout inspector probably would be a big help, wish we could use it for compose desktop

[Colton Idle]

oh yeah. im running this on android at the moment