This section will summarize the points of attention in TV development, how to manage TV controllers, how to build TV layouts, and how to create TV navigation.
1. Deal with TV hardware
Why deal with TV hardware? Because TV does not support touch screen, camera, GPS and the like like other Android devices. These hardware functions are all castrated on the TV. In order to be able to develop better applications, we still need to understand these differences and deal with these hardware.
1. Check the operating environment
Android's api can be used on Android devices such as TV and Phone. At this time, when you are developing TV, or when you want to be an app that is supported by TV phones, you need to distinguish the operating environment at this time, so that different solutions can be made for different environments. We can judge whether the app is running on the TV through UiModeManager as follows.
UiModeManager uiModeManager = (UiModeManager) getSystemService(UI_MODE_SERVICE);
Log.i(TAG, "onCreate: "+(uiModeManager.getCurrentModeType()==
Configuration.UI_MODE_TYPE_TELEVISION));
// 下面是Configuration类中定义的部分常量，想了解更多可以查阅下这个类。
public static final int UI_MODE_TYPE_CAR = 0x03;// 汽车
public static final int UI_MODE_TYPE_WATCH = 0x06;// 手表
2. Hardware functions not supported by TV
| hardware | Corresponding string |
|---|---|
| touch screen | android.hardware.touchscreen |
| Touch screen simulator | android.hardware.faketouch |
| phone | android.hardware.telephony |
| camera | android.hardware.camera |
| Near Field Communication (NFC) | android.hardware.nfc |
| GPS | android.hardware.location.gps |
| microphone | android.hardware.microphone |
| sensor | android.hardware.sensor |
| Portrait screen | android.hardware.screen.portrait |
ps:
1. Some TV controllers have microphones, but their hardware functions are not the same as those described here. The controller microphone is fully supported.
2. To view the complete list of functions, sub-functions and their descriptors, please refer to the function reference.
3. The above-mentioned strings are all encapsulated into the constant fields in the PackageManager class. Can be convenient for developers to quickly call.
(1) Dealing with unsupported hardware-declare asOptional support
If you develop an application, it supports both TV and mobile phones. But when you use the above hardware functions on your mobile phone, you can declare these functions as optional for TV.
<uses-feature android:name="android.hardware.touchscreen"
android:required="false"/>
<uses-feature android:name="android.hardware.faketouch"
android:required="false"/>
<uses-feature android:name="android.hardware.telephony"
android:required="false"/>
<uses-feature android:name="android.hardware.camera"
android:required="false"/>
<uses-feature android:name="android.hardware.nfc"
android:required="false"/>
<uses-feature android:name="android.hardware.location.gps"
android:required="false"/>
<uses-feature android:name="android.hardware.microphone"
android:required="false"/>
<uses-feature android:name="android.hardware.sensor"
android:required="false"/>
ps:
1. If you set the value of the hardware function to true to declare it as a required function, your application will not be installed on the TV device or appear in the Android TV home screen launcher.
2. Some functions have sub-functions, such as android.hardware.camera.front. Be sure to mark any sub-features that are also used in your app as required="false".
3. How to judge whether the device supports hardware
if (getPackageManager().hasSystemFeature(PackageManager.FEATURE_TOUCHSCREEN)) {
Log.d(TAG, "设备支持触屏");
// todo
}else{
Log.d(TAG, "设备不支持触屏");
}
As above, just use the method provided by PackageManager.
4. Note that certain permissions imply hardware functions
| Authority | Implied hardware function |
|---|---|
| RECORD_AUDIO | android.hardware.microphone |
| CAMERA | android.hardware.camera 和 android.hardware.camera.autofocus |
| ACCESS_COARSE_LOCATION | android.hardware.location和android.hardware.location.network |
| ACCESS_FINE_LOCATION | android.hardware.location和android.hardware.location.gps |
1. If your application requests a feature listed above, please add a uses-feature statement to the list for this implicit hardware feature, indicating that it is not a required feature
2. Note: If your application targets Android 5.0 (API level 21) or higher and uses ACCESS_COARSE_LOCATION or ACCESS_FINE_LOCATION permissions, users can still install you on the TV device even if the TV device does not have a network card or GPS receiver Applications.
5. Support for positioning on TV
The native API has been castrated, and the provider can only use netWork! However, because TV manufacturers on TV do not integrate AutoNavi Maps, Baidu Maps, and Google Maps by default. Therefore, the location object cannot be obtained using native api. If you want to position, you can integrate third-party SDKs.
2. How does TV interact with users
The most important way for mobile phones to interact with people is touch! However, this is not the case with TV. Due to the large screen experience of TV, users are generally required to enjoy it from a place 10 feet away. At this momentRemote control, gamepadWait for the hardware device to become an interactive medium.
1. Basic control buttons of arrow keys
1. In normal applications, you can use the arrow keys: up, down, left, right, back, and confirm. Wait for the button to interact with the TV.
2. If it is a game app, you should also support more handle buttons.
ps: The following table is a common KeyEvent, we can rewrite the corresponding logic for handling this event. For example, DrawerLayout generally slides to the right to open on the phone, and slides to the left to close. On TV, we should handle the logic so that when the user clicks the right button of the up, down, left, and right buttons, it opens and the left button closes.
| KeyEvent | behavior |
|---|---|
| BUTTON_B、BACK | return |
| BUTTON_SELECT、BUTTON_A、ENTER、DPAD_CENTER、KEYCODE_NUMPAD_ENTER | select |
| DPAD_UP、DPAD_DOWN、DPAD_LEFT、DPAD_RIGHT | navigation |
| BUTTON_SELECT、BUTTON_A、ENTER、DPAD_CENTER、KEYCODE_NUMPAD_ENTER | Play |
| BUTTON_START、BUTTON_SELECT、BUTTON_A、ENTER、DPAD_CENTER、KEYCODE_NUMPAD_ENTER | time out |
| BUTTON_R1 | Skip to next |
| BUTTON_L1 | Skip to the previous |
| DPAD_RIGHT、BUTTON_R2、AXIS_RTRIGGER、AXIS_THROTTLE | Fast forward |
| DPAD_LEFT、BUTTON_L2、 AXIS_LTRIGGER、AXIS_BRAKE | Rewind |
| (There is no KeyEvent associated with "Stop") | stop |
2. Provide appropriate back button behavior
The back button should not act as a switch button. For example, don't use it to open and close menus. It should only be used to return to the screen where the player was before through the breadcrumb navigation method, for example: game process> game pause screen> game home screen> Android home screen.
3. Reference for details
Third, build the TV layout
The usual viewing distance of the TV screen is about 10 feet, which requires your layout interface to be concise. Here are some suggestions for TV layout design.
1. Suggestions on theme background
(1) Leanback theme background
The Leanback androidx library includes Theme.Leanback, which is the theme of TV Activity and provides a consistent visual style. We strongly recommend that you use this theme for any TV application built with the androidx leanback class
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:supportsRtl="true"
android:theme="@style/Theme.Leanback">
Note: The leanback theme does not include an action bar, because there is no action bar in the Android TV application. If your app uses Support Fragment like BrowseSupportFragment, your Activity must extend FragmentActivity. Do not use AppCompatActivity, it will try to set the theme of the action bar and generate the following error:
java.lang.RuntimeException: Unable to start activity ComponentInfo{
...} :
java.lang.IllegalStateException: You need to use a Theme.AppCompat theme (or descendant) with this
activity.
(2) NoTitleBar theme background
The title bar is a standard interface element of Android applications on mobile phones and tablets, but it is not suitable for TV applications. If you are not using the androidx leanback class, you should apply this theme to your TV Activity to suppress the title bar.
activity
android:name="com.example.android.TvActivity"
android:label="@string/app_name"
android:theme="@android:style/Theme.NoTitleBar">
...
</activity>
2. Build TV layout to comply with the guidelines
- Build a layout where the screen orientation is landscape. TV screen is always displayed in landscape mode
- Place the on-screen navigation controls on the left or right side of the screen, leaving the saved vertical space for content.
- Use Fragment to create an interface organized in several parts, and use view groups such as GridView (not ListView) to make fuller use of the horizontal space of the screen.
- Use view groups such as RelativeLayout or LinearLayout to lay out views. This method allows the system to adjust the position of the view according to the size, alignment, aspect ratio and pixel density of the TV screen
- Add sufficient margins between layout controls to avoid cluttering the interface.
3. Overscan
TV layout has some unique requirements, because TV standards continue to evolve, and users expect TV to always present a full screen to the audience. For this reason, the TV device may crop the outer edges of the application layout to ensure that the entire display is filled. This behavior is often referred to as "overscan"
(1) Requirements
Screen elements that must always be visible to the user should be placed in the overscan safe area, and remain visible. The direct control margain is 27dp up and down and 48dp left and right.
(2) Chestnuts
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<!-- Screen elements that can render outside the overscan safe area go here -->
<!-- Nested RelativeLayout with overscan-safe margin -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="27dp"
android:layout_marginBottom="27dp"
android:layout_marginLeft="48dp"
android:layout_marginRight="48dp">
<!-- Screen elements that need to be within the overscan safe area go here -->
</RelativeLayout>
</RelativeLayout>
(3) Note: If you use the androidx leanback class (such as BrowseFragment or related widgets), please do not apply overscan margins to layouts, because these layouts have already included overscan safety margins.
4. Font suggestions
- Use Android's standard font size:
<TextView
android:id="@+id/atext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:singleLine="true"
android:textAppearance="?android:attr/textAppearanceMedium"/>
5. TV layout suggestions
- The TV layout should target a screen size of 1920 x 1080 pixels
- Please provide pictures in the form of Jiugongge picture elements as much as possible
6. What should be avoided
- Reuse layout
- ActionBar
- ViewPager
7. Processing the big picture
It is recommended that you use the Glide library to obtain, decode and display bitmaps in your application.
More reference: Android graphics best practices
8. Provide effective advertising
1. It is recommended to be within 30s, you can turn off skip and the like through the control button.
2. Android TV does not provide a web browser. Your ads must not attempt to launch a web browser or redirect to Google Play store content that is not approved for use on Android TV devices.
3. You can use the WebView class to log in to social media services.
Fourth, create TV navigation
Use the remote control to navigate! ! !
Use the remote control to navigate! ! !
Use the remote control to navigate! ! !
1. Enable arrow key navigation
The Android framework automatically handles the direction navigation between layout elements. As above, the system will default to the first button, then we use the remote controlup down left rightofunderYou can navigate to button 2. You usually don’t need to perform any additional actions on the app. However, you should thoroughly test the navigation via the arrow key controller to find any navigation problems. Please follow the guidelines below to test whether your app’s navigation system can work well with the arrow keys on TV devices:
- Ensure that the user can use the arrow key controller to navigate to all visible controls on the screen.
- For a scrolling list with focus, make sure you can use the up and down arrow keys to scroll the list, and use the Enter key to select items in the list. Verify that the user can select elements in the list, and whether the list will still scroll when selecting elements
- Ensure that switching between controls is simple, clear and predictable
2. Modify the direction navigation
Although the Android framework automatically handles the direction navigation between layout elements, if you decide that you want users toSpecific wayNavigate in the layout, you canSet explicit direction navigation for the control。
(1) All available navigation attributes of Android interface widgets
| Control properties | Features |
|---|---|
| nextFocusDown | Defines the next view to gain focus when the user navigates down. |
| nextFocusLeft | Defines the next view to gain focus when the user navigates to the left. |
| nextFocusRight | Defines the next view that gets the focus when the user navigates to the right. |
| nextFocusUp | Defines the next view to gain focus when the user navigates up. |
To use one of the explicit navigation attributes, set the value to the ID (android:id value) of another widget in the layout. You should set the navigation order to loop so that the last control can direct the focus back to the first control.
(2) Chestnut button 1-> button 3-> button 2-> button 1
<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.LinearLayoutCompat xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:orientation="vertical"
android:gravity="center">
<androidx.appcompat.widget.AppCompatButton
android:id="@+id/btn1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="按钮1"
tools:ignore="HardcodedText"
android:nextFocusDown="@id/btn3"/>
<androidx.appcompat.widget.AppCompatButton
android:id="@+id/btn2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="按钮2"
tools:ignore="HardcodedText"
android:nextFocusDown="@id/btn1"/>
<androidx.appcompat.widget.AppCompatButton
android:id="@+id/btn3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="按钮3"
tools:ignore="HardcodedText"
android:nextFocusDown="@id/btn2"/>
</androidx.appcompat.widget.LinearLayoutCompat>
3. Provide clear focus and choices
When the user is allowed to navigate to the focused control, the color of the control is protruding, so that the user can see the effect. Experience interaction. Android gives the button chestnut reference:
<!-- res/drawable/button.xml -->
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:drawable="@drawable/button_pressed" /> <!-- pressed -->
<item android:state_focused="true"
android:drawable="@drawable/button_focused" /> <!-- focused -->
<item android:state_hovered="true"
android:drawable="@drawable/button_focused" /> <!-- hovered -->
<item android:drawable="@drawable/button_normal" /> <!-- default -->
</selector>
<Button
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:background="@drawable/button" />