Android/frameworks_base
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Dan Yu
2015-11-18 23:48:29 +00:00
committed by Android (Google) Code Review
parent 9b616e4d34 cc40d8cd86
commit ca662f17cf
3 changed files with 38 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
docs/html/design/tv/images/overscan.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 114 KiB

After

Width:  |  Height:  |  Size: 122 KiB

8
docs/html/design/tv/style.jd
View File

@@ -51,9 +51,11 @@ page.title=Style for TV
<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>

48
docs/html/training/tv/start/layouts.jd
View File

@@ -117,25 +117,43 @@ trainingnavtop=true
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>
&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;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" &gt;
&lt;/LinearLayout&gt;
&lt;RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
&gt;
&lt;!-- Screen elements that can render outside the overscan safe area go here --&gt;
&lt;!-- Nested RelativeLayout with overscan-safe margin --&gt;
&lt;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"&gt;
&lt;!-- Screen elements that need to be within the overscan safe area go here --&gt;
&lt;/RelativeLayout&gt;
&lt;/RelativeLayout&gt;
</pre>
<p class="caution">