Optimizing Layouts for TV

When your application is running on a television set, you shouldassume that the user is sitting about ten feet away from thescreen. This user environment is referred to asthe 10-footUI. To provide your users with a usable and enjoyableexperience, you should style and lay out your UI accordingly..

This lesson shows you how to optimize layouts for TV by:

• Providing appropriate layoutresources for landscape mode.
• Ensuring that text and controlsare large enough to be visible from a distance.
• Providing high resolution bitmapsand icons for HD TV screens.

Design Landscape Layouts

---

TV screens are always in landscape orientation. Follow these tipsto build landscape layouts optimized for TV screens:

• Put on-screen navigationalcontrols on the left or right side of the screen and save thevertical space for content.
• Create UIs that are divided intosections, by using Fragments anduse view groups like GridView insteadofListView tomake better use of the horizontal screen space.
• Use view groups suchas RelativeLayout or LinearLayout toarrange views. This allows the Android system to adjust theposition of the views to the size, alignment, aspect ratio, andpixel density of the TV screen.
• Add sufficient margins betweenlayout controls to avoid a cluttered UI.

For example, the following layout is optimized for TV:

In this layout, the controls are on the lefthand side. The UI isdisplayed within a GridView,which is well-suited to landscape orientation. In this layout bothGridView and Fragment have the width and height set dynamically, sothey can adjust to the screen resolution. Controls are added to theleft side Fragment programatically at runtime. The layout file forthis UI is res/layout-land-large/photogrid_tv.xml.(This layout file is placed in layout-land-large becauseTVs have large screens with landscape orientation. For detailsrefer toSupportingMultiple Screens.)

res/layout-land-large/photogrid_tv.xml

    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    
        android:id="@+id/leftsidecontrols"
        android:layout_width="0dip"
        android:layout_marginLeft="5dip"
        android:layout_height="match_parent" />

            
        android:id="@+id/gridview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

To set up action bar items on the left side of the screen, you canalso include the Leftnavigation bar library in your application toset up action items on the left side of the screen, instead ofcreating a custom Fragment to add controls:

LeftNavBar bar = (LeftNavBarService.instance()).getLeftNavBar(this);

When you have an activity in which the content scrolls vertically,always use a left navigation bar; otherwise, your users have toscroll to the top of the content to switch between the content viewand the ActionBar. Look at the Leftnavigation bar sample app to see how to simpleit is to include the left navigation bar in your app.

Make Text and Controls Easy to See

---

The text and controls in a TV application's UI should be easilyvisible and navigable from a distance. Follow these tips to makethem easier to see from a distance :

• Break text into small chunks thatusers can quickly scan.
• Use light text on a darkbackground. This style is easier to read on a TV.
• Avoid lightweight fonts or fontsthat have both very narrow and very broad strokes. Use simplesans-serif fonts and use anti-aliasing to increasereadability.
• Use Android's standard font sizes:

    
          android:id="@+id/atext"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:gravity="center_vertical"
          android:singleLine="true"
          android:textAppearance="?android:attr/textAppearanceMedium"/>
    
  

• Ensure that all your view widgetsare large enough to be clearly visible to someone sitting 10 feetaway from the screen (this distance is greater for very largescreens). The best way to do this is to use layout-relative sizingrather than absolute sizing, and density-independent pixel unitsinstead of absolute pixel units. For example, to set the width of awidget, use wrap_content instead of a pixel measurement, and to setthe margin for a widget, use dip instead of px values.

 

Design for High-Density Large Screens

---

The common HDTV display resolutions are 720p, 1080i, and 1080p.Design your UI for 1080p, and then allow the Android system todownscale your UI to 720p if necessary. In general, downscaling(removing pixels) does not degrade the UI (Notice that the converseis not true; you should avoid upscaling because it degrades UIquality).

To get the best scaling results for images, provide themas 9-patchimage elements if possible. If you provide lowquality or small images in your layouts, they will appearpixelated, fuzzy, or grainy. This is not a good experience for theuser. Instead, use high-quality images.

For more information on optimizing apps for large screenssee Designing formultiple screens.

Design to Handle Large Bitmaps

---

The Android system has a limited amount of memory, so downloadingand storing high-resolution images can often cause out-of-memoryerrors in your app. To avoid this, follow these tips:

• Load images only when they'redisplayed on the screen. For example, when displaying multipleimages in aGridView or Gallery,only load an image when getView() iscalled on the View's Adapter.
• Call recycle() on Bitmap viewsthat are no longer needed.
• Use WeakReference forstoring references to Bitmap objectsin an in-memory Collection.
• If you fetch images from thenetwork, use AsyncTask tofetch them and store them on the SD card for faster access. Neverdo network transactions on the application's UI thread.
• Scale down really large images toa more appropriate size as you download them; otherwise,downloading the image itself may cause an "Out of Memory"exception. Here is sample code that scales down images whiledownloading:

    // Get the source image's dimensions
    BitmapFactory.Options options = new BitmapFactory.Options();
    // This does not download the actual image, just downloads headers.
    options.inJustDecodeBounds = true; 
    BitmapFactory.decodeFile(IMAGE_FILE_URL, options);
    // The actual width of the image.
    int srcWidth = options.outWidth;  
    // The actual height of the image.
    int srcHeight = options.outHeight;  
  
    // Only scale if the source is bigger than the width of the destination view.
    if(desiredWidth > srcWidth)
      desiredWidth = srcWidth;
  
    // Calculate the correct inSampleSize/scale value. This helps reduce memory use. It should be a power of 2.
    int inSampleSize = 1;
    while(srcWidth / 2 > desiredWidth){
      srcWidth /= 2;
      srcHeight /= 2;
      inSampleSize *= 2;
    }
  
    float desiredScale = (float) desiredWidth / srcWidth;
  
    // Decode with inSampleSize
    options.inJustDecodeBounds = false;
    options.inDither = false;
    options.inSampleSize = inSampleSize;
    options.inScaled = false;
    // Ensures the image stays as a 32-bit ARGB_8888 image.
    // This preserves image quality.
    options.inPreferredConfig = Bitmap.Config.ARGB_8888;  
                                                          
    Bitmap sampledSrcBitmap = BitmapFactory.decodeFile(IMAGE_FILE_URL, options);
  
    // Resize
    Matrix matrix = new Matrix();
    matrix.postScale(desiredScale, desiredScale);
    Bitmap scaledBitmap = Bitmap.createBitmap(sampledSrcBitmap, 0, 0,
        sampledSrcBitmap.getWidth(), sampledSrcBitmap.getHeight(), matrix, true);
    sampledSrcBitmap = null;
  
    // Save
    FileOutputStream out = new FileOutputStream(LOCAL_PATH_TO_STORE_IMAGE);
    scaledBitmap.compress(Bitmap.CompressFormat.JPEG, 100, out);
    scaledBitmap = null;