Как адаптировать android под устройство

Адаптирование мобильного приложения для Android TV или почему я люблю Google

Мы, разработчики мобильного приложения, используем в своей основе геолокацию для определения местоположения членов семьи и поэтому никогда даже не задумывались о том, чтобы разместить наше приложение в Android TV.

Когда мы увидели, что Google проводит конкурс и любезно предоставляет разработчикам для тестирования Android TV приставки на время разработки, то на ближайшем совещании обдумали насколько нам это интересно. И в процессе обсуждения открылись очень интересные особенности Android TV, ради которых стоило адаптировать наше приложение. Но обо всем по порядку…

Подготовка

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

Изучение особенностей работы

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

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

Портретная ориентация
Если ваше приложение использует исключительно портретную ориентацию, то сначала требуется подготовить приложение под landscape и сказать в файле манифеста, что мы не требуем портретную ориентацию.

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

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

Первый запуск на TV

Итак, приступим к адаптации. Первым делом нужно создать активити, которую будет запускать Android TV при запуске. Я создал специальную загрузочную (Splash) активити для запуска Android TV. В итоге у меня получилось две загрузочных активити — одна для телефонов, другая для TV. После этого уже запускалась основная активити приложения и все работало одинаково и для мобильного телефона, и для TV. В Манифесте это выглядело вот так:

Чтобы Андроид ТВ понимал какую активити ему запустить при старте используется специальные параметры интент фильтра:

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

Фокусировка

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

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

А вот пример простого файла селектора focusable.xml, в котором мы окрашиваем фон элемента в темно-синий цвет.

Если у вас уже есть свой селектор, то просто добавьте элемент android:state_focused и присвойте необходимый вам стиль.
Получится должно что-то похожее на это (GIF Анимация):

На этом всё. Теперь, когда мы наведем на какой-то элемент и нажимаем центральную кнопку на D-pad сработает событие Click, как если бы вы просто нажали на эту область экрана.

Программное управление фокусировкой

Если у вас есть элементы интерфейса, которые вы создаете динамически из кода программы, добавить фокусировку можно используя следующий код:

Первая строчка добавляет возможность фокусировки. Вторая устанавливает наш селектор. Программно установить фокусировку на конкретном элементе можно выполнив команду:

Дополнительные возможности

По умолчанию порядок перехода между элементами идет сверху вниз и слева на право. Если вам нужно изменить порядок и, например, после первого нажатия на D-pad стрелки вниз вы хотите сразу перепрыгнуть вниз экрана, то воспользуйтесь специальными атрибутами:

Также в Android есть специальная тема, которая называется Theme.Leanback из библиотеки поддержки Leanback и доступна с API 17. Но я посчитал её излишней, так как дизайн нашего приложения отлично вписался в телевизор.

Как вы видите адаптировать приложение для TV не составляет большого труда и именно за это я люблю Google. Всё слишком просто, никаких танцев с бубном. В Android TV разработчики уже заботливо включили максимально возможную совместимость вашего приложения. вам нужно совсем немного, чтобы все это заработало. Конечно в рамках одной статьи нельзя описать все мелочи грамотной адаптации, но реализуя описанные выше шаги ваше приложение уже будет достойно представлено в Android TV и завоюет новых диванных фанатов!

Источник

Адаптация таблиц под мобильные устройства

Для кого эта статья

Почти все дизайнеры сталкиваются с проблемой адаптации при отрисовке таблиц в интерфейсах — а именно адаптации таблиц под мобильные устройства. Справедливо также будет отметить полезность статьи для Frontend разработчиков, которые эти самые таблицы верстают.

Проблема

Проблема у дизайнера начинается в тот момент, когда таблица из десктопной версии интерфейса адаптируется под мобильные устройства. Как мы знаем — таблицы могут иметь много столбцов, что влечёт за собой вылеты таблицы за ширину экрана на мобильном устройстве.

Данная проблема встречается повсеместно, и усугубить ее может пожалуй лишь контент ячейки, который не переносится построчно, увеличивая тем самым ширину колонки.

Подопытный набор данных

Для того чтобы понимать лучше суть проблемы, мы придумаем себе таблицу, и будем ее адаптировать.

Результатом станет довольно обширная таблица, которая имеет все нужные нам виды колонок. Признаться даже список сверху вызывает у меня вопросы — справа тратится слишком много места.

С фиксированной шириной и переносом строк

