Android Jetpack Compose position children in LazyRow

Question

I have a sequence of items I want to show as list of items in a Track. Only thing is, at the beginning, items have to be lined starting from middle of the track. Afterwards, the items can be scrolled normally.

e.g. at beginning :
MyTrack : [----blankSpace 50%-------[dynamic item1[[dynamic item2][dynamic item3]--]

after scrolling when all items are visible for example: MyTrack[[item1][item2][item3][item4][item5]]

This Row has to be scrollable and each item could have varying width.

This is the item on the track:

    data class MyItem(val widthFactor: Long, val color: Color)

Question : is there. a way to give start position of the items in the LazyRow ? Or is there a better Layout I should use in Jetpack Compose ? A layout like LazyRow() won't work because there is no way to tell to start lining up items from middle of it.

I can use something like Canvas and drawRect of items in it but then I need to implement the swipe and scroll features like in LazyRow.

Thanks in advance.

score 1 · Answer 1 · answered Jun 20 '22 at 13:09

You can use spacer item with .fillParentMaxWidth which is available for LazyList items:

LazyRow(
    modifier = Modifier.fillMaxWidth(),
) {
    item { 
        Spacer(modifier = Modifier.fillParentMaxWidth(0.5f))
    }
    // Your other items
}

This is better than the other two provided solutions - Configuration.screenWidthDp is only usable when your LazyRow fills whole screen width which is not always the case, BoxWithConstraints adds complexity that is not necessary here.

I misunderstood the question as half of the screen width. If the requirement is half of the Row width, this solution is a better choice. — Abhimanyu, Jun 20 '22 at 14:37

score 0 · Answer 2 · answered Jun 20 '22 at 02:45

Use this to get screen width

val configuration = LocalConfiguration.current
val screenWidth = configuration.screenWidthDp.dp

Source - https://stackoverflow.com/a/68919901/9636037

Code

@Composable
fun ScrollableRowWithSpace() {
    val configuration = LocalConfiguration.current
    val screenWidth = configuration.screenWidthDp.dp

    val list = Array(10) {
        "Item ${it + 1}"
    }

    LazyRow(
        modifier = Modifier
            .background(LightGray)
            .fillMaxWidth(),
    ) {
        item {
            Spacer(modifier = Modifier
                .background(White)
                .width(screenWidth / 2))
        }
        items(list) {
            Text(
                text = it,
                modifier = Modifier
                    .padding(16.dp)
                    .background(White),
            )
        }
    }
}

score 0 · Answer 3 · answered Jun 20 '22 at 06:58

I would recommend following solution you can use it anywhere and get half of the width.

data class MyItem(val widthFactor: Long, val color: Color)

@Composable
fun LazyRowWithPadding() {

    val myItemList = mutableListOf(
        MyItem(12345, Color.Blue),
        MyItem(12345, Color.Cyan),
        MyItem(12345, Color.Green),
        MyItem(12345, Color.Gray),
        MyItem(12345, Color.Magenta),
    )

    BoxWithConstraints(Modifier.fillMaxSize()) {
        LazyRow(
            modifier = Modifier.fillMaxWidth(),
            contentPadding = PaddingValues(start = maxWidth / 2)
        ) {
            items(myItemList) {
                Box(
                    Modifier
                        .padding(end = 8.dp)
                        .background(it.color)
                        .padding(24.dp)) {
                    Text(text = it.widthFactor.toString())
                }
            }
        }
    }
}

Example

Android Jetpack Compose position children in LazyRow

3 Answers3