Android TV: Best Practices for Engaging Apps (Android Dev Summit '19)
My. Name is Casio I'm. A developer relations here. At Google I work mostly, with Android. TV and today. We're going to talk about best, practices. For engaging apps, which. Is kind of like and gay, embraces. A lot of stuff it's kind of a generic title, so. To narrow it down here's. The things that we're going to talk about I'm going to start by saying. A little bit of the state of home and living room as, we understand, here Google. Then, I'm going to move to talk about some Android TV basics. Which. Many, big, major apps to missus, and and and has some mistakes, in there and. No, engaging. App and. I got great a great engaging app start of getting all of the basics right then. We're moving to talk a little bit about the linkback library, and one. Of the major questions that everybody, always has, which, is how, do I customize, the Leanback library, it doesn't, fit necessarily. The what I want exactly can. I adjust it, can I customize it. Spoiler. Alert the answer is mostly yes and we're going to talk a little bit about that and then, I'm going to talk about the OS integration they're, going to talk about how we can integrate with Android TVs homescreen. To feature our content, we are going to talk about discoverability. Through. Search and engaging, with the assistance. So. Starting. With a state of home, and living room for, us at Google, so. Technology, has changed how we interact, with, the home. Here. At Google we believe that the next wave, the. Next leap forward, in technology for, the home will. Come from the. Intersection. Of, hardware. Software. And artificial. Intelligence, one. Your home to, not. Only be smarter. With your home not only should be more helpful but we all we want are your home to, work for you and. Bringing. Together hardware. Software and artificial. Intelligence to provide an incredible. Spurs to our users, and. This. Of course is, anchored, by the Google, assistant, the helpful Google system that brings together. Search, that brings together. Media. And all the media points. And all of the media contact points at Google and if. We're talking about media there, is no, better place to consume. Media and to watch media than, the bigger screen your home. So. The Android, TV is at the heart of the media in the Google assistant power at home. You. Can have your smart phone your smart car your, Smart speakers, and the, Android, TV brings, everything together in, one place, media. Games. Music. And. All of those experience, together into. One big screen in your living room. Android. TV seen a lot of momentum recently. Six. Out of the top six, out of ten top Smart TV manufactures, are shipping TVs with Android, TV and. Over. A hundred and forty pay TV operators. Are shippi set up boxes with android TV as well this has been a huge increase over the, past few years and, this. Great momentum that we are seeing on Android TV, extends. To developers, as well we. Recently announced that we have now over, 5,000. Apps on Google Play for Android TV. Over. A thousand, of them being, for, from, steaming. Streaming, content providers. So. There's a lot going on Android TV and, at Google we are focusing, a lot of efforts, in Android TV. So. Let's. Talk about a, great. Creating, great engaging, Android, TV apps so. To get started what makes an entry, TV app or an, Android, app and Android TV, app because of course being, Android, means that you can reuse all of your skills as an Android developer to create an Android TV, app but what makes it a, TV app well. Start. With the basics you. Have to declare. Your. Features. And I know this is really basic, but, I want you to true. To touch on this because as I mentioned there are a lot of big apps that skips, or misses some of these basics, and, no great engaging app works. If you miss the basics so of course the first feature, that you need to declare is that you don't hit my touch, screen because the last time I checked people, don't go and, touching, their home screen TVs their living room TV so if the thing their fingers are interact using a remote control, also.
You. Have to. Declare. That. You use linkback. This. Doesn't necessarily refer to the link back library. Link. Back is this generic, term that we use to define, this. Experience. Of watching. TV which, is different from using a mobile device because you're using it at a distance in a link, back, position. In a link back situation so. You have to declare that. Next. You have to declare your application, banner just point. I'm going to talk a little bit more about manner which is, something. That we always have problems with. And. Finally. You have to declare your, Android, TV intent, which is not the main tent so. You declare, your Leanback launcher. So. Poona you're putting, out together you declare, the features that you use you. Declare the banner and you, declare your link back in intent, one. Two three. Your. Features, your banner. In, our link back intent. But. I want to talk more a little bit more about the app banner itself. That's. The banner if you ever used Android TV you know how it looks but, here's the thing. In. Many many situations you, might, look wrong and in many apps we've seen looking wrong one, of such examples, is when. You provide a mobile icon here, Android TV app what, happens, is that the icon will be scaled. And put. Inside, the dark rectangle, so, it looks like this weird combination of, a square, icon, inside a rectangle, area this, happens when you provide a mobile icon. 512. By 512, in your adorable xhdpi. Folder, so that's wrong do, not do that, also. If, you provide any banner. There is larger, than 300. 320. By 180. Doesn't. Matter in which folder, you put it it's not going to appear correctly this isn't in this example we have a 9 and 16 by, 540. Pixel. Image. In the rest drawable, folder. It. Doesn't work if you put in a different place so here I have the same image put in the drawable way TV DPI, also. Doesn't look correctly, again. The, way to do it is exactly. 300, 320. By 180, pixels in the rest drawable, xhdpi. Folder, this, way your banner looks correctly, and remembering. That our banner is used to ask. Your app representation. But, it's also used elsewhere like, for example in. The plain x roll, so. Maybe nailing, it down correctly is very important. Finally. If. You want your application to, be published. For in the Play Store for Android TV, there, is a special, opt-in, distribution. That you have to check if you do not do that it's not going to go for the Play Store so. In, your Play. Console, you, have to find this distributor, app on Android TV it's, not enough to show it's not enough to show that you have a link back launcher, you actually have to find this distributor, on TV and check that box and, the. Reason for that is that, there are many plant many. Hybrid. Platforms. Or. Multi-platform. Environment development. Environments, that, automatically. Says. That everything. Is enabled like a Leanback launcher for example but you might never have. Actually tested none on TV by using these these, development. Environment so that doesn't necessarily mean it's going to work correctly on a TV so, that's why we asked you to check that specifically, checkbox. Good. So, that. That these are the basics, these are the very, bare-bones that you have to nail let's, talk about the Leanback library now, of course, the linkback library, is, this. This set, of widgets high level widgets that we provide they, confirm to the materialized specs, and they provide. A great experience for using, TV at a distance. We. Have widgets. For the home screen which. Contains for example rows and, a navigation drawer. We have widgets, for. Content. Details we, have widgets for a lot of different situations but, the most, frequent. Question, that we hear about the Leanback library is, well, the widgets that you provide doesn't, fit, a hundred percent what you need so, are there any ways to customize the Leanback library well. The answer is yes. There. Are basically two ways you can go about, customizing. The Leanback library. Sorry. You. Can just, simply change the colors and dimensions, values, in your app or. You. Can provide custom, presenters. So. Let's talk a little bit about colors, and dimensions. If. We go specifically, if we look specifically, at the Browse fragment which, is the one, that is used for many homescreen. From. Home screen of main applications, which, is the one that shows up sidebar, navigation and, the rows of contents there.
Are Like, almost. 20. Properties only. About the Browse fragment that you can modify in. Your, callers. And inner dimensions. Values. Things, like brown, like padding. Like, title. Stereos. Roll, styles, and these. Applies also to the. Navigation. Tower to. Each of the individual cards and so on so far so for example can. I frequent. Question can I make my navigation, drawer shorter, yes you can you don't need to write code for that just by changing the Marg's and the, margin. Pennies and other dimensions, you can do that. Yes. We have to do a better job at, documenting. These properties, sometimes, they are not necessarily, easy to find. But. They exist and you can go a long way just by modifying the value of these properties. Now. In some cases that. Is not enough so. The. Linkback library it's based. On MVP. Or Model View pattern, which is one of the many mV whatever parents. And. Many, of those widgets, they allow you to provide. A custom presenter. I'm. Not going to dwell into, the details about what makes what's, the difference between MVP. Or MVC, or mvvm, but, the fact is that on MVP. Your, presenter. Acts as, the glue between the model and the view but, it's also, responsible. For initiating, or, inflating. In Android language the view which means that by providing, a custom presenter, you're, actually, in complete. Control of what you want it to look like what you want that widget to look like because you can provide a custom view. So. Let's take a look at an example. Again. I'm going to use the Browse fragment because it's the one that's mostly, used as the main screen of apps, the. Browse fragment it contains, and. It expects, an array object adapter for actual show the individual, list rows and the, individual, list rows. One's. A header height and a post adapter etc etc but. I'm going to focus on the higher ident presenter. Which. Is the one that we can use to customize how the navigation drummer, looks. So. For. Example say, I want to have my navigation drawer and I want to display icons, close. To my text close to my titles well. What. You can do in this code is, in Java what, you can do is provide, your custom, presenter. In this case I'm calling it the icon, header, item. Presenter, extending. Home header presenter, and you have two of the right three. Different, methods at bare minimum. Three. Different functions on, create view holder on, bind field holder and own, unbind, view holder, on. Create view holder here inflate your layout and again because this is a presenter, you inflate, layout if within the presenter you are in complete control of providing, any, view that you want. On. Bite view holder you, set the contents and of course on bite you free the resources so let's take a look. Suppose. I want to do this icons, I can do that by providing a custom view by. Using a linear layout and including not only a text view which is the default but also an image view. Then. On by. View holder. Again. An instance of the view. Holder, presenter. And the. Header, item. By. Getting the hider item I can call properties. Such as get name and, use. Those to fill my text view. Label. And icon. And. Of, course on. You. Override, own unbind, view holder to free any resources that you have used these, are the three minimum, ones that you have to overwrite but of course there are others if you want for example to customize how they feel how they look how, the individual, items look when they're selected, there's one method.
That You can you could override for that. Back. In black. In back in your activity, you, can set the header presenter, selector, by providing, an instance, of your custom. Presenter. In my case I can't, have their item presenter this is an old example, but. Why don't you use it either, way because it's, not very well-known and it's, again, a very common question. Good. Let's. Now talk about, Oprah. OS integration, there. Are four, major things, that your app needs to do to. Properly integrate of the Android TV operational, system and provide an engaging experience. Integrative. Search. Media. Playback controls, as, activated. By the assistant, and of. Course the home screen integration. To play, next and custom. Channels let's. Take a look at each of one of these. So. Media. Discovered why, well, because, it allows the users to discover content, by invoking playback, from searches, by, voice. Well. How do you do it you make our app searchable, by using a content, provider. When. The assistant performs, query on the content provider it can start playing back using intents, let's. Take a look at this sample code here closer. So. I'm creating my own search, perform a content. Provider extending. Content provider these examples are in cuddling I have. A write the query function and I have to return a cursor, the. Way I'm going to do the search well that, for ice you can do the search anywhere you want you can check. For local content that you might have downloaded, in your app you can perform searches on the server. Whatever. You do at the end you return a matrix, cursor and their, system to display your search results, within any other search results now the, thing is even though you want you can do this search on, your serve you want to do it you want to do it fast because. Google. Will their system will show an Ender android TV will show there's. The results, as they appear, so, if all of the other apps are faster than yours all. Of their icons. All of their banners, will appear first than yours. So. You want to make it faster. Next. Media. Controls, why, well because you want to allow the user to control playback by. Using voice. How. Do you do it you integrate, media, sections, media sessions, to handle the callbacks, so. Whenever. You use the user uses, their distant to. Do playback to the playback comments, things, like play. Or pause or even smarter, ones like skip to the previous, channel or to skip to previous episodes, or skip, to next which can be used by both video and audio apps. You. Can even do a thumbs up if you want which. Is a lesser-known feature and the way you do that again. You. Provide your media session fallback by extending, meters need a session compact callback and, you can overwrite all of, these functions don't play on pause on stop on 6 you on skip, to next on skip to previews. And. By, control. Override. All of these controls and control your own player and by, providing, this. Callback to your media session instance, your. App now responds to, the assistant, playback controls. Now. We are going to move to talk about the. Integrations, with the Android TVs home screen the most important, one bling being the play next row mmm so if. You don't know the Android TV interface it's made of these rows. The. First row is a row of the user favorites, the users favorite, apps and the. The. Very first row after the list of the users apps is the, play next role and it's a role. Or, a channel. As we call it that aims to be this global. Space, for, the users, content, across different, apps so, the, idea here is that any, any. Content, that the user is interested, on or the user interacted.
With But didn't finished your. App can push this content to the plain X row. So. Why you keep your viewers engaged with, content and fight interest or interesting. Or haven't, finished watching such, as liked, videos or next episodes of a series or a movie that he hasn't finished, how. Do you do that well you publish, your watch next program to Android access, preview, channel helper you, don't have to boot or worry, about your content provider yourself and. What. Is it well the Android CBS play next row is updated, to reflect recent, engagement, and put relevant, content, at the viewers fingertips. S. Contents. Are added. Older. Contents, move to the right and at some point of the user never interacts, with these other contents, they are removed from the from their play next role, again. Let's take a look at this code a little. Bit closer. So. Android X's watch the next program for what follows, the Builder pattern so, create a builder you. Set the watch next type you. Set a type which could be a movie or a series, or music. Then. You provide your title and description and. Your. Poster, art URI. It's. Also very important, to set the last time of engagement because, this. Picture might be a little too too too small but if you check if, you look at the second, item in the play next row whenever, an item is selected if, you provide the last engagement time it, will display a small progress, bar on the bottom of the content so the user can see where, he left off so if it's a movie that the users stopped in the middle you can put it there and show where the user stopped. Then. You build and you. Get a, preview. Channel helper and you call publish, watch next program with that program. So. Three out of four the. Last always. Important. The west integration, that it should provide is, Android, TV channel. Channels. Are lists, are again rows that you have on, your Android TV home screen and. When. You create an Android TV app you can have as many channels as you want, but, there is one channel there is installed by default all. Of the other channels the user has to opt in to add them to the home screen but, at least one channel is always, installed by default and. The way you create android TV channels, is, a. Wipe. I'm going to show you in a moment so why, well tralala content should be recommended and the android TV home screen, how. You. Publish a preview channel and preview programs to android access preview channel help preview.
Channel Helper again. You don't have to worry about manually, creating a content provider. So. Let's take a look at the simple quote. You. Get a helper, again. He. Follows the buter pattern so. You can set the, display name set. The description. Set. The intent, or right you. Can. If you want get, a set, an internal provider ID this is your own Koston ID that you can set to retrieve later a. Logo. And you. Build. When. You put this your channel by using the helper you get back a channel ID Android. Assigned by Android TV and. If. You want you can also. Use a preview builder to build a program. So. These are the four integrations, that I mentioned. To. Have an engaging. App that. Interacts with the OS. Well. That's. All I have for you. Thank. You.