Android TV-Building Layouts for TV
A TV screen is typically viewed from about 10 feet away, and while it is much larger than most other Android device displays, this type of screen does not provide the same level of precise detail and color as a smaller device. These factors require you to create app layouts with TV devices in mind in order to create a useful and enjoyable user experience.
Android Themes can
provide a basis for layouts in your TV apps. You should use a theme to modify the display of your app activities that are meant to run on a TV device.
》A support library for TV user interfaces called the v17
leanback library provides a standard theme for TV activities, called Theme.Leanback
.
This theme establishes a consistent visual style for TV apps. Use of this theme is recommended for most TV apps. This theme is strongly recommended for any TV app that uses v17 leanback classes.
android:theme="@style/Theme.Leanback"
Follow these tips to build landscape layouts optimized for TV screens:
- Build layouts with a landscape orientation. TV screens always display in landscape mode.
- Put on-screen navigation controls on the left or right side of the screen and save the vertical space for content.
- Create UIs that are divided into sections, using Fragments, and use view groups like
GridView
instead ofListView
to make better use of the horizontal screen space. - Use view groups such as
RelativeLayout
orLinearLayout
to arrange views. This approach allows the system to adjust the position of the views to the size, alignment, aspect ratio, and pixel density of a TV screen. - Add sufficient margins between layout controls to avoid a cluttered UI.
<?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>》The text and controls in a TV app layout should be easily visible and navigable from a distance. Follow these tips to make your user interface elements easier to see from a distance:
- Break text into small chunks that users can quickly scan.
- Use light text on a dark background. This style is easier to read on a TV.
- Avoid lightweight fonts or fonts that have both very narrow and very broad strokes. Use simple sans-serif fonts and anti-aliasing to increase readability.
- Use Android's standard font sizes:
<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"/>
- Ensure that all your view widgets are large enough to be clearly visible to someone sitting 10 feet away from the screen (this distance is greater for very large screens). The best way to do this is to use layout-relative sizing
rather than absolute sizing, and density-independent pixel (dip) units instead of absolute pixel units. For example, to set the width of a widget, use
wrap_content
instead of a pixel measurement, and to set the margin for a widget, use dip values instead of px values.
》 The common high-definition TV display resolutions are 720p, 1080i, and 1080p. Your TV layout should target a screen size of 1920 x 1080 pixels, and then allow the Android system to downscale your layout elements to 720p if necessary. In general, downscaling (removing pixels) does not degrade your layout presentation quality. However, upscaling can cause display artifacts that degrade the quality of your layout and have a negative impact on the user experience of your app.
To get the best scaling results for images, provide them as 9-patch image elements if possible. If you provide low quality or small images in your layouts, they will appear pixelated, fuzzy, or grainy, which is not a good experience for the user. Use high-quality images instead.
》There are a few approaches to building layouts that you should avoid because they do not work well on TV devices and lead to bad user experiences. Here are some user interface approaches you should specifically notuse when developing a layout for TV.
- Re-using phone or tablet layouts - Do not reuse layouts from a phone or tablet app without modification. Layouts built for other Android device form factors are not well suited for TV devices and should be simplified for operation on a TV.
- ActionBar - While this user interface convention is recommended for use on phones and tablets, it is not appropriate for a TV interface. In particular, using an action bar options menu (or any pull-down menu for that matter) is strongly discouraged, due to the difficulty in navigating such a menu with a remote control.
- ViewPager - Sliding between screens can work great on a phone or tablet, but don't try this on a TV!
》TV devices, like any other Android device, have a limited amount of memory. If you build your app layout with very high-resolution images or use many high-resolution images in the operation of your app, it can quickly run into memory limits and cause out of memory errors. To avoid these types of problems, follow these tips:
- Load images only when they are displayed on the screen. For example, when displaying multiple images in a
GridView
orGallery
, only load an image whengetView()
is called on the view'sAdapter
. - Call
recycle()
onBitmap
views that are no longer needed. - Use
WeakReference
for storing references toBitmap
objects in an in-memoryCollection
. - If you fetch images from the network, use
AsyncTask
to fetch and store them on the device for faster access. Never do network transactions on the application's main user interface thread. - Scale down large images to a more appropriate size as you download them; otherwise, downloading the image itself may cause an out of memory exception.
》For the living room environment, we recommend you use video ads solutions that are full-screen and dismissable within 30 seconds. Functionality for advertising on Android TV, such as dismiss buttons and clickthroughs, must be accessible using the D-pad rather than touch.
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 Android TV devices.
Note: You can use the WebView
class for logins to services like Google+
and Facebook.
相關文章
- android tv-Building TV GamesAndroidUIGAM
- android TV-Building TV Channels,Developing a TV Input ServiceAndroidUIdev
- Android TV-Building TV Apps,Get Started with TV AppsAndroidUIAPP
- android TV-Building a Details View,Displaying a Now Playing CardAndroidUIAIView
- Android TV開發——RecyclerView For TVAndroidView
- Android TVAndroid
- android tv-TV Apps ChecklistAndroidAPP
- Android TV-Handling TV HardwareAndroid
- Android TV-Creating TV NavigationAndroidNavigation
- android TV-Recommending TV Content,Android
- android TV-Making TV Apps Searchable,Searching within TV AppsAndroidAPP
- http://purecss.io/layouts/HTTPCSS
- Android Jetpack - Android TV 應用開發教程AndroidJetpack
- Android TV開發總結【RecycleView】AndroidView
- android TV-Working with Channel DataAndroid
- android tv-Managing User InteractionAndroid
- 一起看 I/O | Google TV 和 Android TV OS 的最新進展GoAndroid
- stf 怎麼使用在 android tv 上Android
- Android TV版小米盒子專版亮相Android
- Android TV端RecyclerView焦點亂跑AndroidView
- CSS Masonry Layouts【一】之 multi-columnsCSS
- d3js path generator vs layoutsJS
- [譯]利用 Android 構建 TV 的未來Android
- [譯] 利用 Android 構建 TV 的未來Android
- [譯]SearchFragment --Android TV 開發手冊十二FragmentAndroid
- Zend Framework佈局和檢視 Layouts viewsFrameworkView
- 聊聊真實的 Android TV 開發技術棧Android
- 如何在Android TV 桌面新增自定義頻道/節目Android
- 小米和Google合作:Android TV版小米盒子進軍美國GoAndroid
- Java TV MHPJava
- Android TV版電視盒子亮相 小米和Google看著樂AndroidGo
- android TV - Creating a Catalog Browser,Providing a Card ViewAndroidView
- PcMagazine:羅技TV、谷歌TV、Roku XDS三大網際網路TV引數對比谷歌
- Android TV曝出bug 或導致使用者私人照片洩露Android TV新漏洞:你的照片可能出現在他人的電視中!Android
- Google:Android TV月活裝置數已超8000萬臺GoAndroid
- [譯]Recommendation card (推薦卡)--Android TV 開發手冊十一Android
- 鬥魚TV回應直播造人 鬥魚TV直播造娃娃事件始末事件
- 蘋果最新的Apple TV怎麼樣?全新Apple TV解析蘋果APP