Вот есть у нас приложение. Серьезное, большое, взрослое. Обходимся практически без стилей, но без беспорядка; используем себе виджеты из AppCompat, но уже затянули тему из Material Design Components (MDC) и подумываем о полноценной миграции.
И вдруг появляется задача на полный redesign. А у нового дизайна со старым общая разве что бизнес логика. Компоненты новые, шрифты нестандартные, цвета (за исключением фирменных) другие. В общем приходит осознание того, что пришло время переезжать на MDC.
Но не все так просто:
- Redesign предполагается по частям. То есть в приложении будут как экраны со старым, так и с новым внешним видом
- Цвета и типографика в новом дизайне отличны от того, что рекомендует MDC. Хотя принципы именования схожи
- Presentation слой разбит на отдельные ui модули. Причем некоторые из них используются другим приложением. Учитывая, что обходимся без стилей, для стилизации в таких модулях некоторые свойства спрятаны за атрибуты: цвета, текстовые стили, строки и многое другое
- Существует налаженная схема на предмет того, как работать с вышеупомянутыми ui модулями. В частности с атрибутами. А значит и с цветами, текстовыми стилями, строками и прочим. А при MDC хотелось бы использовать стили
Далее делюсь опытом того, как справиться с этими трудностями: как при переезде на MDC частично стилизовать Android приложение с независимыми ui модулями, абстрагироваться от дизайн системы и при этом ничего не сломать. Бонусом — советы и разбор сложностей, с которыми я столкнулся.
How To Change Chat Wallpaper In Telegram 2021|| Telegram App Security
Про ui модули
Есть ui модули. Они не зависят от проекта. Лежат отдельно от него.
Внутри каждого из проектов есть корневой модуль. Назовем его core-presentation. Он зависит от тех ui модулей, которые используются в данном приложении. Подключаются модули как обычная gradle зависимость.
Возникает вопрос. А как стилизовать-то? Если коротко, то с помощью атрибутов. Внутри каждого такого ui модуля определены используемые атрибуты, которые должны быть реализованы темой приложения:
Используются они примерно так:
Ближе к «теме» (стилю)
У меня появился план. Простой, но от того не менее гениальный. План базировался на нескольких принципах, а я, в свою очередь, его придерживался.
-
Так как MDC тема уже затянута, ничто не мешает использовать виджеты из MDC. Никакого AppCompat’a. И хоть под капотом framework компоненты переопределяются в аналоги из MDC, явное использование последних компонент все же нагляднее:
- Получаем абстрактные стили. Проекты независимы в области палитр, текстовых стилей и любых других составляющих внешнего вида
- UI модули не содержат никаких ресурсов
- Пересечение именований компонентов старого и нового ui исключено вследствие префикса-постфикса
Вроде не сложно: используй только стили; определяй нужные цвета в этих стилях. Но так ли это все просто на практике?
How To Disable Filtering On Telegram (New Method!)
Да. Но ровно до тех пор, пока не нарвешься на TextView . А как быть здесь? Ровно также. Использовать стили. Проблема лишь в том, что таких стилей будет до бесконечности много. Почти под каждый TextView нужно заводить отдельный стиль. В защиту такого решения отмечу, что из статьи про MDC можно косвенно сделать вывод, что тривиальный текст — тоже отдельный стиль:
While TextAppearance does support android:textColor, MDC tends to separate concerns by specifying this separately in the main widget styles
Если приглядеться, то можно заметить, что для всех названий атрибутов стилей в примере используется постфикс v2 (например, primaryButtonStyleV2 ), а для текстовых стилей — префикс ( v2TextStyleGiftItemName ). Сделано это для того, чтобы упростить навигацию при автоподстановке IDE.
По итогу, после таких переделок файл с атрибутами в новом ui модуле выглядит примерно так:
Почти все зашито в стили. Исключение составляют строки и иконки. Они имеют отношение к контенту, а не к внешнему виду.
Вообще, строки можно было бы зашить в соответствующие стили для TextView , но бывают случаи, когда строка нужна в коде (и пробросить через стиль ее попросту не получится).
Что касается иконок, то, в целом, под них тоже можно завести отдельные стили. Все на стилях.
А как быть с android:background , когда просто нужна какая-нибудь подложка? Цвет или форма там какая-нибудь. Об этом чуть позже. Спойлер — через стили.
Рассмотрим несколько стилей:
?v2TextAppearanceCaption1 ?v2ColorOnPrimary . . ?ic16CreditV2
Ответ: для гибкости. Такой подход дает преимущества в случае появления новых тем. Примеры:
- Темная (или любая другая, отличная от оригинальной по палитре) тема. В новой теме просто меняем значения атрибутов цветов на нужные
- «Тематические» темы (Halloween, Christmas, Easter и так далее). Переопределяем иконки и шрифты под саму тематику. Разобраться с тем, как и когда использовать такие темы, — дело третье
Подводные камни, сложности, советы
MaterialThemeOverlay
Если вдруг вам потребуется определить android:theme в дефолтном стиле кастомной View, то ничего у вас не выйдет. Просто не сработает. Хотя для любого другого, не дефолтного стиля все отлично работает. Подробнее проблема разобрана в этой статье.
Но отчаиваться не стоит, ведь и для данного проблемного случая есть решение. Меняем android:theme на materialThemeOverlay , оборачиваем контекст через MaterialThemeOverlay.wrap(. ) и все работает.
Сама кастомная View:
И это не работает. А не работает это из-за того, что манипуляции в init <> блоке осуществляются с исходным context , а не с обернутым. Отсюда вырисовывается очень простое правило: никогда не использовать исходный context при инициализации. Для того, чтобы в данном примере materialThemeOverlay заработал, необходимо context заменить на getContext() . Просто оставлю кусок MaterialButton здесь:
(А если так сделать в Kotlin, то Lint будет ругаться на name shadowing. Грусть)
Light status bar
У нас на проекте для подложки под status bar используется кастомная StatusBarView . В идеале, такой штуки быть не должно (потому что edge-to-edge), но пока что она присутствует. Довольствуемся тем, что есть.
Так вот, в старом дизайне status bar повсеместно translucent. Что это значит: есть какой-то полупрозрачный темный overlay (причем везде разный), а цвет контента — белый или около того. В новом же дизайне status bar может быть светлым (light): со светлым background и темным контентом.
Собственно задача заключается в том, чтобы уметь поддерживать light status bar наравне с translucent через кастомную StatusBarView . Нюансы:
- Для поддержки light status bar необходима 23я версия SDK (или выше). Для всех версий, что ниже, можно отображать дефолтный translucent status bar (идея взята отсюда)
- Translucent status bar достигается с помощью выставления флага FLAG_TRANSLUCENT_STATUS ; overlay без полупрозрачности (для light) — с помощью FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS
- Чтобы менять цвет контента, понадобятся следующие методы:
fun setLightStatusBar() < if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) < var flags = window.decorView.systemUiVisibility flags = flags or View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR window.decorView.systemUiVisibility = flags >> fun clearLightStatusBar() < if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) < var flags = window.decorView.systemUiVisibility flags = flags and View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR.inv() window.decorView.systemUiVisibility = flags >>
- Без FLAG_TRANSLUCENT_STATUS кастомная StatusBarView не залазит под status bar. Исправляется это примерно так:
- Чтобы окончательно использовать кастомную StatusBarView для light status bar, нужно задать прозрачный statusBarColor
- Возвращаясь к стилям, всю эту логику с light / translucent status bar можно зашить в кастомный атрибут StatusBarView
Color State List (CSL)
В MDC статье про цвета для полупрозрачных оттенков какого-либо цвета советуется использовать CSL. Дело в том, что с 23й версии SDK для CSL доступны атрибуты. И свойство android:alpha . А если соединить, то получится любой цвет с любой прозрачностью.
Выглядит это примерно так:
color/v2_on_background_20.xml
#000000 #33000000
Хоть это все и здорово, но есть свои заморочки:
- Как уже писал ранее, для поддержки необходима 23я версия SDK и выше. Но вообще, для MDC виджетов все работает нормально и с 21й версии. Если же так получилось, что нужно дернуть такой CSL через атрибут (например, в кастомной View для кастомного атрибута), то на помощь приходит метод MaterialResources.getColorStateList(). Вот только это является частью Restricted API, но кого это останавливало
- CSL не работает в качестве android:background и схожих. Но ничто не мешает сделать так:
Подложка и android:background
Сразу к делу. Никаких через xml. Вот v2_rect.xml из примера выше — это единственный допустимый случай. MDC отказался от этого. И всем следует.
А если нужна подложка, то почему бы не посмотреть в сторону ShapeableImageView (ну или на крайний случай MaterialCardView )? Здесь и способов кастомизации больше. Как пример:
Стили компонент ViewGroup
Представим, что такая конструкция встречается почти на каждом новом экране. Учтем, что здесь определено три атрибута стиля.
Вдруг появляется нестандартный экран. На нем все три стиля отличаются. Вопрос: сколько новых атрибутов потребуется? Правильный ответ — один, для AppBarLayout (назовем новый атрибут secondaryAppBarStyleV2 ). Для всего остального есть ThemeOverlay:
Пример конкретный, но применять такое можно к любой ViewGroup. В частности, к кастомной View. Если есть уверенность в том, что какая-то View (и ее стиль) будет использоваться исключительно в контексте определенной ViewGroup, то можно не имплементировать атрибут ее стиля на уровне темы приложения, а сделать это на уровне ThemeOverlay ViewGroup.
MaterialToolbar и Toolbar из AppCompat
Под капотом многие framework виджеты при inflate преобразуются в соответствующие из MDC. Чтобы ничего случайно не сломать виджетами из MDC, при затягивании темы (то есть до начала сего рассказа) все framework виджеты были заменены аналогами из AppCompat. Примерно так:
И это нормально-таки себе работало. Таким образом получили следующее: в новых скринах используется MaterialToolbar , в старых — Toolbar из AppCompat.
Здесь возник один интересный баг. Для стиля MaterialToolbar был определен атрибут navigationIconTint . Этот атрибут не поддерживается Toolbar из AppCompat. Тем не менее, при переходе с нового скрина на старый, navigationIcon в Toolbar каким-то образом красился с помощью navigationIconTint . Помог лишь полный переезд на MaterialToolbar .
Стили и размеры
Вот есть такая штука в Material Design Guidelines, как Dense text fields. По сути это TextInputLayout с высотой в 40dp. Есть даже стили под него ( Widget.MaterialComponents.TextInputLayout.*.Dense ). Ограничений (в Guidelines) на предмет наличия иконок (в начале или в конце) нет; более того, даже есть пример с иконкой.
Берем TextInputLayout , выставляем ему Dense стиль, добавляем start icon и. это ничем не отличается от обычного, не Dense стиля. Копаем в сторону того, а как же тогда получить высоту в 40dp. Надеемся на лучшее, в нужных стилях выкручиваем в 0 вертикальные padding . Не помогает.
Причина оказалась в design_text_input_start_icon.xml , где для start icon установлены минимальные размеры в 48dp. Тем не менее, если выставить для TextInputLayout 40dp в android:layout_height , все выглядит как нужно.
Не будем забывать про стили. Dense — это про стиль. Следовательно, android:layout_height должен в этом случае лежать внутри стиля. А это плохо тем, что в каждом месте использования TextInputLayout с таким стилем придется выпилить android:layout_height из разметки (ответ на вопрос, почему так):
Возможно это просто баг и в дальнейшем такого workaround получится избежать.
Как по мне, получилось неплохое решение. Оно имеет свои недостатки, но преимущества в виде абстракции от дизайн системы в ui модулях и возможности частичной стилизации куда весомей.
Используйте средства стилизации по максимуму. Это не сложно. Спасибо за прочтение.
- стилизация
- material design
- appcompat
- best practice
Источник: habr.com
Выбираем приложение для модернизации статус-бара на android-устройствах: Super Status Bar, Omega StatusBar и Material Status Bar (страница 3)
Внешний вид OC Android меняется очень неспешно, при этом количество параметров по настройке оформления оставляет желать лучшего. Благо операционная система является открытой и для нее существует множество приложений, в числе которых есть и решения, предназначенные для изменения внешнего вида.
5 ноября 2016, суббота 12:00
Денис Мельник для раздела Лаборатория
Страницы материала
Material Status Bar
RTX 4060 Ti сразу со скидкой 15 000р
-30% на 50″ TV 4K Ultra HD = дешевле 30 тр
RTX 4060 Ti Gigabyte дешевле всех других
-20000р на Ryzen 3950X — пора брать
Упала на порядок цена 65″ TV Samsung 4K
Material Status Bar
Знакомство
реклама
Как вам OC Android 5.0 и другие версии системы с Material Design, особенно новые модификации? Полагаю, что нравятся. Но если на вашем смартфоне все еще установлена старая операционная система или вам просто хочется разнообразия, обратите внимание на утилиту под названием Material Status Bar
Особенности приложения Material Status Bar:
- Четыре тематических стиля: Lollipop, градиент, темный градиент и однообразный;
- Различные темы для панели с уведомлениями;
- Поддержка планшетов;
- Цветовые алгоритмы заполнения «статус-бара» для каждого приложения;
- Уведомления – прочитайте свои уведомления прямо с панели уведомлений;
- Ползунок яркости в панели с уведомлениями и функция «авто яркость»;
- Выбор цвета панели;
- Автоматическое скрытие «статус-бара» в полноэкранном режиме;
- Автоматический запуск приложения при его включении;
- Заряд батареи в процентах;
- 12- и 24-часовой формат времени;
- Множество различных опций.
Начало работы
Первый запуск Material Status Bar, уже по традиции с подобными приложениями, начинается с предоставления приложению соответствующих прав на доступ к системе. Весь процесс полностью автоматизирован, так что в одиночку бродить по настройкам устройства вам не придется.
рекомендации
-8000р на 4060 Ti Gigabyte Gaming в Ситилинке
Слив i9 13900 в Ситилинке — смотри
10 видов RTX 4060 Ti уже в продаже
Много 4080 от 100тр — цены в рублях не растут
-220000р на 8K Samsung 75″ — смотри цену
Много 4070 в Ситилинке
15 видов 4090 в Ситилинке — цены идут вниз
Ищем PHP-программиста для апгрейда конфы
-17000р на 4070 Ti Gigabyte в Ситилинке
Компьютеры от 10 тр в Ситилинке
16 видов 4070 Ti в Ситилинке — от 80 тр
3060 дешевле 30тр цена — как при курсе 68
-7% на ASUS 3050 = 28 тр
После всех манипуляций мы попадаем на главный экран, где представлены основные манипуляции и всевозможные параметры. Первое, что мы можем выбрать – это тему. Их четыре: Lollipop, градиент, темный градиент и однообразный. Тут уж, как говорится, на вкус и цвет товарищей нет.
Каждый оформления «статус-бара» вариант интересен по-своему. Для наглядного сравнения стилей я приготовил вот такое изображения.
Если приложение некорректно распознает цвет в том или ином приложении, то его можно настроить вручную. Для правильного побора цвета нам предложат создать скриншот и загрузить его в приложение для получения кода выбранного цвета. Затем его нужно будет указывать в настройках соответствующего приложения.
реклама
Кто над этим будет заморачиваться, скажите мне? Я человек педантичный, но у меня нет желания настолько подробно и кропотливо настраивать все свои приложения, пусть даже четверть или меньше. Реально бесполезная функция, на создание которой разработчик угробил лишнее время.
Цветная строка с уведомлениями может кому-то не понравиться, поэтому ее можно обесцветить — сделать прозрачной. Это визуально увеличит экран, да и выглядит очень футуристично. Однако для функционирования данной опции обои должны быть статичными, то есть не прокручиваемыми. Стоит помнить о капризности системы и о том, что не со всеми оболочками эта функция уживается.
Что касается реального вида «статус-бара» и шторки с уведомлениями в приложении Material Status Bar, то они более чем красивы, качественны и подобраны со вкусом. Приложение смотрится весьма органично и вливается хоть в стандартный интерфейс OC Android, хоть в Miui, хоть в TouchWiz.
Кстати, именно на TouchWiz и походит шторка с уведомлениями. К сожалению, ее элементы – переключатели не настраиваются ни коим образом.
Поддерживаются темы, есть несколько стилей оформления, но все это доступно исключительно в расширенной версии приложения Material Status Bar.
Еще данная утилита будет отображать уведомления на рабочем экране по аналогии с Android 6.0.
Настройки
В настройках программы нам представлена пара тривиальных опций: включение анимации строки состояния, отображение заряда в процентах, а времени в 12-и часовом формате, расположение часов по центру экрана и автоматический запуск Material Status Bar при старте устройства.
реклама
Однако не все опции представлены в разделе с настройками, еще есть такие подразделы, как «Панель уведомлений» и «Уведомление вверху». Данные разделы предлагают нам настроить раскрывающуюся шторку и выбрать стиль и положение уведомлений. Почему бы не соотнести все вышеуказанное в одно меню? Ну да ладно, главное, что такие параметры есть.
Для того, чтобы каждый раз не перенастраивать приложение мы можем создать резервную копию данных приложения.
Тестирование
| Версия приложения | 6.1 |
| Размер дистрибутива | 5 Мбайт |
| Размер приложения в установленном виде | 21 Мбайт |
| Потребление ОЗУ | 120-140 Мбайт |
С использованием Material Status Bar на достаточно мощном гаджете от Xiaomi у меня не возникало ни малейших проблем – все отображалось плавно и мгновенно, строка «статус-бар» скрывался в альбомном режиме и так далее. А вот на более слабом устройстве с 1 Гбайтом ОЗУ и процессором MediaTek MT6580 были некоторые сложности: программа подвисала, правда очень редко, и пару раз за время тестирования вылетала. Скорее всего программе попросту не хватало оперативной памяти, ведь она ее потребляет сотнями. Наверное, это и будет одним из главных недостатков данного приложения.
Адекватно поддерживаются планшеты с OC Android 4.1 и новее, с верхней панелью уведомлений (программа не работает на старых планшетах, где панель с уведомлениями представлена нижней строкой).
Выводы
Material Status Bar – красивое, качественное и понятное приложение для преображения «статус-бара» и панели с уведомлениями на android-устройствах. Программа содержит большое количество опций по настройке, некоторое количество тем и прекрасно работает на современных устройствах.
Бесплатная версия программы отличается небольшими ограничениями по части функциональности, но вполне пригодна для использования. Но если вы хотите получить полный комплект функций или поощрить разработчика за его работу, то $1.49 это не так уж и много, тем более что разработчик реально старался.
Источник: overclockers.ru
Android Полностью прозрачная строка состояния?
Я просмотрел документацию, но нашел только это: Link. Что используется для того, чтобы сделать строку прозрачной? Я пытаюсь сделать строку состояния полностью прозрачной (как показано на изображении ниже) и сделать ее обратно совместимой с APK
Что я смог сделать:
142 2015-03-27T22:15:21+00:00 19
Редактировал вопрос 12-го сентября 2018 в 7:08
Android 4.4 APIs | Android Developers
API Level: KITKAT) is a new release for the Android platform that offers new features for users and app developers. This document provides an introduction to the most notable new APIs. As an app developer, you should download the Android targetSdkVersion…
developer.android.com
Востребованные видео
3 года назад
2 года назад
6 лет назад
2 года назад
6 лет назад
4 года назад
3 года назад
2 года назад
2 года назад
3 года назад
2 года назад
3 года назад
Решение / Ответ
Daniel Wilson
27-го марта 2015 в 10:38
2015-03-27T22:38:01+00:00
Дополнительно
Все, что вам нужно сделать, это установить эти свойства в вашей теме:
true true
Для вашей деятельности / макета контейнера, в котором вы хотите иметь прозрачную строку состояния, необходимо установить это свойство:
android_fitsSystemWindows=»true»
Обычно это невозможно точно выполнить на pre-kitkat, похоже, что вы можете это сделать но какой-то странный код делает это так.
EDIT: Я бы рекомендовал эту либу: https://github.com/jgilfelt/SystemBarTint для управления цветом строки состояния до леденца.
После долгих раздумий я понял, что решение для полного отключения полупрозрачности или любого цвета в строке состояния и навигационной панели для lollipop заключается в установке этого флага в окне:
// In Activity’s onCreate() for instance if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT)
Никаких других тем не требуется, получается что-то вроде этого:
GitHub — jgilfelt/SystemBarTint: [DEPRECATED] Apply background tinting to the Android system UI when using KitKat translucent modes
[DEPRECATED] Apply background tinting to the Android system UI when using KitKat translucent modes — GitHub — jgilfelt/SystemBarTint: [DEPRECATED] Apply background tinting to the Android system UI when using KitKat translucent modes
Комментарии к ответу ( 20 )
Abhijeet Farakate
Ответ на вопрос
15-го февраля 2018 в 10:26
2018-02-15T10:26:25+00:00
Дополнительно
Просто добавьте эту строку кода в ваш основной файл Java:
getWindow().setFlags( WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS, WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS );
Комментарии к ответу ( 2 )
David Rawson
Ответ на вопрос
26-го декабря 2017 в 10:33
2017-12-26T10:33:43+00:00
Дополнительно
Вы можете использовать внешние библиотеки StatusBarUtil:
Добавить до вашего уровня модуль построить.Gradle в`:
compile ‘com.jaeger.statusbarutil:library:1.4.0’
Затем вы можете использовать следующие утиль для действия, чтобы сделать статус бар прозрачным:
StatusBarUtil.setTransparent(Activity activity)
Комментарии к ответу ( 2 )
parsa dadras
Ответ на вопрос
22-го января 2019 в 12:28
2019-01-22T00:28:28+00:00
Дополнительно
Работает на Android KitKat и выше (для тех, кто хочет прозрачный статус бар и Дон’т манипулировать виджет navigationbar, потому что все эти ответы будет прозрачной виджет navigationbar тоже!)
Самый простой способ сделать это:
Поместите эти 3 строки кода в styles.xml (в19) -> если вы нет знаю, как это (в19), просто запишите их в дефолт styles.xml и затем использовать альт+введите, чтобы автоматически создать его:
А теперь иди в класс свой класс MainActivity и поставить этот метод из onCreate в классе:
public static void setWindowFlag(Activity activity, final int bits, boolean on) < Window win = activity.getWindow(); WindowManager.LayoutParams winParams = win.getAttributes(); if (on) < winParams.flags |= bits; >else < winParams.flags >win.setAttributes(winParams); >
Затем поместите этот код в метод onCreate метод деятельности:
if (Build.VERSION.SDK_INT >= 19 Build.VERSION.SDK_INT < 21) < setWindowFlag(this, WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS, true); >if (Build.VERSION.SDK_INT >= 19) < getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_STABLE | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN); >//make fully Android Transparent Status bar if (Build.VERSION.SDK_INT >= 21)
Редактировал ответ 22-го января 2019 в 4:00
Комментарии к ответу ( 1 )
Ahamadullah Saikat
Ответ на вопрос
10-го сентября 2018 в 7:19
2018-09-10T19:19:20+00:00
Дополнительно
Полностью прозрачный StatusBar и виджет navigationbar
Ahamadullah Saikat
Редактировал ответ 27-го июля 2019 в 12:38
Комментарии к ответу ( 0 )
Ответ на вопрос
28-го июня 2017 в 12:05
2017-06-28T00:05:45+00:00
Дополнительно
Используйте для Android_fitsSystemWindows=то»ложные»` в в верхней части макета
Комментарии к ответу ( 1 )
Decam Developer
Ответ на вопрос
24-го января 2018 в 4:00
2018-01-24T16:00:17+00:00
Дополнительно
Чтобы нарисовать свой макет в строке состояния:
true
Использовать CoordinatorLayout/DrawerLayout, который уже позаботиться параметра fitsSystemWindows или создать свой собственный макет, как это:
Источник: kzen.dev