Compose ConstraintLayout Scrolling

Question

Hey guy's im working on porting my Android TV app to Compose. The only issue i have is the EPG guide..There is not much info on this yet.

I got a good idea but need help with this..

Top Hours scroll is done

Side channels Vertical scroll is done

The issue is the Events(programs)

i got one row done that has horizontalScroll ,but i need that row to be duplicated for each channel and that has a verticalScroll when channel is scrolling up or down.

Also since its TV , i added focusable(true) but i dont see the highlight when on the item?

private val HOURS_S = listOf("1:00", "2:00", "3:00", "4:00","5:00", "6:00","7:00","8:00",   "9:00","10:00","11:00","12:00","13:00","14:00","15:00""16:00","17:00","18:00","19:00",
"20:00","21:00","22:00","23:00","24:00")

@Composable
fun ConstraintLayoutEpg(
    modifier: Modifier = Modifier,
    num: Int,
){
    val verticalScrollState = rememberScrollState()
    val horizontalScrollState = rememberScrollState()
    ConstraintLayout {
        val (hours,channel,event) = createRefs()

        BasicHourHeader(HOURS_S,modifier = Modifier.constrainAs(hours){
            top.linkTo(parent.top, margin = 16.dp)
        })

        Column( modifier.border(2.dp, Color.White).verticalScroll(verticalScrollState).focusable(true).constrainAs(channel){
            top.linkTo(hours.bottom, margin = 6.dp)
        }) {
            repeat(num) { i ->
                Text(
                    text = "Channel $i", color = Color.White, modifier = Modifier
                        .padding(8.dp)
                        .padding(8.dp)
                        .focusable(true)
                )
            }
        }
            Row(
                modifier = modifier.border(2.dp, Color.White).horizontalScroll(horizontalScrollState).focusable(true)
                    .constrainAs(event) {
                        start.linkTo(channel.end, margin = 6.dp)
                        top.linkTo(hours.bottom, margin = 6.dp)
                    }) {
                repeat(20) { i ->
                    Text(
                        text = "Channel Prg $i", color = Color.White, modifier = Modifier
                            .padding(10.dp)
                            .padding(8.dp)
                            .width(256.dp)
                            .focusable(true),textAlign = TextAlign.Start,
                    )
               }
            }

    }
}

score 0 · Answer 1 · answered Jun 27 '23 at 16:26

You need to put your Row inside another Column which will also repeat n times:

Column(modifier = Modifier.verticalScroll(verticalScrollState).constrainAs(event) {
        start.linkTo(channel.end, margin = 6.dp)
        top.linkTo(hours.bottom, margin = 6.dp)
    }) {
        repeat(num) {
            Row(
                modifier = modifier
                    .border(2.dp, Color.White)
                    .horizontalScroll(rememberScrollState())
                    .focusable(true)) {
                repeat(20) { i ->
                    Text(
                        text = "Channel Prg $i", color = Color.White, modifier = Modifier
                            .padding(10.dp)
                            .padding(8.dp)
                            .width(256.dp)
                            .focusable(true),textAlign = TextAlign.Start,
                    )
                }
            }
        }
    }

I don't know what the performance of this would be though if you have hundreds of items. Also, I'd be concerned on how it looks and if the texts would be aligned in all devices. So perhaps use a fix height for every channel child.

I was just doing that also.lol works, now i need to find the focus. Thx — techker, Jun 27 '23 at 16:28
How can i get the position of the item?i have tried onGloballyPositioned but always get same for Y..100.0 — techker, Jun 27 '23 at 18:21
nevermind found it :) val value = (horizontalScrollState.maxValue - horizontalScrollState.value).toFloat() — techker, Jun 27 '23 at 18:27

Compose ConstraintLayout Scrolling

1 Answers1