Donate to e Foundation | Murena handsets with /e/OS | Own a part of Murena! Learn more

Commit cc40d8cd authored by Daniel Yu's avatar Daniel Yu
Browse files

docs: Fixing doc issue with Android TV overscan margin recommendations. 

Recommendation is to provide a 5% overscan margin -- updating docs
to reflect this. Updated example diagram (manually edited, image
source not available). Added guidance on working with margins and
layout. Updated sample layout to include background root layout and
nested layout with overscan safe margin (tested with test app).

Bug: 18550276
Change-Id: I71b83b9a348385d68a7aacdce17f51a93227694d
parent f2c0d239

docs/html/design/tv/images/overscan.png

+8.53 KiB (122 KiB)
Loading image diff...

docs/html/design/tv/style.jd

+5 −3
Original line number Diff line number Diff line
@@ -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>

docs/html/training/tv/start/layouts.jd

+33 −15
Original line number Diff line number Diff line
@@ -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"

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

       android:layout_marginTop="27dp"

       android:layout_marginBottom="27dp"

       android:layout_marginLeft="48dp"

  android:layout_marginRight="48dp"

  android:layout_marginBottom="27dp" &gt;

&lt;/LinearLayout&gt;

       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">