How to make your HTML5 game run as a native Android TV app using Android Studio and Cordova

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.

Get the most popular Phaser 3 book

Through 202 pages, 32 source code examples and an Android Studio project you will learn how to build cross platform HTML5 games and create a complete game along the way.

Get the book

215 GAME PROTOTYPES EXPLAINED WITH SOURCE CODE
// 1+2=3
// 100 rounds
// 10000000
// 2 Cars
// 2048
// A Blocky Christmas
// A Jumping Block
// A Life of Logic
// Angry Birds
// Angry Birds Space
// Artillery
// Astro-PANIC!
// Avoider
// Back to Square One
// Ball Game
// Ball vs Ball
// Ball: Revamped
// Balloon Invasion
// BallPusher
// Ballz
// Bar Balance
// Bejeweled
// Biggification
// Block it
// Blockage
// Bloons
// Boids
// Bombuzal
// Boom Dots
// Bouncing Ball
// Bouncing Ball 2
// Bouncy Light
// BoxHead
// Breakout
// Bricks
// Bubble Chaos
// Bubbles 2
// Card Game
// Castle Ramble
// Chronotron
// Circle Chain
// Circle Path
// Circle Race
// Circular endless runner
// Cirplosion
// CLOCKS - The Game
// Color Hit
// Color Jump
// ColorFill
// Columns
// Concentration
// Crossy Road
// Crush the Castle
// Cube Jump
// CubesOut
// Dash N Blast
// Dashy Panda
// Deflection
// Diamond Digger Saga
// Don't touch the spikes
// Dots
// Down The Mountain
// Drag and Match
// Draw Game
// Drop Wizard
// DROP'd
// Dudeski
// Dungeon Raid
// Educational Game
// Elasticity
// Endless Runner
// Erase Box
// Eskiv
// Farm Heroes Saga
// Filler
// Flappy Bird
// Fling
// Flipping Legend
// Floaty Light
// Fuse Ballz
// GearTaker
// Gem Sweeper
// Globe
// Goat Rider
// Gold Miner
// Grindstone
// GuessNext
// Helicopter
// Hero Emblems
// Hero Slide
// Hexagonal Tiles
// HookPod
// Hop Hop Hop Underwater
// Horizontal Endless Runner
// Hundreds
// Hungry Hero
// Hurry it's Christmas
// InkTd
// Iromeku
// Jet Set Willy
// Jigsaw Game
// Knife Hit
// Knightfall
// Legends of Runeterra
// Lep's World
// Line Rider
// Lumines
// Magick
// MagOrMin
// Mass Attack
// Math Game
// Maze
// Meeblings
// Memdot
// Metro Siberia Underground
// Mike Dangers
// Mikey Hooks
// Nano War
// Nodes
// o:anquan
// One Button Game
// One Tap RPG
// Ononmin
// Pacco
// Perfect Square!
// Perfectionism
// Phyballs
// Pixel Purge
// PixelField
// Planet Revenge
// Plants Vs Zombies
// Platform
// Platform game
// Plus+Plus
// Pocket Snap
// Poker
// Pool
// Pop the Lock
// Pop to Save
// Poux
// Pudi
// Pumpkin Story
// Puppet Bird
// Pyramids of Ra
// qomp
// Quick Switch
// Racing
// Radical
// Rebuild Chile
// Renju
// Rise Above
// Risky Road
// Roguelike
// Roly Poly
// Run Around
// Rush Hour
// SameGame
// SamePhysics
// Save the Totem
// Security
// Serious Scramblers
// Shrink it
// Sling
// Slingy
// Snowflakes
// Sokoban
// Space Checkers
// Space is Key
// Spellfall
// Spinny Gun
// Splitter
// Spring Ninja
// Sproing
// Stabilize!
// Stack
// Stairs
// Stick Hero
// String Avoider
// Stringy
// Sudoku
// Super Mario Bros
// Surfingers
// Survival Horror
// Talesworth Adventure
// Tetris
// The Impossible Line
// The Moops - Combos of Joy
// The Next Arrow
// Threes
// Tic Tac Toe
// Timberman
// Tiny Wings
// Tipsy Tower
// Toony
// Totem Destroyer
// Tower Defense
// Trick Shot
// Tunnelball
// Turn
// Turnellio
// TwinSpin
// vvvvvv
// Warp Shift
// Way of an Idea
// Whack a Creep
// Wheel of Fortune
// Where's my Water
// Wish Upon a Star
// Word Game
// Wordle
// Worms
// Yanga
// Yeah Bunny
// Zhed
// zNumbers