С шириной по контенту

Анонс следующей статьи “О списках в интерфейсах и как их применять по феншую”.

Десктоп

В окне браузера наша таблица будет довольно комфортно себя чувствовать. Мы можем контролировать отображение контента так, как нам нужно. Даже если таблица перестанет помещаться по ширине — то мы всегда можем либо скрыть пару колонок с самым низким приоритетом, либо в крайнем случае сделать скроллинг по горизонтали.

Варианты адаптации

Проблема — наша таблица по ширине не влезает в телефон.

Делать растровую картинку с таблицей и вставлять ее в макет

Возможные верные решения по убыванию

Каждую строку таблицы делать блоком

Первый вариант адаптации — сделать каждую строку таблицу отдельным блоком, и вывести ее на экране телефона.

Проблема с данным методом: Удлиняется вертикальный скроллинг, данные повторяются. (частично решается добавлением фильтров для поиска)

Возьмём за пример таблицу, которая отображена сверху. В таком виде она не поместится по ширине в мобильный экран. Для решения этой проблемы мы будем каждую строку таблицы преобразовывать в блок.

Таким образом мы добьемся максимальной читаемости таблицы, без потери данных. Мы видим в строке все столбцы, при необходимости можем сделать функцию поиска, а так же добавить сортировки для блоков. Проблемой при данном подходе является длинный скроллинг.

Второй вариант — горизонтальный скроллинг таблицы

Для реализации данного подхода — нам нужно взять таблицу из десктопной версии сайта, и поместить ее в мобильный экран, а весь тот контент, который не помещается по ширине вынести за границы экрана, добавив при этом горизонтальную прокрутку к скрытым столбцам.

Субъективно для меня — это наименее подходящий вариант отображения таблиц в мобильных устройствах — так, как он скрывает большую часть контента за пределами окна устройства — что нарушает визуальную целостность данных контекста каждой строки таблицы (мы не видим строку целиком).

Вывод

Теперь адаптация таблиц не должна нам казаться невыполнимой задачей, мы научились делать так, чтобы таблицы были удобоваримыми не только на десктопной версии сайтов, но и в мобильной (что применимо и к мобильным приложениям).

Если вы заметили ошибки, или вам есть что дополнить — дайте мне знать, я обязательно это сделаю. Спасибо за внимание!

Источник

Портирование Android-приложения под Android TV и Nexus Player

Как уже писалось в блоге Intel, в конце прошлого года Google выпустила новый Nexus Player на базе процессора Intel Atom. В этой статье вы найдете советы, как адаптировать свое Android-приложение для данного устройства в частности и Android TV вообще.

Если вы хотите, чтобы ваше приложение было доступным для устройств Android TV и виделось их загрузчиком, необходимо, во-первых, предоставить activity, которая будет обрабатывать intent action.Main для категории LEANBACK_LAUNCHER, во-вторых, добавить ресурсы, специфичные для ТВ и, в-третьих, указать, что вашему приложению не требуется сенсорный дисплей. Как видите, все очень просто. Теперь давайте посмотрим, как это выглядит на практике.

Как и классический загрузчик Android, загрузчик Android TV будет искать activity вашего приложения, которую вы задали в android.intent.action.MAIN intent. Но в случае загрузчика Android TV, категория intent будет не android.intent.category.LAUNCHER, а android.intent.category.LEANBACK_LAUNCHER.

Вот как вы должны объявить Main Activity вашего приложения для Android TV:

Замечание. В Leanback Launcher имеется две категории приложений: Apps and Games. Если вы хотите появиться в списке игр, вам нужно присвоить свойству isGame значение true:

Сверху конкретного intent фильтра, также находящегося в этой activity, имеется свойство android:banner, определяющее баннер, которое будет отображаться в лончере. Баннер представляет собой рисунок размером 320х180 пикселей, который должен быть помещен в папку ресурсов drawable-xhdpi. Рисунок должен включать имя вашего приложения (если нужно, локализованное) и не иметь альфа-канала:

Все это позволит приложению быть видимым и запускаемым в Android TV лончере.

Однако для того, чтобы приложение было совместимым с Android TV, вам также нужно обеспечить и задекларировать поддержку Android-устройств без сенсорного дисплея. Первым делом необходимо внедрить поддержку навигации с помощью кнопки-крестовины (D-pad). Стандартные элементы интерфейса Android сами по себе ее поддерживают, но на практике требуется некоторая настройка.
Укажите элемент, на который будет направлен изначальный фокус в вашем представлении с помощью requestFocus() в Java или в XML разметке:

