Creating Engaging Android TV and Fire TV Apps

Ready to launch your app or game on the big screen? Whether you are targeting Google Android TV or Amazon Fire TV, this talk is your guide to creating great “10 foot UIs” for customers watching television on their couch!
In this session, we’ll dive into the best practices for TV app development. Get ready to explore the key design principles, development strategies, and performance optimizations. We’ll cover everything you need to know, from creating beautiful UIs with Kotlin and Jetpack Compose for TV, React Native or Flutter, to optimizing remote control inputs to ensure a seamless navigation experience.

Transcript

1. Creating Engaging Android TV and Fire TV Apps with Native and Cross- Platform Tools
2. Giovanni Laquidara @giolaq Sr. Developer Advocate @ Amazon
3. Why TV?
4. Market value USD 298 billion by 2026. Strong adoption in Asia-Pacific and North America https://www.marketdecipher.com/report/smart-tv-market
5. The Potential of Smart TV App Development Over 10,000 USD 1.5 billion revenue in 2021 Subscriptions – IAP - Ads
6. The Android group
7. Content is the King Streaming Games Health & fitness Educational
8. Creating TV Apps
9. Fragmentation anyone?
10. Creating Android TV and Fire TV Apps
11. Android TV App
12. <activity android:name=".TVMainActivity" android:exported="true" android:theme="@style/Theme.App.Starting"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LEANBACK_LAUNCHER" /> </intent-filter> </activity>
13. <activity android:name=".TVMainActivity" android:exported="true" android:theme="@style/Theme.App.Starting"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LEANBACK_LAUNCHER" /> </intent-filter> </activity>
14. <manifest xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools"> <uses-feature android:name="android.software.leanback" android:required="false" /> <uses-feature android:name="android.hardware.touchscreen" android:required="false" />
15. <manifest xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools"> <uses-feature android:name="android.software.leanback" android:required="false" /> <uses-feature android:name="android.hardware.touchscreen" android:required="false" />
16. <manifest xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools"> <uses-feature android:name="android.software.leanback" android:required="false" /> <uses-feature android:name="android.hardware.touchscreen" android:required="false" />
17. Creating Android TV and Fire TV apps
18. 10ft UI 100 10 feet - ~3m
20. Contrast is one of the most important aspects Color on TV
21. Contrast is one of the most important aspects Color on TV
22. Color on TV
23. Color on TV
24. Layout
26. The Remote Control: Your User's Wand
27. Navigation
28. Focus
29. Safe Zone
30. Leanback
31. Leanback https://medium.com/androiddevelopers/android-tv- best-practices-for-engaging-apps-acd0219ff395
32. Kotlin and Jetpack Compose for TV
33. implementation "androidx.tv:tv-foundation:1.0.0-alpha10" implementation "androidx.tv:tv-material:1.0.0-alpha10"
34. TvLazyColumn( … ) ) { item { FeaturedMoviesCarousel() } item { MoviesRow() } item { Top10MoviesList() } item { MoviesRow() } }
35. TvLazyRow( … ) { items (movies) { movie -> MoviesRowItem() } }
36. TvLazyRow( pivotOffsets = PivotOffsets(parentFraction = 0.07f), ) { items (movies) { movie -> MoviesRowItem() } }
37. TabRow(…) { screens.forEachIndexed { index, screen -> … } }
38. JetStream https://github.com/android/tv-samples/tree/main/JetStreamCompose
41. https://reactnative.dev/docs/building-for-tv
42. <TouchableWithoutFeedback onPress={() => {}} onFocus={() => {}} > <Text>I'm Focusable</Text> </TouchableWithoutFeedback >
44. ReNative https://renative.org/
45. No Official Support for TV
46. Focus Widget https://api.flutter.dev/flutter/widgets/Focus-class.html
47. https://www.youtube.com/watch?v=6nxPpEdjdPE
48. https://developer.samsung.com/smarttv/develop/native/flutter.html
50. System X-Ray
51. System X-Ray
52. System X-Ray
54. https://developer.amazon.com/apps- and-games/porting-your-app
55. private val purchasesUpdatedListener: PurchasesUpdatedListener = object : PurchasesUpdatedListener() { fun onPurchasesUpdated(billingResult: BillingResult, purchases: List<Purchas>) {} } private val billingClient: BillingClient = BillingClient.newBuilder(context) .setListener(purchasesUpdatedListener) .enablePendingPurchases() .build()
56. Appstore Billing Compatibility SDK
57. https://developer.amazon.com/apps-and-games/blogs
58. https://dev.to/amazonappdev/
59. The End