November 4, 2013
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.
- 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;
- 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;
- 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);
- 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;
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.