androidandroid-jetpack-composeandroid-tvandroid-jetpack-compose-tv

How to match the TvLazyRow Title with the piviot offset of the items


Here is what i want my TvLazyColumnn to Look like:

Tv Image

I need to show the last passed item which is not a problem but i also want to show the title of the TvLazyColumnn to match to the start or the highlighted item in TvLazyColumnn line PrimeVideo and many other apps does.

i have a workarount to give approximate padding and try but idk if it is the right solution and also then for different screen sizes it would not look good i feel.


Solution

  • Using magic number padding is an okay solution because TVs don't have different screen sizes. All TVs have an aspect ratio of 16:9. If you use dp units in all your layout measurements, this will work on all TVs.

    If you are not happy with using magic number paddings, you can look at the Pivot offset values and use that value to set the width of the Spacer composable before the title component.

    val parentFraction = 0.3f
    
    Column {
      Row(Modifier.fillMaxWidth()) {
        Spacer(Modifier.fillMaxWidth(parentFraction))
        Text("Title")
      }
    
      TvLazyRow(pivotOffsets = PivotOffsets(parentFraction)) {
          // items
      }
    }