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.

Google TV app

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

Google TV Device

•       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

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.

Vineet Aggarwal

Vineet Aggarwal

Sr. Technical Lead

Vineet Aggarwal is a Sr. Technical Lead at 3Pillar Global Labs, which is part of 3Pillar’s company strategy in the fields of big data analytics, mobility, and cloud-based applications. Vineet leads development and support for the popular open source tool SocialAuth–Android. He also leads our Android Competency Center in India and is responsible for mentoring Android Developers across the company to develop internal expertise. He has hands-on experience with various mobile platforms and keen interest in Android and iPhone. He loves designing new apps, learning upcoming technologies, and mentoring members of the Android community.

Leave a Reply

Related Posts

Designing the Future & the Future of Work – The I... Martin Wezowski, Chief Designer and Futurist at SAP, shares his thoughts on designing the future and the future of work on this episode of The Innovat...
The 4 Characteristics of a Healthy Digital Product Team Several weeks ago, I found myself engaged in two separate, yet eerily similar, conversations with CEOs struggling to gain the confidence they needed t...
Recapping Fortune Brainstorm Tech – The Innovation Eng... On this episode of The Innovation Engine, David DeWolf and Jonathan Rivers join us to share an overview of all the news that was fit to print at this ...
4 Reasons Everyone is Wrong About Blockchain: Your Guide to ... You know a technology has officially jumped the shark when iced tea companies decide they want in on the action. In case you missed that one, Long Isl...
The Connection Between Innovation & Story On this episode of The Innovation Engine, we'll be looking at the connection between story and innovation. Among the topics we'll cover are why story ...