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
-
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. +
- 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>