10. TV UI

? TV UI Layout

1. Provide proper layout source files for the large screen.
2. Make sure that the UI is still visible at a certain distance.
3. provides high-resolution icons and images for HDTV.

1. Place the navigation menu on the screen on the left or right of the screen, and display the menu content vertically.

2. When creating the segmented UI, use fragments and gridview to replace listview to make full use of the horizontal space view.

3. Use relativelayout and linearlayout for layout. These two la s allow the Android system to match the view location based on the size, alignment, aspect ratio, and pixel density of the screen.

4. provide sufficient room between view control to avoid a messy user interface.

Left and right layout example

 1 <RelativeLayout  2       android:layout_width="fill_parent"     3       android:layout_height="fill_parent"> 4      <fragment   5           android:id="@+id/leftsidecontrols"  6           android:layout_width="0dip"   7           android:layout_marginLeft="5dip"  8           android:layout_height="match_parent" /> 9      <GridView10           android:id="@+id/gridview"   11           android:layout_width="wrap_content" 12           android:layout_height="wrap_content" />13 </RelativeLayout>

 

? Make text and control easy to see

1. Insert text into small pieces that users can quickly scan.

2. Use bright text in a dark background. This style is easier to read on a TV.

3. Avoid lightweight fonts and stroke fonts that are either very narrow or very wide. Use a single unlined font and use anti-aliasing to improve readability.

4. Use density-independent pixel units instead of absolute pixel units (DP and SP ).

? High-resolution large screen design

The general hd TV display resolution is 720 p and P. set your UI to 1080 p and allow the system to lower your UI resolution to P as necessary. generally, downgrading does not mean downgrading your UI (you should avoid doubling because it will reduce the UI quality ).

To get the best image display, use the 9-patch Image Element if possible. If you provide low quality or small images in your layout, they will be pixel, blurred, or granular. this is not a good user experience for users. instead, we use high-quality images.

? TV UI navigation design principles

1. Make sure that all la s are under the control of key navigation.

2. Provide clear feedback for visualized navigation.
3. A reasonable layout makes it easier to access each UI.

? Process button navigation

On a TV, you can use a remote navigation method, such as a remote control or keyboard. This limits that (the screen cursor) can only move up, down, left, and right. Therefore, to build an excellent application, you must provide a set of navigation policies that users can quickly learn in the application.

When you design navigation for the remote control, follow the following principles:

1. Make sure that the remote control can control all the controls on the interface.

2. When you use the up/down key to control the list scrolling, when you use the OK key to select an item in the list, make sure that the list can still be rolled.

3. moving between controllable elements requires simplicity and predictability.

? Next focus control

Android usually automatically processes the navigation sequence in the layout element, so you do not need to worry about the order in which the control gets focus. Unless the layout is very complex or requires special movement between layout elements, it is also possible. For example, if you have an edittext control that defines the next control that obtains the focus, you can set the following four attributes.

? Provide clear tips for focus and selection

Highlight the selected elements with appropriate colors, so that users can easily know which controllable element is selected. In addition, we recommend that you use a uniform style of highlight for the entire application. Android uses drawable State List resources to highlight the selected or focused controls. For example:

 1 <!-- button.xml --> 2 <?xml version"utf-8"?> 3 <selector  xmlns:android="http://schemas.android.com/apk/res/android"> 4       <!-- pressed --> 5       <item android:state_pressed="true"   6                android:drawable="@drawable/button_pressed" /> 7       <!-- focused --> 8       <item android:state_focused="true"   9                 android:drawable="@drawable/button_focused" /> 10       <!-- hovered -->11       <item android:state_hovered="true"  12                 android:drawable="@drawable/button_focused" />13       <!-- default -->14       <item android:drawable="@drawable/button_normal" /> 15 </selector>

1 <Button2       android:layout_height="wrap_content"      3       android:layout_width="wrap_content" 4       android:background="@drawable/button" />

 

? Easy Navigation

By pressing as few keys as possible to navigate to any UI, the navigation should be simple and easy to understand. For more complex operations, you must provide buttons and icons with the help function, A help dialog box is displayed when the user clicks.

This is the next interface that predicts that users may switch over. We can provide a navigation bar (with a user's intent. If the current interface is loose, consider dividing the screen into multiple panels. You can use fragment to form an interface with multiple panels. For example, if you put a panel containing the Title List on the left of the screen, the panel containing the subtitle list will be placed on the right.

? Functions not supported by TV

? Solutions for unsupported features

Android is equipped with a touch screen by default. If the system runs on a TV, you have to configure mainfest in the configuration file, without the touch screen:

<Uses-feature Android: Name = "android. Hardware. touchscreen" Android: required = "false"/>

Because the TV is fixed and indoor, there is no built-in GPS. If your program needs to use geographic location information, either allow users to query (online), or use "static location provider" to obtain the information, this method is completed by querying the zip code.

Locationmanager = (locationmanager) This. getsystemservice (context. location_service );
Location = locationmanager. getlastknownlocation ("static ");

? Runtime detection function availability

If (getpackagemanager (). hassystemfeature ("android. Hardware. telephony ")){

Log. D ("Mobile test", "running on phone ");}

Else if (getpackagemanager (). hassystemfeature ("android. Hardware. touchscreen "))

{
Log. D ("tablet test", "running on devices that don't support telphony but have

Touchscreen .");

}

Else
{

Log. D ("TV test", "running on a TV! ");

}

 

 

 

10. TV UI