Дизайн пользовательского интерфейса вашего приложения не привязан к определенному типу устройств. Приложения для Android должны адаптироваться к различным типам устройств – от 4-дюймовых телефонов до 50-дюймовых телевизоров и устройств с ChromeOS с изменяемыми размерами окон.
Пользовательский интерфейс приложения отображается в окне, размер которого можно менять. Чтобы задать разные макеты для разных размеров окон, используйте квалификаторы ресурсов. Эти различия могут быть связаны с ограничениями размера экрана устройства или с тем, что пользователь использует многооконный режим для изменения размера окна.
Разработка адаптивного контента
Чтобы приложение было удобным для всех пользователей, каждый его экран должен максимально эффективно использовать доступное пространство.
Например, приложение, работающее в окне, которое занимает всю ширину экрана телефона, может скрывать подробности о контенте при переходе в многооконный режим и расширять пользовательский интерфейс, чтобы предоставлять больше контента, когда оно работает в окне, занимающем всю ширину экрана устройства с ChromeOS.
Помимо удовлетворения этих ожиданий пользователей, часто необходимо предоставлять больше контента на больших устройствах, чтобы не оставлять слишком много пробелов или непреднамеренно вводить неудобные взаимодействия. На рисунке ниже показаны некоторые проблемы, которые могут возникнуть при адаптации дизайна пользовательского интерфейса для большего окна:
Рисунок 1. Если контента недостаточно, в широких окнах появляются пустые области и слишком длинные строки.
Подробнее о том, как создавать адаптивную навигацию…
Предоставление персонализированного пользовательского опыта
Важно, чтобы пользователи получали уникальный опыт, а не просто видели увеличенный контент. Вы можете адаптировать пользовательские интерфейсы, чтобы обеспечить идеальное взаимодействие с пользователем для заданных размеров окон, даже используя совершенно разные макеты и виджеты.
На рисунке 2 BottomNavigationView используется для навигации верхнего уровня, когда для этого достаточно вертикального пространства. Когда размер окна уменьшается, как показано в правой части рисунка, навигация верхнего уровня реализуется с помощью DrawerLayout.
Рисунок 2. Нижняя панель навигации заменяется боковой панелью навигации, когда вертикальное пространство ограничено.
Вот ещё несколько примеров:
Toolbarможет показывать или скрывать пункты меню действий в зависимости от доступного пространства.RecyclerView.LayoutManagerможет изменить количество столбцов, чтобы использовать весь размер окна.- В пользовательских представлениях можно показывать больше информации, поскольку для этого есть больше места.
Это отличные способы обеспечить пользователям удобство работы с приложением, где бы они его ни запускали.
Дополнительные примеры шаблонов адаптивного дизайна и идеи для адаптивных макетов можно найти на сайте material.io.