Developing Apps for Google TV, Part II

In the previous blog post on Google TV, we introduced Smart TV platforms and discussed how Google TV is emerging as one of the best Smart TV available today. We also touched upon the different types of apps that can be developed specifically for Google TV.

This second part will focus on development of Android apps for Google TV. I am taking the liberty in assuming that readers here do have prior Android development experience. Google TV is just another platform for Android developers to showcase their skills and therefore the app development is largegly the same, but there are some significant differences which developers should know while designing Google TV Android apps.

Let me demonstrate by giving the example of LifeView, an app developed by 3PillarLabs just to ensure we have a firm grasp on the basics by the end of this blog.

The Google TV app development process will start by learning how to setup the environment for Google TV apps.

The following screenshot shows how the app will look post-development.

Set up Environment

•       Setup Android by downloading the ADT bundle

•       Install SDK 3.2 and Google TV add on from Android SDK Manager.

•       Create new “Device Definition” in “Android Virtual Device Manager”

– For 1080p use a resolution of 1920×1080 and a density of xhdpi.
– For 720p use a resolution of 1080×720 with a density of hdpi.

•       Setting up Google TV Device

Enter your workstation IP address by clicking Debugger IP Address and press set. Click Remote Debugging in Applications > Development in the settings area of the application

•       Connecting to Google TV Device

Write down device IP address from settings application. Run ADB from command prompt to connect your workstation with device by the command: adb connect

App Architecture

The app will show albums and photos from Facebook and Twitter. User will be able to load photos and albums and browse them in the gallery.

Setting up LeftNavBar

This step involves creation of the LeftNavBar and adding buttons for Facebook and Twitter on the navigation bar. The left side navigation library is added in the libs directory of your application. The library contains classes that facilitate putting action controls on the left side of the screen.

Here you can see how we managed to add two tabs i.e. Facebook and Twitter and their corresponding click calling methods to load albums.

public class LeftNavBarUI {
private static Context mContext;
public static LeftNavBar getLeftNavBar(Context context) {
             LeftNavBar bar = (LeftNavBarService.instance()).getLeftNavBar((Activity) context);
mContext = context;
bar.setDisplayShowTitleEnabled(false);
              bar.setNavigationMode(LeftNavBar.NAVIGATION_MODE_TABS);
            bar.setBackgroundDrawable(mContext.getResources().getDrawable(R.drawable.left_gradient));
            bar.addTab(bar.newTab().setText(R.string.facebook).setIcon(R.drawable.facebook)
						    .setTabListener(placesTabListener), false);
bar.addTab(bar.newTab().setText(R.string.twitter).setIcon(R.drawable.twitter)
						.setTabListener(placesTabListener), false);
	bar.showOptionsMenu(true);
return bar;
}

private static LeftNavBar.TabListener placesTabListener = new LeftNavBar.TabListener() {
	public void onTabSelected(Tab tab, FragmentTransaction ft) {
	if (tab.getPosition() == 0) {
		((AlbumActivity) mContext).changeView("facebook");
	} else if (tab.getPosition() == 1) {
		((AlbumActivity) mContext).changeView("twitter");
	}
}

Using Google TV UI Guidelines

We follow the following UI guidelines while developing the app:

• Google TV automatically uses the large set of resources.
• For font size, using units of scale-independent pixels(sp)
• Using layout-relative sizing (wrap_content), and density-independent  pixel values (dp units) for widgets
• Using Android Fragments and Dynamic Layouts
• Ensuring App is in landscape mode

Adding Social Networks

This part is related to core logic of app and not specific to Google TV app development. We are using socialauth-Android library to include social networks Facebook and Twitter in app. The library will help us to handle secure authorization and return with albums and photos.

// in oncreate
adapter = new SocialAuthAdapter(new ResponseListener());
adapter.authorize(AlbumActivity.this, Provider.FACEBOOK);
private final class ResponseListener implements DialogListener {
	public void onComplete(Bundle values) {
	Log.d("LifeView", "Authentication Successful");
             adapter.getAlbumsAsync(new AlbumDataListener());
}}

Creating Gallery and Handling Large Resolution Images

Using View Flipper, we create the gallery to show photos from albums. Since the photos are of high resolution, the system is susceptible to get a memory error, so therefore we create a solution to handle large resolution images first.

1. Get Source Image dimensions and download image headers only

   BitmapFactory.Options options = new BitmapFactory.Options(); 
   options.inJustDecodeBounds = true;, just downloads headers. BitmapFactory.decodeFile(IMAGE_FILE_URL, options); 
   int srcWidth = options.outWidth;

2. Calculate scale value to reduce memory usage.

   int inSampleSize = 1; 
   while(srcWidth / 2 > desiredWidth)
   { 
        srcWidth /= 2; 
        srcHeight /= 2; 
        inSampleSize *= 2; 
   } 
   float desiredScale = (float) desiredWidth / srcWidth;

3. Decode with Sample Size

   options.inJustDecodeBounds = false; // now download the actual 
   image. options.inSampleSize = inSampleSize; 
   options.inPreferredConfig = Bitmap.Config.ARGB_8888; 
   Bitmap sampledSrcBitmap = BitmapFactory.decodeFile(IMAGE_FILE_URL, options);

4. Resize

   Matrix matrix = new Matrix(); 
   matrix.postScale(desiredScale, desiredScale); 
   Bitmap scaledBitmap = Bitmap.createBitmap(sampledSrcBitmap, 0, 0, sampledSrcBitmap.getWidth(), sampledSrcBitmap.getHeight(), matrix, true); sampledSrcBitmap = null;

5. Save

   FileOutputStream out = new FileOutputStream(LOCAL_PATH_TO_STORE_IMAGE); 
   scaledBitmap.compress(Bitmap.CompressFormat.JPEG, 100, out); 
   scaledBitmap = null;

Testing the app

Connect your system on Wi-Fi with Google TV device as described above. Run the app and you will see the LifeView app with screenshots shown right at the start of the blog.

Download

You can download the LifeView app on Google Play.

Conclusion

As discussed, Google TV app development should be easy for Android developers and going forward it will open up new set of smart TV solutions. It will help developers to showcase their skills in newer ways and create new routes to revenue.