Align row item in jetpack compose

Question

I want to make row like this

Expected Output

AND

I tried this piece of code

DividerWithItem

@Composable
fun DividerWithItem(
    modifier: Modifier = Modifier,
    index: () -> Int,
    itemName: String,
    lastIndex: () -> Int,
    moreRowContent: @Composable RowScope.() -> Unit,
) {
    Column {
        if (index() == 0) {
            Divider(color = Cloudy, thickness = dimensionResource(R.dimen.separator_height_width))
        }
        Row(
            modifier = modifier,
            horizontalArrangement = Arrangement.spacedBy(4.dp),
            verticalAlignment = Alignment.CenterVertically,
        ) {
            Text(
                text = itemName,
                modifier = Modifier.padding(vertical = 12.dp),
                maxLines = 1,
                overflow = TextOverflow.Ellipsis
            )
            moreRowContent()
        }
        if (index() <= lastIndex()) {
            Divider(color = Cloudy, thickness = 1.dp)
        }
    }
}

BpmOptionsLabel

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun LazyItemScope.BpmOptionsLabel(
    index: () -> Int,
    optionName: String,
    lastIndex: () -> Int
) {
    DividerWithItem(
        modifier = Modifier
            .fillMaxSize()
            .animateItemPlacement(),
        index = index,
        itemName = optionName,
        lastIndex = lastIndex
    ) {
        Image(
            modifier = Modifier.weight(.3f),
            painter = painterResource(R.drawable.ic_menu),
            contentDescription = null,
        )
    }
}

BpmOptionsLabelPreview

@Preview(showBackground = true)
@Composable
fun BpmOptionsLabelPreview() {
    LazyColumn {
        item {
            BpmOptionsLabel(
                index = { 0 },
                "Item item item item item m 1",
                lastIndex = { 1 }
            )
        }
    }
}

Actual Output

Only problem is Text and Image item is not in proper place

Answer 1

In the DividerWithItem apply the weight(1f) to the Text

Text(
    text = itemName,
    modifier = Modifier.padding(vertical = 12.dp).weight(1f),
    maxLines = 1,
    overflow = TextOverflow.Ellipsis
)
moreRowContent()

and in the LazyItemScope.BpmOptionsLabel remove the weight modifier from the Image:

Image(
    //modifier = Modifier.weight(.3f),
    painter = painterResource(R.drawable.ic_menu_gallery),
    contentDescription = null
)
    

If you want to increase the space occupied by the Image, use a padding modifier:

Image(
    //...
    modifier = Modifier.padding(horizontal = 20.dp)
)

Answer 2

You can try this, just add weight to your text, and the image will follow the remaining size that it needs depending on its size.

@Preview(showBackground = true)
@Composable
fun TextOverflow(){
    Row(
        modifier = Modifier.fillMaxWidth(),
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.spacedBy(4.dp)
    ) {
        Text(
            modifier = Modifier.weight(1f),
            text = "This is should be long-long text that ever you see today, I even don't know how far this text will be ended, so just enjoy reading while you code.",
            maxLines = 1,
            overflow = TextOverflow.Ellipsis
        )
        Icon(imageVector = Icons.Rounded.MoreHoriz, contentDescription = "")
    }
}

The Result: