How to put an image at the End of a Row in Jetpack Compose with following dimsensions in android?

Question

I have created a Row inside a Row, the dimensions specified for padding for inner row should be followed as specified. So, I want to put two images inside the inner Row with one image at the Start of the Row and other at the End of the Row. The first image does get displayed at the start of Row but second image get's displayed next to the first image. I want it to be at the End of the inner Row. I did try using .align(alignment = Alignment.End) but it shows error. Following is my code. `

    @Composable
fun OnBoardingScreen6(navController: NavController) {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(26.dp),
        horizontalAlignment = Alignment.Start,
        verticalArrangement = Arrangement.Top
    ) {
        // Back icon at the top-left corner
        IconButton(
            onClick = {
                navController.popBackStack()
            },
            modifier = Modifier.padding(start = 8.dp, top = 8.dp)
        ) {
            Icon(
                imageVector = Icons.Default.ArrowBack,
                contentDescription = null,
                tint = Color(0xFF039be5)
            )
        }

        // Spacer between IconButton and Row
        Spacer(modifier = Modifier.height(20.dp))
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .height(60.dp)
                .background(color = Color(0xFF008746))
                .padding(horizontal = 0.dp)
        ) {
            // Outer Row content

            Row(
                
                modifier = Modifier
                    .width(360.dp)
                    .height(64.dp)
                    .padding(start = 16.dp, top = 16.dp, end = 16.dp, bottom = 16.dp)
                    .background(color = Color(0xFF008746),
                        )
            ) {
                // Inner Row content
                Image(
                    painter = painterResource(id = R.drawable.check),
                    contentDescription = null,
                    modifier = Modifier
                        .size(24.dp)
                )

                Spacer(modifier = Modifier.width(16.dp)) // Add spacing between images

                Image(
                    painter = painterResource(id = R.drawable.close),
                    contentDescription = null,
                    modifier = Modifier
                        .size(24.dp)

                )
            }
        }

        // Spacer between Row and Texts
        Spacer(modifier = Modifier.height(10.dp))
        Row(modifier = Modifier
            .padding(start = 5.dp)
            .width(290.dp)
            .height(40.dp)) {
              Text(text = "All set", style = TextStyle())
        }
        Spacer(modifier = Modifier.height(10.dp))

        Text(
            text = "",
                    fontWeight = FontWeight.SemiBold,
            fontSize = 20.sp,
            modifier = Modifier.padding(start = 28.dp)
        )

        // Spacer to push the button to the bottom
        Spacer(modifier = Modifier.weight(1f))

        // Button centered at the bottom
        Button(
            onClick = {
                navController.navigate(Destinations.OnBoardingScreen5)
            },
            modifier = Modifier
                .width(120.dp)
                .padding(top = 50.dp, bottom = 40.dp)
                .height(50.dp),
            shape = RoundedCornerShape(percent = 50),
            colors = ButtonDefaults.buttonColors(Color(0xFF039be5))
        ) {
            Text(text = "Next", fontWeight = FontWeight.Bold, style =
            TextStyle(Color.White))
        }
    }
}

Answer 1

If you want one image be on left and next be on right side, you need to add to your row this line of code horizontalArrangement = Arrangement.SpaceBetween, next you need delete align in secound image. Better option if you use size, use .fillMaxWidth() becouse your view can matcvh with more windows than now when you set dp.Below I add working code.

Row(
        horizontalArrangement = Arrangement.SpaceBetween,
        modifier = Modifier
        .fillMaxWidth()
        .height(64.dp)
        .padding(start = 16.dp, top = 16.dp, end = 16.dp, bottom = 16.dp)
        .background(color = Color(0xFF008746))
    ) {
    Image(
        painter = painterResource(id = R.drawable.check),
        contentDescription = null,
        modifier = Modifier
            .size(24.dp)
    )

    Spacer(modifier = Modifier.width(16.dp)) // Add spacing between images

    Image(
        painter = painterResource(id = R.drawable.close),
        contentDescription = null,
        modifier = Modifier
            .size(24.dp)
    )
}

If you have more questions ask, I try to answer you.