Aligning Rows in Jetpack Compose: Positioning Based on the First Row

Question

In Android Jetpack Compose, I have three rows, and I want to position the second and third rows exactly in the same horizontal position as the first row. they should align solely based on the position of the first row.

This is the code now:

  Column(
        modifier = Modifier
            .fillMaxWidth()
            .padding(bottom = 48.dp)
    ) {

        Row(
            modifier = Modifier
                .fillMaxWidth(),
            horizontalArrangement = Arrangement.Center
        ) {

            Image(
                modifier = Modifier.padding(end = 32.dp, bottom = 16.dp),
                painter = painterResource(R.drawable.baseline_phone_24),
                contentDescription = null,
                )
            Text(
                text = "+11 (123) 444 555 666",

                )
        }

        Row(
            modifier = Modifier
                .fillMaxWidth(),
            horizontalArrangement = Arrangement.Center

        ) {
            Image(
                modifier = Modifier.padding(end = 32.dp, bottom = 16.dp),
                painter = painterResource(R.drawable.baseline_share_24),
                contentDescription = null
            )
            Text(
                text = "@AndroidDev",

                )
        }
        Row(
            modifier = Modifier
                .fillMaxWidth(),
            horizontalArrangement = Arrangement.Center

        ) {
            Image(
                modifier = Modifier.padding(end = 32.dp),
                painter = painterResource(R.drawable.baseline_email_24),
                contentDescription = null
            )
            Text(
                text = "[email protected]",

                )
        }
    }

Answer 1

After multiple attempts with ChatGPT and Bard that provided disastrous solutions, I finally found a solution without their help by thinking outside the box in terms of Jetpack Compose:

    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(top = 16.dp, bottom = 48.dp),
        horizontalArrangement = Arrangement.Center,
    ) {
        Column{
            Image(
                modifier = Modifier.padding(end = 32.dp, bottom = 16.dp),
                painter = painterResource(R.drawable.baseline_phone_24),
                contentDescription = null,
            )
            Image(
                modifier = Modifier.padding(end = 32.dp, bottom = 16.dp),
                painter = painterResource(R.drawable.baseline_share_24),
                contentDescription = null
            )

            Image(
                modifier = Modifier.padding(end = 32.dp),
                painter = painterResource(R.drawable.baseline_email_24),
                contentDescription = null
            )
        }
        Column{
            Text(
                text = "+11 (123) 444 555 666",
                modifier = Modifier.padding(bottom = 16.dp),
                )
            Text(
                text = "@AndroidDev",
                modifier = Modifier.padding(bottom = 16.dp),
                )
            Text(
                text = "[email protected]",
                )
        }
    }