Hello! Does anyone have a good resource to properl...

# compose

[Laodice Melliti]

Hello!
Does anyone have a good resource to properly integrate compose in Android TV apps? Specifically, how to make Rows and Columns scroll when using a remote control device instead of a touch screen gesture?

[Walter Berggren]

Hi! We have tried to tackle the same issue and so far our solution has involved manual work to get it done. We listen to focus changes, check whether the focused item is still visible, and manually call ScrollState.animateScrollBy as needed

[Walter Berggren]

For Rows and Columns this works just fine, despite being a bit tedious, but we are having issues with LazyColumn and LazyRow with jagged scrolling and even freezing the garbage collection with dpad scrolling, as reported here: https://issuetracker.google.com/issues/191276596

[Walter Berggren]

The issue contains a link to a repo with a minimal demo of how we’ve implemented the scrolling.

[Laodice Melliti]

Thank you for the answer 🙂
I really hope they'll add better support for RCU inputs...

[Walter Berggren]

Happy to hear of other solutions, and getting native support for this would certainly be useful

[Adrian Landborn]

I’ve also have issue with keyboard/remote not working. This requirement (for me) is not based on remote control support but from an Accessibility point of view. When using a keyboard to navigate the screen nothing happens. No scrolling, no highlight of selected component and no possibility to select an item with Enter key.
@Colton Idle mentioned there is yet no support for Android TV but an intermediate solution would be good.
@Walter Berggren do you have a code snippet or something similar on how to make it work in the meanwhile?

[Laodice Melliti]

Good point @Adrian Landborn! I also noticed the issue with Accessibility. For us, this was a deal breaker and we put moving to using compose in our apps on hold until that issue is fixed.

[Walter Berggren]

We created a repo to demonstrate the ANR garbage collection issue we ran into linked above, it also demonstrates how scrolling can be implemented in a LazyColumn/Row: https://github.com/ELIEL87/lazycolumntest/blob/master/app/src/main/java/com/example/lazycolumnanrtest/MainActivity.kt

[Adrian Landborn]

@Laodice Melliti From our side we will launch in Aug/Sept so by then Accessibility has to work. We hope that Google will be able to solve it on their end but a Plan B would be good. 🙂

[Laodice Melliti]

Good luck!

[Walter Berggren]

In lazy lists, the scroll function takes an index and an offset. For this, the general principle is to watch the index and call scroll to item depending on it with an appropriate offset. For normal lists, the scroll to function takes an offset and no index. For this, check if the focused item is outside of the window and calculate how much the container has to be scrolled to make it visible

[Walter Berggren]

Navigating using enter/dpad center can be done by creating a modifier than manipulates a MutableInteractionSource in response to keyboard events

[Walter Berggren]

We would appreciate a ⭐ it to help raise awareness of it

[Walter Berggren]

Feel free to suggest any improvements

Screen Recording 2021-07-12 at 15.44.47.mov

[Laodice Melliti]

thanks! I'm working on something else right now, but I'll definitely take a look at it when I'm back to making compose work with our project 🙏

[Gagan Deep]

Hey Guys, i am just starting to play with Compose on AndroidTV, do you any good sources, i have been checking the above sample for now

[Gagan Deep]

Actually i am thinking of using Compose in our current TV production app, but i am not confident due to lack of D-pad support

[Walter Berggren]

Scrolling lazy columns, rows, and grids is tricky. For instance, we encounter crashes when using `LazyVerticalGrid`: https://issuetracker.google.com/issues/199061125

[Adrian Landborn]

I tried something similar with 1.1.0-alpha02 and it was much better than the stable branch. @Walter Berggren great that you posted the bug. Keep us updated in case you get it to work better.

[Gagan Deep]

thanks!!, i will also wait for the bugs to be fixed, anyway implementing scrolling via D-pad on LazyLists is also tricky, i was going through https://github.com/ELIEL87/lazycolumntest and https://github.com/thesauri/dpad-compose.

[Gagan Deep]

it looks like that i will be taking Android views approach only 😞

[Walter Berggren]

Scrolling non-lazy lists works just fine though if you implement the scrolling logic yourself, but of course this isn’t suitable for longer lists.

[Walter Berggren]

Wonder how a hybrid View and Compose app would handle d-pad focus 🤔

[Gagan Deep]

yeah, no idea how it will behave, may i will try to create a sample app.

[Nathan Castlehow]

Hi all,

Sorry to ping this thread. Would love to know how everyone went with this (looks like @Walter Berggren was furthest ahead)? Did you end up releasing a tv app using compose? We currently have a tv app released using compose that attempts to work around the issues above (sometimes successfully, sometimes its really janky). Would love to see if others got further than we did as we still have some jankiness in our app we want to fix (otherwise we have to rewrite in classic android).

If you are interested the app is https://play.google.com/store/apps/details?id=com.vitruvian.tv&hl=en_US&gl=US . The home screen tends to be a touch janky.

[Walter Berggren]

In what cases do you experience jankiness more specifically? @Nathan Castlehow

[Nathan Castlehow]

So I think the biggest issue is around the interaction between the focusable / clickable modifiers + the lazy list bring into view. (Copied from a comment I added to an issue that google haven't had a chance to reply to yet)

We have a layout similar to below.

LazyColumn(state = lazyColumnListState) {  
    items(COLUMN_ITEM_COUNT) { columnIndex ->  
        Column(  
            modifier = Modifier  
        ) {  
            Text(  
                "I am section $columnIndex"  
            )  
            LazyRow(horizontalArrangement = Arrangement.spacedBy(4.dp)) {  
                items(ROW_ITEM_COUNT) { rowIndex ->
					FocusableItem()
					
					..........................

If we rely on the bringinto view provided by the lazy list then when scrolling up only the row is brought into view (without the title) (video attached).

Example repo https://github.com/nathan-castlehow/Lazyscrollingissue

We then naturally end up trying to use animateScrollToItem which then runs into the issues of cancelled scrolls caused by bring into view (from the focusable / clickable modifier). This / workarounds are talked about here [https://issuetracker.google.com/issues/212982472](https://issuetracker.google.com/issues/212982472)

The workaround we use from the issue is to override the focusable modifier to no longer bring into view. It looks like we will have to do the same with clickable.

Have you had to do similar to better control the scrolling behaviour?

Below is a video of the actual app in release mode running on a Chromecast with Google TV (we have removed clickable and overriden focusable). We still end up with the scroll coming across a bit laggy. I'm going to keep working on the performance to make the lists lighter to render but I'm not sure how much wiggle room we have. Have you noticed any particular gotchas we lazy list + dpad?

bring_into_view.mp4

[Nathan Castlehow]

Actual app

actual_app.mp4

[Laodice Melliti]

Not yet, but it's on my todo list for this week 🎉

[Mohamed Sadakathulla]

Thats a great news, can't wait to see your work.

[Walter Berggren]

Hi @Nathan Castlehow, @Mohamed Sadakathulla and @Laodice Melliti! Just updated the tutorial to show how some of the usability problems with using .clickable() out-of-the-box can be resolved in compose 1.2.0: https://github.com/thesauri/dpad-compose

[Naga]

Great to see couple of Solutions for these issues, Encountered Inter-op issues between AndroidView and Compose elements wrt to Keyboard navigation.
While navigating elements using external bluetooth keyboard, only compose elements gets highlighted where as Compose elements internally using AndroidView never responds. Is this a known limitation ?

keyboard_navigation.webm

[Colton Idle]

Compose TV is now a thing (according to Android dev summit) which was yesterday.