Merge "docs: Fixing doc issue with Android TV overscan margin recommendations." into mnc-docs

<img src="{@docRoot}design/tv/images/overscan.png" alt="Overscan borders for TV" />

<p>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.</p>

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

  </p>

<h2>Color</h2>

  This behavior is generally referred to as <em>overscan</em>.

</p>

<p>

  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:

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

</p>

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

</p>

<p>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:

</p>

<pre>

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

  android:id="@+id/base_layout"

<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:orientation="vertical"

       android:layout_marginTop="27dp"

       android:layout_marginBottom="27dp"

       android:layout_marginLeft="48dp"

  android:layout_marginRight="48dp"

  android:layout_marginBottom="27dp" >

</LinearLayout>

       android:layout_marginRight="48dp">

      <!-- Screen elements that need to be within the overscan safe area go here -->

   </RelativeLayout>

</RelativeLayout>

</pre>

<p class="caution">