Адаптування мобільного додатку для Android TV або чому я люблю Google

Ми, розробники мобільного додатку, використовуємо в своїй основі геолокацію для визначення місця розташування членів сім'ї і тому ніколи навіть не замислювалися про те, щоб розмістити наш додаток в Android TV.

Коли ми побачили, що Google проводить конкурс і люб'язно надає розробникам для тестування Android TV приставки на час розробки, то на найближчому нараді обдумали наскільки нам це цікаво. І в процесі обговорення відкрилися дуже цікаві особливості Android TV, заради яких варто було адаптувати наше додаток. Але про все по порядку…


Стаття автора Івана Короля, в рамках конкурсу <a href=«special.habrahabr.ru/google/lab>Device Lab від Google».

Підготовка
Перед тим як почати адаптацію ми трохи вивчили статистику використання цих приставок у наших друзів та знайомих. Більшість з них, як ви здогадалися, використовують її для перегляду TV контенту і грають в ігри. Наше додаток ні те, ні інше, але в його практичну користь ми твердо вірили і тому не відступили на цьому етапі.

Вивчення особливостей роботи
Перед початком розробки нас лякала адаптація, адже там немає звичного Touch Screen. Ми думали, що адаптація зажадає значних змін в коді, щоб додаток працювало. Але все звелося до наступних важливих моментів:

D-pad
Для управління більшістю TV приставок користувачі використовують пульт, а не тикати пальцем у телевізор як в мобільних телефонах. В цьому є основна відмінність в розробці. Якщо при розробці для мобільних пристроїв ми натискаємо на область екрану і у нас щось відбувається, то в Android TV всі дії ми виробляємо стрілками вгору, вниз, вліво, вправо: тим самим наводимо фокус на нас цікавить елемент і вже потім натискаємо кнопку вибору, викликаючи активну подія цього елемента.

Портретна орієнтація
Якщо ваш додаток використовує виключно портретну орієнтацію, то спочатку потрібно підготувати додаток під landscape і сказати у файлі маніфесту, що ми не вимагаємо портретну орієнтацію.

<!-- говоримо про те, що ми не вимагаємо портретну орієнтацію -->
<uses-feature
android:name="android.hardware.screen.portrait"
android:required="false" />

Вимоги
Для використання android TV, зробіть необов'язковими наступні вимоги до пристрою у вашому маніфест файлі:

<!-- говоримо про те що хочемо універсальне додаток а не тільки на TV -->
<uses-feature
android:name="android.software.leanback"
android:required="false" />

<!-- кажемо, що нам не обов'язковий --touchscreen>
<uses-feature android:name="android.hardware.touchscreen"
android:required="false" />
<!-- говоримо про те, що локація нам не обов'язкова -->
<uses-feature
android:name="android.permission.ACCESS_FINE_LOCATION"
android:required="false" />
<!-- говоримо про те, що функції телефону теж не обов'язкові -->
<uses-feature
android:name="android.hardware.telephony"
android:required="false" />
<!-- говоримо про те, що мікрофон нам не обов'язковий -->
<uses-feature
android:name="android.permission.RECORD_AUDIO"
android:required="false" />

Якщо у вас є інші дозволи, то свертись з офіційним гайдом по розробці для Android TV.

Перший запуск на TV
Отже, приступимо до адаптації. Насамперед потрібно створити актівіті, яку буде запускати Android TV при запуску. Я створив спеціальну завантажувальну (Splash) актівіті для запуску Android TV. В результаті у мене вийшло дві завантажувальних актівіті — одна для телефонів, інша для TV. Після цього вже запускалася основна актівіті додатки і все працювало однаково і для мобільного телефону, і для TV. У Маніфесті це виглядало ось так:

<!-- TV SPLASH -->
<activity
android:name=".Frontend.Activities.TVActivity"
android:theme="@style/FullscreenTheme"
android:noHistory="true">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LEANBACK_LAUNCHER" />
</intent-filter>
</activity>

