GETTING YOUR SMART TV APP TO SAMSUNG TV (OS X).

I’ve been studying Samsung Smart TV development environment for a week now. Yesterday I finally got my first app deployed to my TV, but I gotta say, Samsung didn’t make it too easy and the developer community ain’t the most lively one. That’s why I decided to tell you in my first tutorial, how to do the trick.

Before hopping in to the action, I’d like to remind you, that there are instructions for deploying the app on Samsung developer page. However, it seems those instructions are a bit outdated. I also assume you’ve already fooled around a bit with Samsung Smart TV SDK 5.0. If not, you can find the software from here and come back when you’re familiar with it.

This tutorial is for Samsung SDK 5.0 and Mac OS X (Mountain Lion).

1. INSTALLING THE SERVER

Apache server in Mountain Lion is not as easily accessible as before, but it’s still running in the system. Follow these instructions and you will get it started and configured.

2. ECLIPSE SERVER SETTINGS

In Eclipse, open Preferences > Samsung SmartTV > Server

If you don’t know what is the IP of your computer, go to System Preferences > Network > Advanced > TCP/IP. Then look for “IPv4 Address”.

As you can see, I’ve set my root folder to /Library/WebServer/Documents/samsung. You can name the folder whatever you like.

When the app package is exported from SDK it is supposed to create .zip file in the server folder. That’s not what happens with me, but it doesn’t matter because the file can be copied in to the right place. However, it’s probably a good idea to set the server IP and folder properly.

3. EXPORT

This differs quite a bit from what Samsung says in the developer guide.

Right click the app you want to export at Project Explorer window and select Export. If Project Explorer is not visible, open it from Window > Show View.

Open Samsung Smart TV Apps from folder tree and select “Package file”.

Click “Next”.

Select region, toggle “Update the packaged files on the server” (for me it doesn’t), set title and description and click “Finish”. Now you’ll get a popup window which tells where the package is located. For me, they go to /Users/jaakkokarhu/Package/, so probably it’s something similar for you too.

4. COPY/PASTE THE .ZIP FILE TO RIGHT SERVER FOLDER

Now find the created package (.zip) file in your Finder. Copy it to the server folder you set before (step 2, remember?). If the folder doesn’t exist, create one.

5. CREATE WIDGETLIST.XML

Okay, this step is very important, so pay attention. You need a file named “widgetlist.xml” to tell Samsung Smart TV, where the zipped app is located in your server. Open notepad or TextWrangler or whatever you prefer and copy this code to it:

<?xml version="1.0" encoding="UTF-8"?>
<rsp stat="ok">
  <list>
    <widget id="AwesomeApp">
      <title>AwesomeApp</title>
      <compression size="10" type="zip"/>
      <description>This app is very, very awesome!</description>
      <download>http://10.0.1.3/samsung/AwesomeApp_0.1_Europe_20140120.zip</download>
    </widget>
  </list>
</rsp>

Now let’s take a look of the file a bit.

Compression size is the package size. I just put there number 10 to demonstrate how little it matters.

<compression size="10" type="zip"/>

Fill description as you like.

<description>This app is very, very awesome!</description>

Be careful with following line, because that tells the TV where to look for the package file. When Smart TV connects to your computer, it at first looks for the widgetlist.xmland then download tag tells where the file actually is. If this is not set properly, the installation won’t begin.

<download>http://10.0.1.3/samsung/AwesomeApp_0.1_Europe_20140120.zip</download>

Replace “samsung” with whatever is the folder you like to keep your apps and “AwesomeApp_0.1_Europe_20140120.zip” with the name of the .zip file.

Save the file with name “widgetlist.xml” to the server root. So, ie. my root folder is/Library/WebServer/Documents.

6. CREATE DEVELOPER ACCOUNT TO SAMSUNG SMART TV

Actually you don’t need to create the account because it’s built in the system. Grab your remote and open Smart TV. Select login and create new account with the name developer. In my model I don’t need to set password but there can be differences.

Oh, and make sure that your TV is connected to same router as your computer.

7. UPLOAD YOUR APP

Fingers crossed now…

When you’re logged in as a developer, select Tools > Developer. Set your IP (yes, the one you’ve found earlier) and select “User Application Synchronization”.

