Passing Modifier.align as a parameter

user_5931806 0
Viewed 326

I have a Composable as follows:

@Composable
private fun MoviePosterWithRating(movie: MovieModel) {
Box {
    Image(<...>)
    Box( //Rating circle
        contentAlignment = Alignment.Center,
        modifier = Modifier
            .padding(end = 8.dp, top = 220.dp)
            .size(48.dp)
            .background(Color.Black, shape = CircleShape)
            .align(Alignment.TopEnd)
    ) {
        CircularProgressIndicator(
            progress = movie.score / 10,
            color = percentageCircleColor(movie.score),
            strokeWidth = 2.dp
        )
        Text(
            text = "${movie.score.asPercentage()}%",
            color = Color.White,
            textAlign = TextAlign.Center,
            fontSize = 13.sp,
            modifier = Modifier.padding(4.dp)
        )
    }
}

I would like to extract the rating circle into it's own method so I can reuse it. However, I can't because of the align on modifier. I could pass the whole modifier in as a parameter, but I would just be passing the same padding, size and background colour every time. Is there a way that I could just pass in the .align part of the modifier?

android-jetpack-compose android
1 Answers

The way you should do this is to have your composable accept a Modifier as parameter, that way you can pass it at the calling point, making your composable more flexible:

@Composable
fun RatingCircle(
    modifier: Modifier = Modifier,
    // other attributes
) {
    Box(
        modifier = modifier,
    ) {
        // other composables
    }
}

Then you call it like so

Box {
    Image(<...>)
    RatingCircle(
        modifier = Modifier.align(/* alignment */)
    )
}
user_27412730
Related