SHOBANA RADHAKRISHNAN: Hi.
I'm Shobana, senior director of engineering
for TV here at Google.
Thank you for tuning in to see what we've
been up to with Android TV OS, our underlying TV operating
system, and Google TV, a TV experience that brings together
all your content in one place.
At CES, we announced that Android TV OS now has over 150
million monthly active devices.
We're seeing exciting growth of 36% year over year
globally along with strong growth in highly engaged TV
markets around the world.
This is a testament to the strength of the Android TV OS
platform and the value we provide to our users.
Thanks to our partnerships with industry-leading OEMs,
we're also seeing strong growth in our retail footprint.
Our partners' trust in us has allowed
us to deliver an even broader selection of Google TV products
to consumers, from streaming devices to smart TVs
and projectors, across a wide range of price points.
We've also seen continued expansion
with operator partners outside the US.
LNT and LG Uplus both recently launched streaming devices
with Google TV.
And earlier this year, Vodafone announced
Android TV as their preferred TV platform in nine countries.
This year, we also had our first major update to the home screen
since launching Google TV in 2020.
As part of this update, we introduced four new content
pages in the US for movies, shows, family, and Español
entertainment.
This change helps users find the content
they're most interested in.
And it also gives our partners new ways
to surface their content.
And speaking from personal experience,
the family page has made it so much easier for my family
to find something to watch that everyone will enjoy.
We used to spend a lot of time trying--
should I say bickering-- to choose a movie or a show
that everyone would like.
But now we can just click on the family page
and find a ton of options that are perfect for everyone.
Such a relief now for our family.
Just like it did for my family, we
hope that these changes will make search and discovery
easier for all users to quickly find
what to watch next with some help from Google TV.
We also remain committed to bringing our users
more of the content they want to see.
First, we have been working hard to regularly introduce
special collections to users that
celebrate cultures, perspectives, and moments
throughout the year.
Second, we have seen a rise in users
watching more content from free, ad-supported services.
So just last month, we announced new free channels
are being added to the live tab on Google TV.
Alongside Pluto TV channels, users can now
access Tubi, Plex, Haystack News, and Google TV
channels right out of the box, no subscription required.
Now all Google TVs in the US have more than 800 free TV
channels built right into the live tab.
This gives users more free channels
in one place than any other smart TV platform.
To make it easier to find what's on
and keep all those new channels organized,
we redesigned the TV Guide, adding filters
by topic and genre.
We've also been working on bringing easy ways
to create great apps on TV.
I'll now hand it over to Paul from our developer relations
team, who will share updates about Compose
for TV, a key feature in this regard.
Over to you, Paul.
PAUL LAMMERTSMA: Thank you, Shobana.
Over the past year, we have continued our commitment
to bringing the best of the app ecosystem to Android TV OS.
Today we're excited to officially announce
that we're bringing Compose to TV, allowing developers
to build world class TV apps more efficiently and with less
code.
Over the last few years, we've heard your feedback
on the Leanback API.
The design wasn't keeping up with your needs.
And the difficulty of customization
made it particularly challenging to build beautiful UIs. You
also told us how Leanback's MVP design using fragments
conflicted with your application architecture.
With Compose for TV, we focused on building
individual components that are optimized
for TV and customizable, leaving you
with a blank canvas for designing your overall UI.
Just like for other form factors, Compose for TV
works especially well with unidirectional data flow.
You can describe what the UI looks
like with composables while handling the interaction
in a view model.
This allows you to keep mobile, tablet, and TV
architectures similar and even share components
when they make sense.
We're continuing to build new components and solutions
for TV apps.
And today we're excited to show how some of our favorites
will make critical user journeys for TV apps much easier
to implement.
Wherever you need scrollable content,
you can use rows, columns, or grids.
These are optimized for navigating
using the D-pad of a remote control
and focus ability to snap content into view
as the user browses.
TabRow makes it easy to add top navigation.
And, thanks to feedback from our partners,
we've just added side navigation as well.
We're giving big and bold indicators
for focus list items, buttons, and other selectable
components.
And we'll see how they can be customized later
in this session.
We also put a heavy focus on components that
let your content stand out.
The carousel lets you showcase content
in an autoscrolling banner, using
bold graphics with details and a call
to action through your own design.
And immersive lists help scrolling rows
really pop by reacting to selected items, for example,
by showing a custom background.
Compose for TV is built on top of Jetpack Compose framework
that you know and love on phones, large screens,
and wearables, making the development of TV
apps incredibly easy, even for people with minimal coding
experience, to build apps for TV.
Let's check in with Sidd Gudipati, a staff designer
on the TV team, to see how easy it is to use Compose for TV
to build an app.
SIDDHARTHA GUDIPATI: Thanks, Paul.
Whether you're creating a streaming app, music app,
or a fitness app, for the largest
screen in the household, Compose is the go-to solution.
Today I'm going to show you how Compose
can make developing for TV a breeze with its variety
of prebuilt components.
Before jumping into the components,
let's take a look at a typical layout of a TV app.
Apps on TV usually consist of navigation, which can either
be on the top or left side of the screen, a hero element that
highlights the featured content of your app,
content cards presented in a grid format that can scroll
both horizontally and vertically,
and an occasional special rows that
enhances content presentation.
Now let's explore how you can use Compose to build
these commonly used patterns.
To build the top navigation, use the Tab Row composable
and add a Tab composable for each navigation destination.
The default focus indicator is a pill.
But if you want to switch it up and have an underline instead
of the pill, just create a custom indicator
and pass it to the indicator property.
If you're wondering how to transition between the pages,
just use the animated content composable.
Here is a quick code snippet.
And if you want a site navigation like YouTube,
you got the navigation driver composable for you.
Can also create a site navigation
that overlays on top of the page content
using the model navigation drawer composable.
Another commonly used pattern on TV apps
is an autoscrolling field section
that showcases the featured content in your app.
This could either autoscroll in a certain interval
or react to the D-pad left and right events.
To do this, you can use the Carousel composable.
For each slide in the Carousel, you
can add a Carousel item composable
to which you can pass the background on content values
or use your own composable.
Want to customize the animations?
No worries.
With the content transform property,
you can mix and match animations and create something unique.
In this example, I'm using Slide In Vertically
with a spring animation instead of the default Slide
In Horizontally animation.
Now let's shift gears and talk about focus system.
Unlike touch interfaces, TV mainly
depends on visual state changes to indicate which
element is being focused on.
This gives users a starting point to navigate your app.
Highlighting the active element in a bold and clear manner
is really important.
To make an element stand out, you can adjust the size,
apply a thick border, add a shadow,
change colors, or mix and match these techniques
to create a look that grabs users' attention.
Compose makes applying these techniques
easy with the Surface composable.
Surface is the backbone of any focusable element on TV.
It allows you to make an element larger
when focused using the scale property,
add a border with Inset using the border property,
and add a diffused shadow using the glow property.
You can also create custom cards using the Surface composable
or use one of the five different card layouts provided
by Compose out of the box.
Now to the content grid.
It's the most straightforward and essential way
for your users to browse the content on your app.
To create a scrolling content row,
use the TvLazyRow composable.
It is similar to LazyRow but optimized for TV.
The default focus offset is set to 30% of the container width,
as shown here.
However, you can customize the focus behavior
and bring the focus to the start using
the pivotOffsets property.
And to create the vertically-scrolling grid,
just place multiple TvLazyRow inside a TvLazyColumn
composable.
Again, TvLazyColumn is like a lazy column
but optimized for TV.
And finally, for those extra special rows
that displays more content about a card,
use the ImmersiveList composable.
It reveals more information as the user moves from one card
to the next.
And don't forget to pass the ImmersiveList item modifier
to the cards in the list.
Check out the documentation for more details.
With Compose, building visually-appealing
and engaging TV apps has never been easier.
I thoroughly enjoyed building with Compose.
And I hope you will, too.
Back to you, Paul.
PAUL LAMMERTSMA: Whoa.
You really made those screens look great, Sidd.
Thanks for showing us how easy it really is.
Compose experiences are coming to apps
like SoundCloud and Showmax.
And partners like Plex and Zee5 have
migrated parts of their View-based application
to Compose already.
For all the great content you've seen so far and more,
check out the design and developer guides
we've just published on developer.android.com
and the samples we published on GitHub.
Building beautiful UIs for TV has never been easier
but our work isn't done.
We're still working hard on improving Compose for TV
with components already available in alpha
and will be released into beta and production
by the end of the year.
And if you're intimidated by switching
from Leanback or Views, check out our detailed migration
guides.
We encourage you to begin adopting Compose
in your Android TV app today.
So head over to the Jetpack Compose for TV release notes
for the latest developments where
you can submit your feedback and feature requests.
I hope this has been inspiring.
And if you want to take one thing from today's session,
Compose is the way to build UIs on Android.
And it's arrived in the living room.
[MUSIC PLAYING]