How can I align different items inside LazyColumn in jetpackCompose

Question

I am building a chat app with firebase and I need to align the chat bubbles in the end when I write the message and in the start when I receive, like in whatsapp. If I use the horizontalArrangement in the lazyColumn it affects all the items. I tried using the modifier.align in the chat bubbles but nothing happens. How can I do this?

below is my lazyColumn

LazyColumn(
           modifier = Modifier.fillMaxWidth(),
            ) {
                                if (list != null && list.isNotEmpty()) {
                                    items(items = list) {


                                        if (it.user1id == args.userId) {
                                            ChatCard(
                                                message = it,
                                                color = Color.Magenta,
                                                modifier = Modifier
                                                    .align(Alignment.CenterHorizontally)
                                                    .padding(
                                                    start = 32.dp,
                                                    end = 4.dp,
                                                    top = 4.dp
                                                )
                                            )
                                        } else {
                                            ChatCard(
                                                message = it,
                                                color = Color.White,
                                                Modifier.padding(
                                                    start = 4.dp,
                                                    end = 32.dp,
                                                    top = 4.dp
                                                )
                                            )
                                        }

                                    }
                                }
                            }

@Composable
fun ChatCard(message: Message, color: Color, modifier: Modifier = Modifier){
    Card(
        modifier = modifier,
        backgroundColor = color,
        shape = RoundedCornerShape(10.dp)
    ) {
        Row(
            modifier = Modifier.padding(4.dp),
            horizontalArrangement = Arrangement.SpaceBetween
        ) {
            Text(
                modifier = Modifier
                    .padding(4.dp)
                    .widthIn(0.dp, 280.dp),
                text = message.message
            )
            Text(
                modifier = Modifier.padding(4.dp),
                text = message.time,
                style = TextStyle(
                    fontSize = 12.sp,
                    color = Color.LightGray
                )
            )
        }

    }
}

Clemens

Answer 1

You can add a Row for each item applying a different horizontalArrangement removing the Modifier.align in your Card.

Something like:

   items(items = itemsList) {

            Row(Modifier.fillMaxWidth(),
              horizontalArrangement = if (it == ....)
                Arrangement.Start else
                    Arrangement.End) {

                if (it == ....) {
                    ChatCard(
                        color = Color.Magenta,
                        modifier = Modifier
                            .padding(
                                start = 32.dp,
                                end = 4.dp,
                                top = 4.dp
                            )
                    )
                } else {
                    ChatCard(
                        color = Color.White,
                        Modifier.padding(
                            start = 4.dp,
                            end = 32.dp,
                            top = 4.dp
                        )
                    )
                }
            }

Bojorquez