Adapting a mobile Android TV application or why I love Google

We, the developers of a mobile application, use geolocation as a basis for determining the location of family members and therefore have never even thought about placing our application on Android TV.

When we saw that Google was holding a contest and kindly provided developers with prefixes for testing Android TV at the time of development, at the next meeting they thought about how interesting it is to us. And in the process of discussion, very interesting features of Android TV were opened, for which it was worth adapting our application. But first things first…


Article author Ivan King, in the framework of the competition "Device Lab from Google . "

Training

Before starting the adaptation, we studied a little statistics on the use of these consoles from our friends and acquaintances. Most of them, you guessed it, use it to watch TV content and play games. Our application is neither one nor the other, but we firmly believed in its practical benefit and therefore did not retreat at this stage.
')

Study of the features of work

Before the start of development, we were frightened by the adaptation, because there is no usual Touch Screen there. We thought that the adaptation would require significant changes in the code for the application to work. But it all came down to the following important points:

D-pad
To control the majority of TV set-top boxes, users use the remote, rather than poking their fingers at the TV, as in mobile phones. This is the main difference in the development. While developing for mobile devices, we click on the screen area and something happens to us, then on Android TV we perform all actions with the up, down, left, right arrows: thus, we focus on the element of interest and then press the select button , causing the active event of this item.

Portrait orientation
If your application uses only portrait orientation, then you first need to prepare the application under landscape and say in the manifest file that we do not require portrait orientation.

<!--   ,       --> <uses-feature android:name="android.hardware.screen.portrait" android:required="false" /> 

Requirements
To use android TV, make the following device requirements optional in your manifest file:

 <!--            TV --> <uses-feature android:name="android.software.leanback" android:required="false" /> <!--      touchscreen --> <uses-feature android:name="android.hardware.touchscreen" android:required="false" /> <!--   ,      --> <uses-feature android:name="android.permission.ACCESS_FINE_LOCATION" android:required="false" /> <!--   ,       --> <uses-feature android:name="android.hardware.telephony" android:required="false" /> <!--   ,      --> <uses-feature android:name="android.permission.RECORD_AUDIO" android:required="false" /> 

If you have other permissions, then check with the official Android TV development guide.

First run on TV

So, let's start to adapt. First of all, you need to create an activation, which will launch Android TV at launch. I created a special bootable (Splash) activation to launch Android TV. As a result, I got two boot activit - one for phones, the other for TV. After that, the main activation of the application was launched and everything worked the same for both the mobile phone and TV. In the Manifesto it looked like this:

 <!-- TV SPLASH --> <activity android:name=".Frontend.Activities.TVActivity" android:theme="@style/FullscreenTheme" android:noHistory="true"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LEANBACK_LAUNCHER" /> </intent-filter> </activity> <!-- Mobile SPLASH --> <activity android:name=".Frontend.Activities.SplashActivity" android:configChanges="orientation|keyboardHidden|screenSize" android:theme="@style/FullscreenTheme" android:noHistory="true"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> 

In order for Android TV to understand what kind of activations it will run when it starts, special filter options are used:

 <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LEANBACK_LAUNCHER" /> 

Now we run our application on the TV emulator and we can see our Splash screen:

Focusing

After we launched our application on TV, you need to forget about the mouse and control the emulator window with only the arrows from the keyboard. But at the first clicks, nothing will happen to you, because Android needs to tell which elements and in which order you focus by clicking on the arrows (D-pad). To begin, let's make it so that elements can be focused. To do this, select the element in the markup of your activity and add the attribute focusable = true to it.

 <LinearLayout android:id="@+id/btn_new_family" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:focusable="true" /> 

This attribute says that the element can take focus. But if you are testing it on a regular Touch Screen phone, and not on TV, then you need to also set the android attribute: focusableInTouchMode = “true”. After you set focusable attributes for your active elements, you need to specify the “effect” that will occur after the focus has been set. To do this, assign the Background attribute our special XML selector:

 <LinearLayout android:id="@+id/btn_new_family" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:focusable="true" android:background="@drawable/focusable " /> 

Here is an example of a simple selectable focusable.xml file, in which we paint the element's background in dark blue.

 <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_focused="true" > <layer-list> <item android:id="@+id/id"> <shape> <solid android:color="#0277bd"/> </shape> </item> </layer-list> </item> </selector> 

If you already have your own selector, simply add the android: state_focused element and set the style you want.
Something similar to this will turn out (GIF Animation):



That's all. Now, when we hover over an item and press the center button on the D-pad, the Click event will fire, as if you were just tapping on that area of ​​the screen.

Software focus control

If you have interface elements that you create dynamically from the program code, you can add focus using the following code:

 element.setFocusable(true); element.setBackground(ContextCompat.getDrawable(this, R.drawable.focusable)); 

The first line adds the ability to focus. The second sets our selector. Programmatically set the focus on a specific element by running the command:

 element.requestFocus(); 

Additional features

By default, the order of transition between elements goes from top to bottom and from left to right. If you need to change the order and, for example, after first pressing the D-pad down arrow, you want to immediately jump down to the bottom of the screen, then use the special attributes:

 <View android:nextFocusDown="@id/bottom_view" android:nextFocusUp="@id/top_view" android:nextFocusLeft="@id/left_view" android:nextFocusRight="@id/right_view" /> 

Also in Android there is a special theme called Theme.Leanback from the Leanback support library and is available from API 17. But I found it unnecessary, since the design of our application fits perfectly into the TV.

As you can see, adapting a TV application is not a big deal, and for that I love Google. It's too simple, no dancing with a tambourine. In Android TV, developers have already carefully incorporated the highest possible compatibility of your application. you need quite a bit to make it all work. Of course, within the framework of one article, it is impossible to describe all the details of a competent adaptation, but by implementing the steps described above, your application will already be adequately presented on Android TV and will win new sofa fans!