The installation should begin shortly and after it you should see a thumbnail of your app with text “User”.

"Hello world" in Smart Tv - Creating an Android TV Sample Project

Creating an Android TV Sample Project

In the final part of this tutorial, we'll take a first-hand look at some TV-ready code by creating and testing a basic Android TV project.

Before you can develop anything for the Android TV platform, make sure you've updated your SDK to Android 5.0 (API 21) or higher, and your SDK tools to version 24.0.0 or higher.

Once you're up to date, it's time to create your app:

1. Launch Android Studio.
2. Select Start a new Android Studio Project.
3. Give your project a name and a domain. Click Next.
4. Select TV, and then deselect all the other checkboxes. Although you can create Android TV projects that have a smartphone, tablet and/or Android Wear module, for the sake of simplicity we'll be creating a single-module project. Click Next.

5. Select Android TV Activity and click Next.

6. Stick to the default settings and click Finish.

Android Studio will then create your project.

4. Breaking Down the Manifest

Now you've created your sample project, we'll take a line-by-line look at the Android Manifest, as this file contains lots of TV-specific code.

Note that although the majority of this code is generated automatically when you create an Android TV project, I've made some minor additions and adjustments that are all clearly marked in the text.

1 2 3 4 5

<?xml version="1.0" encoding="utf-8"?> http://schemas.android.com/apk/res/android"    package="com.example.jessica.tvdemo" > <uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.RECORD_AUDIO" />

As already mentioned, the android.permission.RECORD_AUDIO permission implies that your app requires android.hardware.microphone. So this line of code effectively prevents your app from being installed on devices that don't have access to a microphone. If your app can function without a microphone, you should make the following addition:

1 2 3

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

Adding the above code means that users can install your app on devices that don't have access to microphone hardware.

1 2 3

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

While touchscreen support is found on many Android-powered devices, this isn't the case with Android TV. Your Android TV app must declare that it doesn't requiretouchscreen support.

1 2	<uses-feature       android:name="android.software.leanback"

The above snippet declares that your app uses the Leanback interface we discussed earlier.

1	android:required="true" />

If you want your app to run on non-TV devices where Leanback isn't supported, you'll need to change the above line to android:required="false".

1 2 3 4 5

<application        android:allowBackup="true"        android:icon="@mipmap/ic_launcher"        android:label="@string/app_name"        android:theme="@style/Theme.Leanback"

The above addition applies the Leanback theme to your project.

1	android:banner="@drawable/banner" >

App banners represent your app on the Android TV homescreen and are how the user launches your app. Your app banner must be a 320px x 180px xhdpi image and should include text.

If you want to use the same banner across all your activities, you should add theandroid:banner attribute to your manifest's <application> tag as I've done here. If you want to provide a different banner for each activity, you'll need to add anandroid:banner attribute to all of your application's <activity> tags instead.

1 2 3 4 5 6 7 8 9

<activity          android:name=".MainActivity"          android:icon="@drawable/app_icon_your_company"          android:label="@string/app_name"          android:logo="@drawable/app_icon_your_company"          android:screenOrientation="landscape" >       <intent-filter>              <action android:name="android.intent.action.MAIN" />              <category android:name="android.intent.category.LEANBACK_LAUNCHER" />

This snippet declares a launcher activity for TV.

1 2 3 4 5 6 7

</intent-filter>        </activity>        <activity android:name=".DetailsActivity" />        <activity android:name=".PlaybackOverlayActivity" />      <activity android:name=".BrowseErrorActivity" />    </application> </manifest>

Testing the Sample App

The next step is testing how your app functions from the user perspective. Even if you have access to a physical Android TV, you'll want to test your project across multiple devices, so you should always create at least one Android TV AVD.

To create your AVD:

1. Launch the AVD Manager, either by clicking the AVD Manager button in the toolbar or by selecting Tools > Android > AVD Manager.
2. Click Create New Virtual Device.
3. Select the TV category.
4. Choose one of the Android TV devices listed and click Next.
5. Select your system image and click Next.
6. Give your AVD a name and click Finish.

To test your sample project, select Run > Run app, followed by your TV AVD. Once the AVD has finished loading, you'll see the Android TV user interface with your app's banner in the bottom-left corner.

To launch your app, click the banner image. After a short delay, your app will appear in the AVD window.