<!-- Mobile SPLASH -->
<activity
android:name=".Frontend.Activities.SplashActivity"
android:configChanges="orientation|keyboardHidden|screenSize"
android:theme="@style/FullscreenTheme"
android:noHistory="true">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>

Щоб Андроїд ТБ розумів яку актівіті йому виконати використовується спеціальні параметри интент фільтра:

<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LEANBACK_LAUNCHER" />

Тепер запускаємо наш додаток на емуляторі TV і можемо побачити наш Завантажувальний (Splash) екран:



Фокусування
Після того як ми запустили наш додаток на TV потрібно забути про мишку і управляти вікном емулятора тільки стрілочками з клавіатури. Але при перших натисканнях у вас нічого не буде відбуватися, тому що Андроїду потрібно підказати, які елементи і в якому порядку ви фокусуєте натисканнями на стрілки (D-pad). Для початку давайте зробимо так, щоб їх можна було фокусувати. Для цього в розмітці вашої актівіті виберіть елемент і додайте йому атрибут focusable = true.

<LinearLayout
android:id="@+id/btn_new_family"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:focusable="true" />

Цей атрибут каже, що елемент може приймати фокус. Але якщо ви тестуєте її на звичайному Touch Screen телефоні, а не на TV, то вам потрібно встановити ще й атрибут android:focusableInTouchMode = „true“. Після того, як ви розставили атрибути focusable для ваших активних елементів, потрібно вказати «ефект», який відбуватиметься після наведення фокуса. Для цього присвоїмо атрибуту Background, наш спеціальний XML селектор:

<LinearLayout
android:id="@+id/btn_new_family"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:focusable="true"
android:background="@drawable/focusable " />

А ось приклад простого файлу селектора focusable.xml, в якому ми фарбуємо фон елемента в темно-синій колір.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true" >
<layer-list>
<item android:id="@+id/id">
<shape>
<solid android:color="#0277bd"/>
</shape>
</item>
</layer-list>
</item>
</selector>

Якщо у вас вже є свій селектор, то просто додайте елемент android:state_focused і встановіть потрібний вам стиль.
Вийде має щось схоже на це (GIF Анімація):



На цьому все. Тепер, коли ми наведемо на якийсь елемент і натискаємо центральну кнопку на D-pad спрацює подія Click, як якщо б ви просто натиснули на цю область екрану.

Програмне керування фокусуванням
Якщо у вас є елементи інтерфейсу, які ви створюєте динамічно з коду програми, додати фокусування можна використовуючи наступний код:

element.setFocusable(true);
element.setBackground(ContextCompat.getDrawable(this, R. drawable.focusable));

Перша строчка додає можливість фокусування. Друга встановлює наш селектор. Програмно встановити фокусування на конкретному елементі можна виконавши команду:

element.requestFocus();

Додаткові можливості
За замовчуванням порядок переходу між елементами йде зверху вниз і зліва на право. Якщо вам потрібно змінити порядок і, наприклад, після першого натискання на D-pad стрілки вниз ви хочете відразу стрибати вниз екрану, то скористайтеся спеціальними атрибутами:

<View
android:nextFocusDown="@id/bottom_view"
android:nextFocusUp="@id/top_view"
android:nextFocusLeft="@id/left_view"
android:nextFocusRight="@id/right_view"
/>

Також в Android є спеціальна тема, яка називається Theme.Leanback з бібліотеки підтримки Leanback і доступна з API 17. Але я порахував її зайвою, так як дизайн нашого додатка відмінно вписався в телевізор.

Як ви бачите адаптувати програму для TV не становить великої праці і саме за це я люблю Google. Все дуже просто, ніяких танців з бубном. В Android TV розробники вже дбайливо включили максимально можливу сумісність вашого додатка. вам потрібно зовсім небагато, щоб все це запрацювало. Звичайно, в рамках однієї статті неможливо описати всі дрібниці грамотної адаптації, але реалізуючи описані вище кроки ваш додаток вже буде гідно представлено в Android TV і завоює нових диванних фанатів!
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.