I'm just trying to pin a Crossfade with a button a...

# compose

[Colton Idle]

I'm just trying to pin a Crossfade with a button at the bottom of the screen with weight 1f. I can pin the button at the bottom of the screen, but once I wrap it with Crossfade it pins the button at the top of the screen. Code in thread.

[Colton Idle]

Works:

Column(modifier = Modifier.fillMaxSize().padding(horizontal = 16.dp)) {
        Box(modifier = Modifier.weight(1f), contentAlignment = Alignment.BottomCenter) {
            Button(onClick = {}) {}
        }
}

[Colton Idle]

Doesn't. Button is at the top of the screen.

Column(modifier = Modifier.fillMaxSize().padding(horizontal = 16.dp)) {
    Crossfade(
        modifier = Modifier.weight(1f),
        targetState = viewModel.state.loading) { asdf ->
        Box(modifier = Modifier.weight(1f), contentAlignment = Alignment.BottomCenter) {
            Button(onClick = {}) {}
        }
    }
}

[Abhishek Dewan]

Cant you remove the box and just wrap the button in the crossfade and then do a verticalalignment of bottom?

[Abhishek Dewan]

does that also put the button on the top ?

[Colton Idle]

@Abhishek Dewan "verticalalignment of bottom" where would I place that? On the crossfade or button?

[Colton Idle]

I tried adding it to the column,

Column(
    modifier = Modifier.fillMaxSize().padding(horizontal = 16.dp),
    verticalArrangement = Arrangement.Bottom) {

and the button still goes to the top.

[Chris Sinco [G]]

Are you trying to pin the button itself to the bottom? You can add the align modifier to the Crossfade as well. Would also help to see a design spec of what you are trying to achieve

[Colton Idle]

The screen is "simple" (so I thought).

Logo on top. Button "pinned" to the bottom.

The trick is that the button turns into a progress bar during a network call.

I'm trying to use crossfade to transition between the two. But I think since the button leaves the UI, it actually causes the circular progress to jump. I'm starting to rethink using Crossfade for this as I think crossfade does better when the composables aren't supposed to be placed relative to one another. i.e. In this case, I want the progress to be dead center of the button.

[Doris Liu]

weight Modifier is only meaningful when the parent layout understands it. More specifically, it is only defined in RowScope and ColumnScope.

That's why the weight(1f) on Box in Crossfade is a no-op. Box ends up wraps its content as a result. Since the Box is the same size as the Button, contentAlignment doesn't make any difference. You could change the weight(1f) on Box to fillMaxHeight()

[Colton Idle]

Doris to the rescue again. I appreciate you explaining why my thinking was flawed here. I thought type safety would have helped me 😄 similar to how arrangement and stuff prevents you from any footguns. Maybe theres room for a lint check!

I have one more small question about the positioning of the circular progress bar. Right now it gets pinned to the very bottom as well which makes sense, but is there any easy way to anchor it to the center of the button?

[Abhishek Dewan]

You can wrap you button and progress bar in a full width row with horizontal arrangement as center and then cross fade between the two. that might ensure that the progress view is centered on the buttons position.