Emanuele Feronato

Talking about Android, Game development, HTML5 and Javascript.

I already showed you the creation of a native Android App starting from a HTML5 game using Cocoon.io, the tool I used to turn my HTML5 games Ladderz, znumberz and Stack the Crates into native Android games.

Things start to become harder when you want to publish for Android TV, as Cocoon.io does not support Android TV configuration, and no one of the plugins you can find around the web work.

So you should abandon Cocoon.io and stick on Android Studio + Cordova. If you aren’t familiar with these tools, I already wrote two detailed tutorials:

* Make your HTML5 games run on Android devices with Cordova and Android Studio.

* Make your HTML5 games run on Android devices with Cordova and Android Studio – Running on actual devices.

Once you have your Cordova project imported in Android Studio, these are the changes you must make, mainly on AndroidManifest.xml:

<?xml version='1.0' encoding='utf-8'?>
<manifest
    android:hardwareAccelerated="true"
    android:versionCode="10010"
    android:versionName="1.1.0"
    package="com.emanueleferonato.stackthecrates"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <supports-screens
        android:anyDensity="true"
        android:largeScreens="true"
        android:normalScreens="true"
        android:resizeable="true"
        android:smallScreens="true"
        android:xlargeScreens="true" />

    <uses-permission android:name="android.permission.INTERNET" />

    <uses-feature android:name="android.software.leanback" android:required="false" />

    <uses-feature android:name="android.hardware.touchscreen" android:required="false" />

    <uses-sdk android:minSdkVersion="16" android:targetSdkVersion="27" />

    <application
        android:hardwareAccelerated="true"
        android:icon="@mipmap/icon"
        android:banner="@drawable/banner"
        android:label="@string/app_name"
        android:isGame="true"
        android:supportsRtl="true">

        <activity
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale"
            android:screenOrientation="portrait"
            android:label="@string/activity_name"
            android:launchMode="singleTop"
            android:name="com.emanueleferonato.stackthecrates.MainActivity"
            android:theme="@android:style/Theme.DeviceDefault.NoActionBar"
            android:windowSoftInputMode="adjustResize">

            <intent-filter android:label="@string/launcher_name">
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

        <activity
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale"
            android:screenOrientation="landscape"
            android:label="@string/activity_name"
            android:launchMode="singleTop"
            android:name="com.emanueleferonato.stackthecrates.TVActivity"
            android:theme="@android:style/Theme.DeviceDefault.NoActionBar"
            android:windowSoftInputMode="adjustResize">

            <intent-filter android:label="@string/launcher_name">
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LEANBACK_LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

Let me show you the lines you have to add or modify:

Line 19: the Leanback user interface is required by Android TV. By the way, if you are developing an app which runs both on Android TV and mobile phones, you have to set the required attribute value to false, as if you set the required attribute value to true, your app will run only on devices that use the Leanback UI.

Line 21: Applications that are intended to run on TV devices do not rely on touch screens for input. To make this clear, you must declare that the android.hardware.touchscreen feature is not required. This setting identifies your app as being able to work on a TV device, and is required for your app to be considered a TV app in Google Play.

Line 28: if you want your app to be approved for Android TV distribution, you need to provide a 320×180 banner with the name of the game in it. This is the one I provided, as there is no default banner:

The system uses the banner to represent an app in the Android TV home screen. Since the banner is displayed only in the home screen, it should only be specified by applications with an activity that handles the CATEGORY_LEANBACK_LAUNCHER (line 59) intent.

You will save your banner as banner.png in src/main/res/drawable folder inside your Cordova project. drawable folder does not exist in src/main/res so you will have to create it by yourself.

Line 30: declare the application is a game. In Android TV, applications classifed as games are displayed separately from non gaming applications.

Lines 48-61: these lines will describe the TV activty, let’s see the most important:

Line 50: set landscape orientation.

Line 53: here you will the name of the class that implements the activity. There is no default, the name must be specified and must be unique. I just copied the main activty used for the mobile devices at line 38 and changed its name, as you can see from the picture of the project tree:

Line 59: an application intended to run on TV devices must declare a launcher activity for TV in its manifest. It uses a CATEGORY_LEANBACK_LAUNCHER intent filter to do this. This filter identifies your app as being enabled for TV, and lets Google Play identify it as a TV app. When a user selects your app on their TV home screen, this intent identifies which activity to launch.

And this is how your game should look on the Android TV main screen:

A full step by step updated guide to port HTML5 games to Android Studio will follow during next days.