android kotlin android-jetpack-compose row

Arrangement of elements in the jetpack compose row

I need to position the loading circle in the center of the screen, but right now I'm getting like this:

Now it looks like this:

Circle code:

@Composable
fun CircularProgressBar(isLoading: Boolean) {
    if(isLoading) {
        CircularProgressIndicator(
            modifier = Modifier
                .padding(top = 10.dp),
            color = Color.Gray
        )
    }
}

Row code:

Row(
            modifier = Modifier.fillMaxSize(),
            horizontalArrangement = Arrangement.SpaceBetween
        ) {
            IconButton(
                onClick = {
                    navController.popBackStack()
                },
                modifier = Modifier
                    .padding(start = 15.dp, bottom = 15.dp),
            ) {
                Icon(
                    painter = painterResource(id = R.drawable.ic_baseline_arrow_back_24),
                    contentDescription = "back",
                    modifier = Modifier.size(35.dp)
                )
            }

            CircularProgressBar(isLoading = true)
        }

I want to achieve what is shown in the following image with the loading indicator in the center:

I need to do this:

How I can do that?

Solution

First of all, you couldn't center the indicator because of this arrangement line. horizontalArrangement = Arrangement.SpaceBetween. It affects all the childs in the row in your situation. I suggest you to use Box instead of Row here is an example.

Box(
    modifier = Modifier
        .fillMaxWidth()
        .background(Color.Yellow)

) {
    IconButton(
        onClick = { /*Do Something*/ },
        modifier = Modifier
            .background(Color.Cyan)
            .align(Alignment.CenterStart),
    ) {
        Icon(
            painter = painterResource(id = R.drawable.baseline_arrow_back_24),
            contentDescription = "back",
            modifier = Modifier.size(35.dp)
        )
    }

    CircularProgressBar(
        isLoading = true,
        modifier = Modifier
            .background(Color.Red)
            .align(Alignment.Center),
    )
}

@Composable
fun CircularProgressBar(isLoading: Boolean, modifier: Modifier = Modifier){
   if (isLoading) {
    // Use your indicator here
    Box(modifier = modifier.size(40.dp).background(Color.Red))
 }
}

This is what it looks like