Свойство android:focusable должно иметь значение true, если вы хотите, чтобы запрос фокуса работал при увеличении представления.

Иногда необходимо настроить навигацию внутри представления. Вы можете выбрать, как фокус будет перемещаться от одного элемента к другому с использованием свойства nextFocus:

Раз навигация с помощью D-pad работает в вашем приложении, вы можете объявить ее в AndroidManifest.xml. Просто объявите, что сенсорные возможности нам не требуются:

Выполнения указанных выше требований достаточно, чтобы ваше приложение устанавливалось и запускалось на Android TV. Поговорим теперь немного об удобстве его использования.

Оформление приложения не должно содержать строки меню и панели инструментов (даже если строка меню работает с D-pad, это определенно плохая идея с точки зрения юзабилити). Две темы оформления, которые вы можете использовать – это Theme.Leanback из библиотеки поддержки Leanback и android:Theme.NoTitleBar. Эти темы не включают в себя каемки по краям экрана, поэтому их следует добавить дополнительно. Заметьте, что в элементы Leanback поля уже включены.

Библиотека поддержки Leanback доступна начиная с API Level 17 и содержит готовые к использованию элементы и темы для приложений. Если вы планируете поддерживать более ранние версии API, можно хранить все ссылки на темы и элементы Leanback в специфической для TV части приложения и далее воспользоваться функцией слияния манифестов gradle, чтобы избежать апгрейда minSdkVersion:

Посмотрите пример использования библиотеки поддержки Leanback. Я также советую прочитать хорошую вводную статью авторства Sebastiano Gottardo (musixMatch).

Игры Android TV могут быть значительно улучшены путем добавления режима мультиплеера и поддержки геймпада. В манифесте можно указать, что игра поддерживает геймпад:

Установите эту опцию в качестве требуемой (required) только в том случае, если геймпад обязателен для вашего приложения; помните, что в комплект устройств типа Nexus Player он не входит. В качестве контроллеров могут быть использованы дополнительные Android-устройства, но на сегодняшний момент они могут выступать только в качестве D-pad.

Изучить разнообразные игровые контроллеры можно на этом тренинге.

Блок рекомендаций занимает половину места в лончере, чтобы появиться там, пошлите уведомление с установленной категорией «recommendation», как описано в официальном тренинге.
С помощью системы фильтрации по функционалу в Play Store вы можете ограничить распространение вашего приложения только Android TV совместимыми устройствами, установив нужное значение android.software.leanback:

При значении required, ваше приложение будет доступно только Android TV совместимым устройствам.
Вы можете распространять ваше приложение как отдельную позицию в Play Store, также есть вариант загрузить его как TV-версию существующего приложения, воспользовавшись функцией множественные APK в Play Store. Во втором случае TV-версия должна иметь другой versionCode, нежели классическое приложение.

Nexus Player представляет собой полностью 64-битную платформу и ядро системы, конечно, также 64-битное, однако юзерспейс остается на сегодняшний день х86 32-битным. На устройстве можно спокойно запустить скомпилированный под ARM код, но лучше использовать х86 бинарники. Об аспектах совместимости для х86 устройств можно прочитать в моей предыдущей статье.

Краткое изложение принципов программирования под Android TV вы найдете на сайте Android-разработчиков.
Если в любом activity вашего приложения указано android:screenOrientation=”portrait”, свойству android.hardware.screen.portrait будет принудительно присвоено значение true. Вам необходимо принудительно переопределить его в false, чтобы ваше приложение было доступным для устройств Android TV:

То же самое необходимо для:

• android.hardware.location.android.permission.ACCESS_FINE_LOCATION
• android.hardware.camera.autofocus и android.hardware.camera, имплицированного android.permission.CAMERA
• android.hardware.microphone, имплицированного android.permission.RECORD_AUDIO
• android.hardware.telephony, имплицированного различными телефонными разрешениями

Когда ваше приложение готово и АРК загружено на страничку разработчика Play Store, вам необходимо добавить скриншот и баннер:

И поставить нужную галочку, чтобы запросить распространение приложения на Android TV:

Оно будет проверено перед тем, как появится в Play Store, доступном для Android TV.

Источник