Cannot arrange between Text and LinearProgressIndicator in Jetpack Compose

Question

I'm trying to put the Text that represents the percentage higher than the LinearProgressIndicator bar, I've tried many ways but none of them work. You can see it in the photo below:

And here is my code, you can see that I tried to raise it higher but it didn't work, Maybe I need to redesign it. If you are an expert in designing with Jetpack compose, please let me know, thank you very much:

@Composable
@ExperimentalMaterialApi
fun CoursesItem(
    courses: Courses,
    process: Processes,
    onCourseItemClick: (String) -> Unit,
    id : String,
    viewModel: CoursesViewModel = hiltViewModel()
) {
    Card(
        modifier = Modifier
            .cardCourses()
            .clickable { viewModel.onCourseItemClick(onCourseItemClick, id) },
        elevation = 4.dp
    ) {
        Box(
            modifier = Modifier.fillMaxSize()
        ) {
            Column(
                modifier = Modifier
                    .padding(16.dp)
                    .fillMaxSize()
                    .align(Alignment.TopStart) // Đặt cách trên cùng
            ) {
                Row(
                    verticalAlignment = Alignment.CenterVertically
                ) {
                    AsyncImage(
                        model = courses.image,
                        contentDescription = null,
                        modifier = Modifier
                            .AsyncImageCardCourses()
                            .background(MaterialTheme.colors.onPrimary)
                    )
                    Spacer(modifier = Modifier.width(16.dp))
                    Column(
                        modifier = Modifier
                            .weight(1f)
                            .fillMaxHeight()
                    ) {
                        Text(
                            text = courses.nameCourses,
                            color = Color.DarkGray,
                            style = MaterialTheme.typography.h6
                        )
                        Spacer(modifier = Modifier.height(4.dp))
                        Text(
                            text = courses.description,
                            color = Color.Gray,
                            style = MaterialTheme.typography.body2
                        )
                        // this is part to fix
                        Row(
                            modifier = Modifier
                                .align(Alignment.CenterHorizontally)
                                .padding(top = 10.dp),
                            verticalAlignment = Alignment.CenterVertically
                        ) {
                            LinearProgressIndicator(
                                progress = (process.processesLearn.toFloat()),
                                modifier = Modifier.weight(1f)
                            )
                            Text(
                                text = "${(process.processesLearn * 100).toInt()}%",
                                color = Color.Black,
                                style = MaterialTheme.typography.caption,
                                modifier = Modifier.alignByBaseline()
                            )
                        }

                    }
                    IconButton(
                        onClick = { viewModel.onCourseItemClick(onCourseItemClick, id) },
                        modifier = Modifier.size(24.dp)
                    ) {
                        Icon(
                            imageVector = Icons.Default.ArrowForward,
                            contentDescription = null,
                            tint = Color.Gray
                        )
                    }
                }
            }
            Spacer(modifier = Modifier.height(8.dp))
            Column(
                modifier = Modifier
                    .fillMaxWidth()
                    .align(Alignment.BottomCenter) // Đặt ở dưới cùng
            ) {

            }
        }
    }
}

Answer 1

Give this a try:

fun Modifier.cardCourses(): Modifier {
    return this.padding(8.dp).fillMaxWidth().height(120.dp) //<--try higher number
}

Then for this code:

// this is part to fix
Row(
    modifier = Modifier
        .align(Alignment.CenterHorizontally)
        .padding(top = 10.dp), //<-- try lower number
    verticalAlignment = Alignment.CenterVertically
) {
    LinearProgressIndicator(
        progress = (process.processesLearn.toFloat()),
        modifier = Modifier.weight(1f)
    )
...
)