diff --git a/docs/html/design/tv/images/overscan.png b/docs/html/design/tv/images/overscan.png index fb7e4bc08975a..7957e9732350f 100644 Binary files a/docs/html/design/tv/images/overscan.png and b/docs/html/design/tv/images/overscan.png differ diff --git a/docs/html/design/tv/style.jd b/docs/html/design/tv/style.jd index dd10a8a606b01..4c4398325bc3b 100644 --- a/docs/html/design/tv/style.jd +++ b/docs/html/design/tv/style.jd @@ -51,9 +51,11 @@ page.title=Style for TV Overscan borders for TV -

Build a 10% margin into your TV screen designs to account for overscan area the TV may not - display correctly. On a 1920 x 1080 pixel screen, this margin should be a minimum of 27px from the - top and bottom edges and a minimum of 48px from the right and left edges of the picture.

+

Build a 5% margin into your TV screen designs to account for overscan area the TV may not + display correctly. On a 1920 x 1080 screen, this margin should be a minimum of 27 pixels + from the top and bottom edges and a minimum of 48 pixels from the right and left edges of the + picture. +

Color

diff --git a/docs/html/training/tv/start/layouts.jd b/docs/html/training/tv/start/layouts.jd index 2b190b44b75c6..4ca77d08b4541 100644 --- a/docs/html/training/tv/start/layouts.jd +++ b/docs/html/training/tv/start/layouts.jd @@ -117,25 +117,43 @@ trainingnavtop=true This behavior is generally referred to as overscan.

-

- Avoid screen elements being clipped due to overscan and by incorporating a 10% margin - on all sides of your layout. This translates into a 48dp margin on the left and right edges and - a 27dp margin on the top and bottom of your base layouts for activities. The following - example layout demonstrates how to set these margins in the root layout for a TV app: +

Screen elements that must be visible to the user at all times should be positioned within the +overscan safe area. Adding a 5% margin of 48dp on the left and right edges and 27dp on the top and +bottom edges to a layout ensures that screen elements in that layout will be within the overscan +safe area. +

+ +

Background screen elements that the user doesn't directly interact with should not be adjusted or +clipped to the overscan safe area. This approach ensures that background screen elements look +correct on all screens. +

+ +

The following example shows a root layout that can contain background elements, and a nested +child layout that has a 5% margin and can contain elements within the overscan safe area:

 <?xml version="1.0" encoding="utf-8"?>
-<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
-  android:id="@+id/base_layout"
-  android:layout_width="match_parent"
-  android:layout_height="match_parent"
-  android:orientation="vertical"
-  android:layout_marginTop="27dp"
-  android:layout_marginLeft="48dp"
-  android:layout_marginRight="48dp"
-  android:layout_marginBottom="27dp" >
-</LinearLayout>
+<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>