初ビルドまで – Android TVアプリ開発入門1

androidtvapptutorial6

本記事は元記事の日本語訳です。

Android TV アプリ開発入門

Nexus Player, SONY BRAVIAと、Android TV(アンドロイドテレビ)が発売されてからすでに時間がたっているがまだまだAndroid TVアプリの開発に関する情報は少ない。そこでここでは、Android TVアプリを実際に自分で実装しながら学べる形式の開発チュートリアルを書いていければと思う。

本稿ではAndroid “TV”プラットフォームに特化した実装を主に紹介していく。特にUIの実装がメイン、なぜならUI はスマホとテレビではその基本思想が大きく異なるからだ。たとえばテレビはリモコンで気軽に操作するようにできているので、 ↑↓→← といった上下左右の方向キーだけで(タッチを使わずに)”気軽に”操作できるようなUIが要求される。

こういったユーザーが”気軽に”操作できるようにするための基礎プラットフォームとしてAndroid open source project(AOSP)からLeanback Support library (android.support.v17.leanback) が提供されている。ちなみにここでいうLeanback(リーンバック)とは、”後ろにもたれる”というような意味。ソファーにもたれながらでも、TVを簡単に操作できるようなUIが理想ですよーという事だろう。

このLeanback Support libraryを使ってアプリを開発することで、このようなUI思想に基づいたアプリが作れるというわけだ。ということで、本稿では主にこのLeanback libraryの使い方を紹介していく。

想定する読者層

  • Androidアプリは開発したことがあるが、Android TVアプリに関しては何も知らない
  • 初心者~中級者向け

使用するエディタ

Eclipseは2015年にサポートが終わっているので、 Android studio を使って開発を進めていく。Androidアプリ開発では今後標準となるIDEでとてもつかいやすいので、まだ使ったことのない方は、ここからAndroid Studioをダウンロードして設定しましょう!ちなみに、自分は英語版のAndroid Studioをそのまま使っているので日本語版の方は適宜読み替えて読み進めていただければと思います。

注:なお、本稿で説明するソースはAOSPで公開されている android TV サンプルソースコードが元ネタで、ただこのソースコードをもとに、より細かく説明しているだけです。

新しいAndroid TV アプリプロジェクトの作成

  1. Android studio起動

New project

 Application name: AndroidTVappTutorial

 Company Domain: corochann.com ( or you can use your own domain name )

android tv app tutorial

Target Android Devices

androidtvapptutorial2

Add an activity to TV

androidtvapptutorial3

“Add No Activity” 選択後、Finish

するとAndroid studio が自動でAndroidアプリ開発を進めるにあたって必要な最低限のソースコードを自動生成してくれる。

ここまでの手順が終わった状態のソースコードは githubで。

  1. Add activity

はじめにActivityを作成する。 “com.corochann.androidtvapptutorial”を右クリックして

New -> Activity -> Blank activity

“Launcher Activity”をチェック。

そして”MainActivity“という名前で、blank activityを作成する。 

すると、Android studioはJava class と layout/activity_main.xmlを自動生成してくれる(res/menu/menu_main.xmlも作成されるが、Android TVアプリでは使わないので無視)

* 注: Android Studio で、”Android TV activity” という項目も見つけることができる。これを選択すると一気に大量のファイルが自動生成される。Leanbackライブラリの各種機能がサンプル実装された状態でのファイルが生成されるので、参考ファイルとしては役立つんだけれど、一度に大量のファイルが生成されるので、どのファイルがどの機能とつながっているのかいまいちわかりづらい。
ということで、本稿ではこれらの機能を一つずつ実装していくことによって、理解を進めていきたい。

 

次に MainActivity の 実際のUI 表示部分を担当する MainFragmentを作る。

  1. Add fragment

パッケージネームを右クリック (例 com.corochann.androidtvapptutorial)

New -> Java Class -> Name: MainFragment

*  上の手順の代わりに、New -> Fragment -> Blank fragment Uncheck “Create layout XML?” を選択すると、これまた一気に不要なコードまで自動生成されてしまうので、今回は空のJava ClassからFragmentを作成していく。

まず、 activity_main.xml を以下のように変更して、MainActivityMainFragmentのみを表示するようにする。

* 以後、ソースのコピペをしたいときは、右上の “<>” アイコンをクリックするとできます。

 

次に MainFragment の修正

この MainFragment を BrowseFragment のサブクラスとする。BrowseFragment class はAndroid SDK Leanback libraryで提供されているクラスで、Android TV の基本・標準となるUIを構築するために使われる(すぐ後、次の章で実例が表示されます)。

(I) ビルド・実行

androidtvapptutorial5

BrowseFragment の構成要素である HeadersFragmentRowsFragment が確認できる。
HeaderFragment (ヘッダー) が右側、 RowsFragment (コンテンツ部分) が左側。このフラグメントの基本設定を行っていく。

まずは初めにBrowseFragmentのメインカラーとタイトルを設定しよう。

ここまでのソースコード: github

  1. setupUIElements() をMainFragment.javaに実装

MainFragment.javaにsetupUIElements()を実装する、このメソッドはアプリの基本UI情報を設定する。

ここでを設定しているのは

  • アプリタイトル もしくは アプリアイコン
  • ブランドカラー

色情報は colors.xml から参照される。このファイルを作成しよう。res/values を右クリックして、

New -> values Resource file
File name: colors.xml -> “OK”
と選択。できたファイルに以下のように記載する。

colors

Android studioを使っていると、実際の色が左側の部分に表示されるのでわかりやすい。

(II) ビルド・実行

右上にタイトルが表示され、ヘッダー部分の色がブランドカラーで指定した色になっていればOK。

androidtvapptutorial6

ちなみに、 setTitle() のかわりに setBadgeDrawable() を使うこともできる。こちらのメソッドを用いた時にはタイトルテキストの代わりにアイコンが表示される。また、両方のメソッドを読んだ場合にはアイコン表示が優先される。

AndroidTVsampleApp-2015-07-01-150913

setBadgeDrawable() メソッドを用いるとタイトルの代わりにロゴイメージを表示できる。

ここまでのソースコード: github.

  1. Android Manifest の修正

ここまでのソースコードでは、アプリのアイコンが Leanback Launcher (Android TV のホーム画面・ホームランチャーアプリ) に表示されていなかったと思う。
アプリのランチャー(起動用)アイコンをAndroid TVで表示するためには、 AndroidManifest.xml を以下のようにする。

また、 app_icon_your_compan.png は main/res/drawble/ フォルダの中に入れた。

(III) ビルド・実行

Leanback launcherにてアプリのランチャーアイコンを表示するには以下の宣言を行う必要がある。

またアイコン・ロゴはActivityタグ内で指定されている。

manifest_activity

Activity のランチャーアイコンがLeanback Launcherに表示される

アプリのアイコンを表示するには、アプリタグ内に以下を記載。

アプリアイコンはActivityのランチャーアイコンとは異なるので注意。アプリアイコンはAndroid TVの設定→アプリ画面で確認できる。

manifest_application

application icon will appear in your Downloaded apps list.

Android TV向けのAndroidManifestの設定に関しては Android developers pageも参照。

次章BrowseFragmentの構成 – Android TVアプリ開発入門2 では BrowseFragment, HeadersFragment, RowsFragment をより深く説明する。Adapter と Presenter を用いて実際にBrowseFragment内にアイテムの表示をしていく。

References

Sponsored Links

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です