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
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.xmlwith the intent filter
<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.