Jetpack compose , Trying to find an efficient way to align elements within rows which are inside a column

Question

I want to align my contact elements as in the picture but I don't want to use padding and spacer, because it will look different on different devices(mb Im wrong). So how can I get such an output of elements?

[This is what I want it to look like] (https://i.stack.imgur.com/L8GLZ.png)

Tryed using horizontalAlignment = Alignment.CenterHorizontall on the columb block and different horizontalAlignments on the rows but couldn't manage to get what I wanted(

@Composable
fun Greeting() {
    loadLogo()
    loadContactInfo()
}

@Composable
fun loadLogo(
    fio: String = stringResource(R.string.FIO),
    logo: Int = R.drawable.android_logo,
    title: String = stringResource(R.string.title)
) {
    Column(
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = Modifier.padding(bottom = 100.dp)
    ) {
        Image(
            painter = painterResource(id = logo),
            contentDescription = stringResource(R.string.logo_desc),
            modifier = Modifier
                .fillMaxWidth()
                .padding(bottom = 8.dp)
                .height(150.dp)
                .width(150.dp)
        )
        Text(text = fio, fontSize = 32.sp, modifier = Modifier.padding(bottom = 4.dp))
        Text(text = title, fontSize = 16.sp, color = Color.Green)
    }
}

@Composable
fun loadContactInfo(
    phoneNum: String = stringResource(R.string.my_phone_num),
    TGLink: String = stringResource(R.string.telegram_link),
    emailAddress: String = stringResource(R.string.email_adress)
) {
    Column(
        verticalArrangement = Arrangement.Bottom,
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = Modifier.fillMaxWidth()
    ) {

        Row() {
            Icon(
                imageVector = Icons.Default.Phone,
                contentDescription = "Phone icon",
            )

            Text(text = phoneNum)
        }

        Spacer(modifier = Modifier.height(35.dp))

        Row() {
            Icon(
                imageVector = Icons.Default.Share,
                contentDescription = "Phone icon",
            )

            Text(text = TGLink)
        }

        Spacer(modifier = Modifier.height(35.dp))

        Row(
            modifier = Modifier
                .padding(bottom = 45.dp)

        ) {
            Icon(
                imageVector = Icons.Default.Email,
                contentDescription = "Phone icon",
            )

            Text(text = emailAddress)
        }

    }
}

Looks like this

score 1 · Answer 1 · answered Nov 23 '22 at 11:40

Use as parent container a Column and just apply the weight(1f) modifier to the 1st nested Column (logo and title).

Column(Modifier.fillMaxSize()){
    loadLogo(modifier = Modifier.fillMaxWidth().weight(1f))
    loadContactInfo()
}

@Composable
fun loadLogo(
    modifier : Modifier = Modifier,
    fio: String = "Fio",
    logo: Int = R.drawable.ic_launcher_foreground,
    title: String = "Title"
) {
    Column(
        modifier = modifier,
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        //
    }
}

@Composable
fun loadContactInfo(
    modifier : Modifier = Modifier,
    phoneNum: String = "+XX YYYY.YYYY.YYYY",
    TGLink: String = "Android Dev",
    emailAddress: String = "@androidDev"
) {
    Column(
        modifier = modifier,
    ) {
      //...
    }
}

score 0 · Answer 2 · answered Nov 23 '22 at 11:42

I don't want to use padding and spacer, because it will look different on different devices

I don't think this is correct. If you use padding for your Composables and test it on different devices with different screen sizes, the padding you set for them is the same.
But if you don't use Modifier.fillMaxWidth() or Modifier.fillMaxHeight() or Modifier.fillMaxSize(), You may get some empty space around your Composable because you didn't tell it to fill the screen.

So for your rows this is what I suggest you to do:
First create a Composable representing a row. I'm calling it TextWithIcon:

@Composable
fun TextWithIcon(
    modifier: Modifier = Modifier,
    title: String,
    icon: ImageVector
) {
        Row(
            modifier = modifier.padding(vertical = 16.dp, horizontal = 8.dp),
            verticalAlignment = Alignment.CenterVertically
        ) {
            Icon(imageVector = icon, contentDescription = null)
            Spacer(modifier = Modifier.width(8.dp))
            Text(text = title)
    }
}

Next, use it in your screen for each row:

@Composable
fun loadContactInfo(
    phoneNum: String = stringResource(R.string.my_phone_num),
    TGLink: String = stringResource(R.string.telegram_link),
    emailAddress: String = stringResource(R.string.email_adress)
) {
    Column(
        verticalArrangement = Arrangement.Bottom,
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = Modifier.fillMaxWidth()
    ) {
        TextWithIcon(
            modifier = Modifier.fillMaxWidth(),
            title = phoneNum,
            icon = Icons.Default.Phone
        )
        TextWithIcon(
            modifier = Modifier.fillMaxWidth(),
            title = TGLink,
            icon = Icons.Default.Share
        )
        TextWithIcon(
            modifier = Modifier.fillMaxWidth(),
            title = emailAddress,
            icon = Icons.Default.Email
        )
}

Jetpack compose , Trying to find an efficient way to align elements within rows which are inside a column

2 Answers2