фон для приложения android
Темы и стили в Android-приложениях
Каждому Android-разработчику так или иначе приходилось работать со стилями. Кто-то чувствует себя с ними уверенно, у кого-то есть только поверхностные знания, которые зачастую не позволяют самостоятельно решить поставленную задачу.
В преддверии выхода темной темы было решено освежить в памяти всю информацию, касающуюся тем и стилей в Android-приложениях.
О чем пойдет речь:
Начнем с основ
По своей структуре темы и стили имеют общее строение:
Все достаточно просто. Но в чем же разница между темой и стилем?
Единственное отличие заключается в том, как мы их используем.
Тема — это набор параметров, которые применяются ко всему приложению, Activity или View-компоненту. Она содержит базовые цвета приложения, стили для отрисовки всех компонентов приложения и различные настройки.
Для того чтобы стиль стал настоящей темой, необходимо отнаследоваться (о наследовании мы поговорим чуть позже) от дефолтной реализации темы.
Стиль
Стиль — это набор параметров для стилизации одного View-компонента.
Атрибут
Атрибутом принято называть ключ стиля или темы. Это маленькие кирпичики из которых все строится:
Все эти ключи являются стандартными атрибутами.
Мы можем создавать свои атрибуты:
Атрибут myFavoriteColor будет указывать на цвет или ссылку на ресурс цвета.
В формате мы можем указать вполне стандартные значения:
По своей природе атрибут является интерфейсом. Его необходимо реализовать в теме:
Теперь мы можем на него ссылаться. Общая структура обращения выглядит так:
Ну и, наконец, давайте поменяем, например, цвет текста у поля:
Благодаря атрибутам мы можем добавлять какие-угодно абстракции, которые будут изменяться внутри темы.
Наследование тем и стилей
Как и в ООП, мы можем перенимать функционал существующей реализации. Сделать это можно двумя способами:
При явном наследовании мы указываем родителя с помощью ключевого слова parent :
При неявном наследовании мы используем dot-notation для указания родителя:
Никакой разницы в работе этих подходов нет.
Очень часто мы можем встретить подобные стили:
Может показаться, что стиль создан путем двойного наследования. На самом деле это не так. Множественное наследование запрещено. В таком определении явное наследование всегда выигрывает.
ThemeOverlay
ThemeOverlay — это специальные «легковесные» темы, которые позволяют переопределить атрибуты основной темы для View-компонента.
За примером далеко ходить не будем, а возьмем кейс из нашего приложения. Дизайнеры решили, что нам нужно сделать стандартное поле для ввода логина, которое будет иметь отличный от основного стиля цвет.
С основной темой поле ввода выглядит так:
Выглядит отлично, но дизайнеры настаивают на том, чтобы поле было в коричневом стиле.
Окей, как мы можем решить такую задачу?
Да, мы можем переопределить стиль и вручную поменять основные цвета вьюшки, но для этого нужно будет писать много кода, да и есть шанс, что мы про что-нибудь забудем.
Написать свою вьюшку по гайдлайнам и с кастомными параметрами?
Хороший вариант, так мы сможем удовлетворить любые хотелки дизайнеров и заодно прокачать скилл, но все это трудозатратно и может привести к нежелательным багам.
Переопределить основной цвет в теме?
Мы выяснили, что для нужного нам вида достаточно поменять colorPrimary в теме. Рабочий вариант, но так мы затронем внешний вид остальных компонентов, а нам это не нужно.
Правильное решение — это использовать ThemeOverlay.
Создаем ThemeOverlay и переопределяем основной цвет темы:
Далее указываем его с помощью специального тега android:theme в наш TextInputLayout :
Все работает так, как нам и нужно.
Конечно же возникает вопрос — как это работает под капотом?
Аналогичным образом мы можем самостоятельно переопределить любой параметр темы в приложении.
Последовательность применения тем и стилей ко View-компоненту
Главный приоритет имеет файл разметки. Если в нем определен параметр, то далее все аналогичные параметры будут игнорироваться.
Следующий приоритет имеет стиль View:
Далее используются предопределенные стили для компонента:
Если параметры не были найдены, то используются атрибуты темы:
В общем-то это все, что нужно знать для того чтобы начать работу с темами. Теперь кратко посмотрим на обновленную дизайн-библиотеку Material Components.
Да прибудет с нами Material Components
Material Сomponents была представлена на Google I/O 2018 и является заменой Design Support Library.
Библиотека дает нам возможность использовать обновленные компоненты из Material Design 2.0. Кроме того, в ней появилось множество интересных настроек по кастомизации. Все это позволяет писать яркие и уникальные приложения.
Вот некоторые примеры приложений в новом стиле: Owl, Reply, Crane.
Перейдем к практике
Для создания темы нужно отнаследоваться от базовой темы:
Все они очень похожи на AppCompat темы, но имеют дополнительные атрибуты и настройки.
Подробнее с новыми атрибутами можно познакомиться на material.io.
Если по каким-то причинам вы сейчас не можете переключиться на новую тему, то вам подойдут Bridge темы. Они наследуются от AppCompat тем и имеют все новые атрибуты Material Components. Нужно всего лишь добавить постфикс Bridge и использовать все возможности без опасений:
Важно понимать, что когда вы переопределяете стиль в теме, он применится ко всем View этого типа в приложении (Activity).
Если же вы хотите применить стиль только к одной конкретной View, то нужно использовать тег style в файле с разметкой:
Одно из нововведений, которое меня действительно впечатлило — это ShapeAppearance. Оно позволяет изменять форму компонентов прямо в теме!
Каждый View-компонент относится к определенной группе:
shapeAppearanceSmallComponent
shapeAppearanceMediumComponent
shapeAppearanceLargeComponent
Как мы можем понять из названия, в группах вьюшки разных размеров.
Проверим на практике:
Получили такой результат:
Выглядит интересно. Будет ли это работать в реальной жизни? Время покажет.
Как и для стилей, мы можем применить ShapeAppearance только для одного View-компонента.
Что там по темной теме?
Совсем скоро состоится релиз Android Q, а вместе с ним к нам придет и официальная темная тема.
Пожалуй, одна из самых интересных и эффектных возможностей новой версии Android — это автоматическое применение темной темы для всего приложения одной строчкой кода.
Звучит здорово, давайте пробовать. Предлагаю взять всеми любимый гитлаб клиент от terrakok.
Разрешаем перекрашивать приложение (по умолчанию запрещено):
Атрибут android:forceDarkAllowed доступен с API 29 (Android Q).
Запускаем, смотрим что получилось:
Согласитесь, что для одной строчки кода выглядит очень круто.
Конечно, есть проблемы — BottomNavigationBar сливается с фоном, лоадер остался белым, выделение кода страдает и, вроде бы, все, по крайне мере мне больше ничего серьезного в глаза не бросилось.
Уверен, что потратив не так много времени, можно решить основные проблемы. Например, отключив автоматический темный режим для отдельных вьюшек (да, так тоже можно — android:forceDarkAllowed доступен для View в файле-разметке).
Следует помнить, что данный режим доступен только для светлых тем, если вы используете темную, то принудительная темная тема работать не будет.
Рекомендации по работе можно почитать в документации и на material.io.
А если мы хотим все делать самостоятельно?
Как бы не было просто использовать принудительную темную тему, этот режим лишен гибкости. Фактически, все работает по заранее определенным правилам, которые могут не устраивать нас и, что более важно, заказчика. Думаю, что такое решение можно рассматривать как временное, до тех пор пока мы не сделаем свою реализацию темной темы.
В темах DayNight уже используется такая реализация, нам достаточно отнаследоваться от них.
Давайте попробуем написать свою:
Нам теперь на каждую версию API делать тему со всеми параметрами? Нет, конечно! Мы сделаем базовую тему, где будут определены базовые атрибуты, доступные для всех версий API и отнаследуемся от нее в нужной версии API:
При созданий собственных тем и стилей будет здорово, если вы укажите префикс, говорящий о том что это за стиль и для чего он определен. Такое именование позволит очень просто структурировать и расширять стили.
10. Использовать TextAppearance
Хорошим тоном будет расширить основные стили для текста и везде их использовать.
Много полезной информации можно найти на сайте Material Design: Typography, Typography Theming.
Заключение
В заключение хочется сказать, что стилизация приложения — это обязанность не только разработчиков, но и дизайнеров. Только благодаря тесному взаимодействию мы сможем получить по-настоящему хороший и красивый продукт. Дизайнеры должны иметь представления о платформе и возможностях Material Components. Ведь именно на их плечи ложится ответственность по поддержке визуальной составляющей приложения. Дизайнерам доступен специальный плагин для Sketch — Material Theme Editor. В нем очень просто выбирать цвета для приложения и строить экраны на основе стандартных компонентов. Если ваши дизайнеры еще не знают о нем, то обязательно расскажите им.
Начать изучать Material Components можно с репозитория на GitHub — Modular and customizable Material Design UI components for Android. В нем собрано очень много информации по стандартным стилям и их возможностям. Кроме того, там есть приложение — sample, чтобы все сразу попробовать на практике.
Стилизация Android-приложений и дизайн-система: как это сделать и подружить одно с другим
В какой-то момент любое крупное приложение разрастается так, что сложно везде поддерживать однотипный дизайн и динамично реагировать на любые изменения и тенденции в дизайне и UX-требованиях.
Поэтому решили внедрить в наше приложение дизайн-систему и добавить поддержку нескольких тем оформления.
Изучив различные способы, выработали свой подход к решению такой задачи. Хотелось сделать так, чтобы дизайн-систему и поддержку стилей можно было повторно использовать в других своих проектах. В соответствии с этой идеей разрабатывались компоненты и темы.
Компоненты дизайн-системы
Дизайн-система и её компоненты предназначены для унификации дизайна и стилевого единства во всем приложении.
Компонентами дизайн-системы в нашем случае будем называть custom view с возможностью адаптации к нескольким стилям приложения. Компоненты могут применяться в любом месте приложения (кнопки, элементы списка, заголовки и т.д.).
Проектирование, отладка и доработка компонентов дизайн-системы
Заказчиками компонентов дизайн-системы являются дизайнеры. С ними на первом этапе согласовываем надобность элемента (оценка переиспользуемости) и его функциональность.
После согласования должно быть понятно, какие опции нужно вынести в атрибуты custom view (цвет текста, текст, иконочку, цвет тинта иконочки и т.д.), а какие скрыть от изменений извне (это позволяет уберечь элемент от неправильного использования разработчиками).
Далее дизайнеры отрисовывают компонент в своих средах и отдают на разработку.
При реализации компонента нужно добавить поддержку тем (светлая или темная тема и т.д.) О том, как компонент поддерживает несколько тем, я расскажу ниже.
Лучшие методики
Способы внедрения темы в приложение
Мне известно два способа поддержки стилей в Android:
Программный способ
Перекрашивать можно как перед отображением экрана (например, в onStart() у Activity ), так и при работе с ним.
Недостатки
Достоинства
Не требует пересоздания Activity (это важно! Нет морганий при смене темы).
Я внедрил этот подход в одном известном всем продукте (см. скриншоты). Работает довольно быстро при простой однотипной вёрстке(в данном случае она была простая).
Стандартный механизм стилей в Android
Стиль — локальная стилизация экрана или view, затрагивающая только отдельный экран или view. Часто такую стилизацию называют «ThemeOverlay», или «легковесная» тема, которая позволяет переопределить атрибуты основной темы).
Тема — глобальная стилизация экранов приложения, затрагивающая подмену стилей, цветов и т.д. у всего, что мы видим на экранах приложения.
Темой можно считать множество стилизаций, которые можно переключать.
Примеры
В теме могут содержаться как стили конкретных view элементов, так и конкретные цвета.
Здесь объявлен стиль для конкретной view:
Стили поддерживают явное и неявное наследование:
Множественного наследования темы не поддерживают. Вероятно, из-за конфликтов одноименных атрибутов.
Стилизация компонентов дизайн системы. Архитектура компонентов. Поддержка нескольких тем
Стандартный конструктор view
Рассмотрим стандартный конструктор view на примере H1Component (задаёт крупный текст в шапке экранов):
defStyleAttr — стиль view по умолчанию.
context — контекст view, при помощи которого она создана.
ВАЖНО: чтобы view успешно переключала тему, необходимо чтобы она была создана при помощи контекста, унаследованного от android.view.ContextThemeWrapper (то есть контекст activity подходит, а applicationContext — не подходит (применится тема, которая подтянется из стиля, указанного в Manifest экрана).
Интеграция стиля в компоненты дизайн системы и его связь с темой
Для поддержки темы компонентами дизайн-системы мы определяем в компонентах defStyleAttr и переключаем его в соответствии с темой, в которой он определен.
Реализация темы в приложении
Компоненты дизайн системы системы будут тянуть этот стиль в таком ключе:
Тут определены стили каждой темы для этого элемента:
Применяем тему через стандартный механизм Android.
При создании Activity указываем нужную тему. Тогда MyBestText подтянет нужный стиль и окрасит свой текст в белый или черный в зависимости от темы (см. выше описание темы MyBestText ).
ВАЖНО: начиная с Android 5.0 допускается отовсюду динамически разрешать android:background=»?attr/primary_background» (селекторы, shape, vector drawables и т.д.) В Android 4.4 есть ограничение на селекторы, при попытке динамически разрешить итоговый цвет из селекторов система упадёт.
При всех достоинствах такой реализации компоненты дизайн-системы не могут в preview Android Studio полноценно работать со стилизованными темами (к элементам не будут применяться стили).
Пока тема официально не использована нашими экранами, а только подключается программно (то есть стили наших activity не подгружают явным образом тему из Manifest ), мы не можем комфортно работать с элементами, поддерживающими темы в preview (их даже не будет в списке).
Тестирование компонентов дизайн-системы
Для тестирования и анализа степени покрытия приложения дизайнеры предложили разработать отладочную панель с настройками стилей компонентов, цветов и т.д.
Программно изменять атрибут темы без отсылок к объявленным стилям, к сожалению, нельзя. По крайней мере, я не нашёл способа.
Если знаете, как подсунуть свой цвет в атрибут темы (не объявленный в ресурсах как style ), то напишите мне. Тогда мы сможем прямо из коробки манипулировать цветами с бэка на уровне стилизации всего приложения!
Делаем рабочее preview компонентов дизайн-системы в Android Studio
Темы экранов приложения должны наследоваться от темы дизайн-системы.
При некорректно установленной теме экрана компоненты дизайн-системы тоже не будут отображаться корректно (не применятся стили и цвета):
При установке темы, унаследованной от темы дизайн-системы, мы получим вот что:
Видно, как разрешились все атрибуты темы и правильно подтянулись стили компонента.
Проверка поведения компонентов в другой теме в Preview без пересборки приложения
Чтобы проверить отображение в другой теме достаточно переключить тему в Preview light/dark.
Переключение тем в приложении
Переключение тем в приложении может быть завязано на системное переключение dark-mode. В таком случае темы должны быть определены в директориях values и values-night.
Список из 10 лучших приложений для обоев Android
W allpapers придают уникальный вид домашнему экрану нашего смартфона. Мы используем свой телефон по сто раз в день, и обои – это первое, на что мы обращаем внимание. Вместо того, чтобы искать изображения в Интернете и загружать их одно за другим, вы можете использовать приложения, специально предназначенные для этой цели.
Многие приложения для обоев для Android не только помогают вам находить обои, но также могут определять правильный размер обоев, необходимых для вашего устройства, и даже могут ежедневно обновлять ваш экран новыми обоями. Здесь мы составили список лучших бесплатных приложений для обоев для Android, которые могут улучшить внешний вид вашего устройства.
Примечание. Этот список не в порядке предпочтения. Читателям рекомендуется выбрать любое приложение из этого списка, которое они сочтут лучшим.
Список лучших приложений для обоев для Android (2021)
1. Walli – 4K, HD обои и фоны
У Walli есть уникальная и классная коллекция лучших обоев для Android. Команда Walli выбирает лучших художников со всего мира на основе их работ. Художники-графики также получают вознаграждение, поскольку Уолли делится процентной долей от их доходов с художниками, которые участвуют в проекте.
Домашний интерфейс приложения разделен на четыре раздела: категории, недавние, популярные и популярные. В этом разделе представлены обои, рекомендованные командой Walli.
Более того, существует множество категорий, которые вы можете просматривать часами, чтобы найти нужные обои. Каждая категория также подразделяется на недавние и популярные разделы. Также есть возможность подписаться, чтобы приложение оставалось синхронизированным на нескольких устройствах.
2. Обои от Google
Это приложение для обоев для Android от Google LLC. Он имеет обширную коллекцию обоев из Google+, Google Earth и других источников. Вы можете установить отдельные обои для домашнего экрана и экрана блокировки из самого приложения.
Все классные обои для телефона разделены на различные категории, такие как пейзажи, морские пейзажи, городские пейзажи, геометрические фигуры и т. Д. Кроме того, есть функция «ежедневных обоев», которая может показывать вам новые обои каждый день из выбранной категории. Приложение можно использовать бесплатно.
3. Resplash
Resplash не только рифмуется с Unsplash.com, но и опирается на него. Unsplash предлагает бесплатные красивые и интересные изображения, а Resplash распространяет их в мире Android. В приложении для Android имеется более 800 000 HD-обоев, но они не случайны – все обои разделены на отдельные коллекции, такие как «Desktop and Tech» или «Good Doggos of Unsplash» или «Sienna and Cyan» и другие.
Еще одна интересная особенность этого бесплатного приложения для обоев для Android – потрясающий пользовательский интерфейс. Интерфейс позволяет пользователям легко перемещаться по разным обоям. Более того, вы можете изменить макет в настройках приложения.
В приложении также есть темная тема AMOLED, которая делает интерфейс еще красивее. Помимо этого, есть опция «Автообои», позволяющая обновить домашний экран новыми обоями в соответствии с нашими предпочтениями.
4. Музеи Живые Обои
Muzei – это приложение с живыми обоями, которое каждый день приносит новые произведения искусства на ваш домашний экран. Он может автоматически переключаться между вашими любимыми изображениями каждые несколько часов. Обои могут уходить на задний план, размывая и затемняя изображения, чтобы ваши значки оставались в центре внимания.
Вы также можете выбирать изображения из своей галереи и других приложений. Это полностью бесплатный и открытый исходный код. Это позволяет разработчикам переносить в приложение контент из всех источников. Он также поддерживает Android Wear.
5. Тапет
Tapet – это уникальное приложение для обоев, которое освежит внешний вид вашего устройства Android и поможет вам найти лучшие обои для Android. Он не загружает обои из Интернета, а генерирует их на вашем устройстве с помощью алгоритмов.
Вы также можете настроить приложение для установки новых обоев ежечасно или ежедневно. Созданные обои идеально впишутся в экран вашего смартфона. Кроме того, есть поддержка Музея, история примененных и понравившихся обоев и т. Д.
6. Фоны HD (Обои)
Backgrounds HD – одно из лучших бесплатных приложений для обоев для Android, которое скачали более 100 миллионов раз. Он охватывает обширную коллекцию обоев более чем 30 различных категорий. Перед установкой обоев вы можете обрезать, фильтровать и выбирать различные режимы обоев. Он также может устанавливать обои из приложения.
Есть вкладка избранных, где вы можете хранить свои любимые изображения, и вкладка истории, чтобы просмотреть обои, которые вы применили ранее. Войдя в приложение, вы можете загрузить свою работу. Это бесплатно и поддерживается рекламой.
7. Фоны – Обои
Backdrops – еще одно впечатляющее приложение для обоев для Android, где вы можете получить сотни оригинальных обоев, созданных вручную командой Backdrops. Он имеет различные категории, такие как абстракция, земля, геометрические фигуры, узор, фотография, еда и т. Д.
Вы можете добавить изображения в избранное или даже загрузить их, если хотите. После входа в приложение вы сможете синхронизировать свою коллекцию избранного на нескольких устройствах.
Более того, каждый день приложение демонстрирует вновь созданное фоновое изображение под опцией «Стена дня». Профессиональная версия приложения не содержит рекламы и дает вам доступ к более оригинальным дизайнам. Он доступен как покупка в приложении.
8. Обои HD и 4K фоны
В этом приложении для обоев для Android есть множество классных обоев для телефонов с разрешением 1920 × 1080, QHD, 4K и UHD. Есть коллекция из 65 различных категорий. Кроме того, изображения дополнительно сортируются по дате, рейтингу и популярности. Приложение полностью настраивается и позволяет устанавливать автоматическую смену обоев через определенные промежутки времени. Вы также можете искать изображения по определенному цвету.
В приложении есть возможность выбрать лучшие обои дня или недели. Более того, вы можете скачать изображения и сохранить их на SD-карту. Если вы решите создать учетную запись, вы можете добавить фотографии в избранное и оценить их. Зарегистрированные пользователи также могут отправлять свои фотоработы. Это бесплатно и поддерживается рекламой. Вы можете наслаждаться опытом без рекламы с годовой подпиской.
9. Abstruct
Abstruct – одно из лучших бесплатных приложений для обоев для Android, разработанное Хампусом Олссоном. Для тех, кто не знает, это тот же парень, который создал эти психоделические обои для устройств OnePlus.
Abstruct – это не просто приложение для обоев для Android – это символ творчества, смесь абстрактного и сюрреалистического. Фактически, за Abstruct стоит идея «Abstract and Destruct», что сразу видно на этих крутых обоях.
Хватит экспрессионизма, давайте поговорим о приложении для обоев. Приложение для Android содержит более 300 обоев в разрешении 4K. Интерфейс включает обои из разных коллекций, отображаемые в виде стопки.
В то время как Abstruct пронизан смесью теплых и ярких цветов, в приложении для Android отсутствуют основные параметры настройки. Многие функции, такие как «Темная тема», «Авто обои», «Добавление в избранное», отсутствуют в этом приложении для обоев Android. Еще одна большая проблема заключается в том, что многие пакеты обоев заблокированы для профессиональной версии, которая стоит 1,99 доллара.
10. Hidey Hole [Обои для серии Galaxy S10]
Как указано в названии, приложение для обоев Hidey Hole Android разработано для серии S10. Однако так было до тех пор, пока Hole punch не стал полноценной тенденцией. Сегодня у нас на рынке много смартфонов с дыроколом.
Это приложение для Android предлагает обои, которые созданы, чтобы скрыть выемку. Некоторые обои также работают на смартфонах с точечной насечкой. Лучшая часть этого приложения для обоев – это то, что вы можете настроить яркость, контраст и насыщенность обоев. Помимо этого, приложение для Android также включает в себя множество категорий обоев.
Помог ли этот список вам найти лучшее приложение для обоев для Android? Делитесь своими отзывами в комментариях ниже.