CODEWITHSUNDEEP
androidkotlinandroid-jetpack-composecomposable
Morozov
Morozov

Reputation: 5260

How can I place a button under the composable screen correctly?

How can I place a button under the AnimatedScreen? At the moment, the button is hidden and it is not visible. Shouldn't the elements in column be arranged sequentially, or is it a matter of the parameter fillMaxSize in AnimatedScreen?

Surface {
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.spacedBy(10.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        AnimatedScreen(Modifier, rawId = R.raw.onboarding)
        Button(onClick = onContinueClicked) {
            Text(stringResource(R.string.continue_text))
        }
    }
}

And here is the code of my AnimatedScreen:

@Composable
fun AnimatedScreen(
    modifier: Modifier = Modifier,
    rawId: Int
) {
    Box(
        contentAlignment = Alignment.Center,
        modifier = modifier.fillMaxSize()
    ) {
        val compositionResult: LottieCompositionResult = rememberLottieComposition(
            spec = LottieCompositionSpec.RawRes(rawId)
        )
        ScreenAnimation(compositionResult = compositionResult)
    }
}

@Composable
fun ScreenAnimation(compositionResult: LottieCompositionResult) {

    val progress by animateLottieCompositionAsState(composition = compositionResult.value)

    LottieAnimation(
        composition = compositionResult.value,
        progress = progress,
        modifier = Modifier.fillMaxSize(),
        contentScale = ContentScale.FillBounds
    )
}

Upvotes: 0

Views: 47

Answers (1)

Gabriele Mariotti
Gabriele Mariotti

Reputation: 364730

Add the weight modifier to AnimatedScreen composable:

    Column(
       //..
    ) {
        AnimatedScreen(Modifier.weight(1f, false))
        Button(onClick = {  }) { }
    }

Upvotes: 1

Related Questions