Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
ui with Jetpack Compose
val scrollState = rememberScrollState()
val scope = rememberCoroutineScope()
var selectedAnimal by remember { mutableStateOf<Animal?>(null) }
Column(
modifier = Modifier
.fillMaxSize()
.verticalScroll(scrollState),
verticalArrangement = Arrangement.spacedBy(20.dp),
horizontalAlignment = Alignment.CenterHorizontally
) {
Text(
text = "Hello Compose",
style = MaterialTheme.typography.h2,
textAlign = TextAlign.Center,
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = 24.dp)
)
Image(
painter = painterResource(
id = selectedAnimal?.imageSrc ?: R.drawable.ic_launcher_foreground
),
contentDescription = "selected animal image",
modifier = Modifier
.fillMaxWidth(fraction = 0.75f)
.aspectRatio(3 / 8f),
contentScale = ContentScale.Crop
)
Row(
modifier = Modifier
.fillMaxWidth()
.wrapContentHeight(),
horizontalArrangement = Arrangement.SpaceEvenly
) {
RadioButton(
selected = selectedAnimal is Animal.Dog,
onClick = { selectedAnimal = Animal.Dog },
)
RadioButton(
selected = selectedAnimal is Animal.Cat,
onClick = { selectedAnimal = Animal.Cat },
)
}
Button(
onClick = {
scope.launch {
scrollState.animateScrollTo(0)
}
},
colors = ButtonDefaults.buttonColors(
backgroundColor = Color.Black,
contentColor = Color.White,
)
) {
Text(text = "Scroll to Top")
}
Spacer(modifier = Modifier.size(100.dp))
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment