Calling All Artists! Create Banner Packs for Android TV!

Today we are launching a new feature in the Tv App Repo: Banner Packs. They work pretty much the same as icon packs, albeit a different image resolution. This is a brief guide to how to create banner packs from scratch or update your existing icon packs to support TVs. Note that these banner packs currently will only be accessible through the Tv App Repo app. In the future, third-party TV launchers may choose to support the format as well.

But why should you add custom banners?

  • For premium packs, this adds more value for users and adds differentiation from competitors
  • Adds consistency throughout the entire Android platform
  • Make it available through an in-app purchase to increase your revenue
  • They’re cool

To create our own custom banner pack, which is available on Google Play and GitHub, we started out with a previously existing icon pack project. Then we just made a handful of modifications for TV support. Whether you’re starting out from scratch or modifying your existing tech, this guide will help you get started.

Step 1. Have an Icon Pack

If you’re not familiar with how icon packs work, check out this guide and this GitHub project. Essentially, your app will contain a series of alternate icons and expose metadata in a standard format to allow launchers or other apps to read them easily. In Tv App Repo, we scan the system for resource pack apps and then process the metadata in order to find relevant files.

If  you are familiar, and have your own, then you’re done. Great job!

Step 2. Create TV Banner Drawables

I am not an artist

This is the most artistic step. Basically, create your resources. Banners on the Android TV Launcher should be 320 x 180 pixels. As they do not contain a label underneath like on a phone, the app’s title should be placed somewhere in the image. It’s not strictly necessary, although it is standard practice. This step may be as easy as taking your existing icons and placing them on a colorful background.

If you are including the title in your image, think carefully about localization. What types of people download your app? Your titles should reflect those languages. Android’s resource system allows you to put resources in different languages into different folders with the same name. When you want to pull out the drawable, it picks the right kind.

Step 3. Modify your metadata

This is the part that’s the most technical and nuanced. It’s where you link your banner names to ComponentInfo strings in your XML file. If you already have an icon pack, you can copy the same values but with a minor change. If you have no idea what ComponentInfo strings you need, look at example icon packs online which have those already.

There are two ways you can mark your drawable as a banner in XML. First, you can easily add your item to the same appfilter.xml and add the attribute banner="true". When being processed, relevant apps will be able to detect this change.

If you don’t want to do this, for fear of cluttering that file or if it causes bugs with an app that doesn’t understand, you can use the appfilterbanner.xml file. It will be formatted the same, except all items in it will be assumed to be banners.

Step 4. Add TV Support

For an icon pack app, adding TV support should be relatively straightforward. There are two major things you need to do:

  • In the AndroidManifest.xml, remove the touchscreen requirement
  • Create a simple Leanback Launcher Activity, provide some brief explanation about your app, and add it to AndroidManifest.xml with the intent filter LEANBACKLAUNCHER
<uses-feature android:name="android.hardware.touchscreen" android:required="false" />
<activity
    android:name=".activities.DemoActivity"
    android:label="@string/app_name"
    android:icon="@drawable/banner"
    android:banner="@drawable/banner"
    android:screenOrientation="landscape">
    <intent-filter>
       <action android:name="android.intent.action.MAIN" />
       <category android:name="android.intent.category.LEANBACK_LAUNCHER" />
    </intent-filter>
    <intent-filter>
       <action android:name="android.intent.action.MAIN" />
       <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
</activity>

Step 5. Test & Publish

At this point, you’ve made all the necessary changes. Now you can test your app in mobile and TV scenarios to make sure it behaves appropriately. Once everything looks good, publish your app and let your users know about the change. Also, in the Play Store Developer Console you can mark your app for distribution on TVs. This isn’t necessary to allow users to download the app from the web, but it will be needed for users to find the app in the store itself.

Also, send us a comment. We’ll add a link to your store in the project’s README.

Try it out

As mentioned above, you can download our sample banner pack on Google Play or check out the source on GitHub.

Sample Banner Pack
Sample Banner Pack
Developer: Felker Tech
Price: Free
Tv App Repo
Tv App Repo
Developer: Felker Tech
Price: Free

Nick Felker

Nick Felker

Nick Felker is a student Electrical & Computer Engineering student at Rowan University (C/O 2017) and the student IEEE webmaster. When he's not studying, he is a software developer for the web and Android (Felker Tech). He has several open source projects on GitHub (http://github.com/fleker) Devices: Moto G-2013 Moto G-2015, Moto 360, Google ADT-1, Nexus 7-2013 (x2), Lenovo Laptop, Custom Desktop. Although he was an intern at Google, the content of this blog is entirely independent and his own thoughts.

More Posts - Website

Follow Me:
TwitterLinkedInGoogle PlusReddit