TextAppearance или Style
#design #view
Android даёт нам несколько способов установить атрибуты стиля для
1) Применение нужных атрибутов напрямую в вёрстке:
Этот подход имеет несколько недостатков. Во-первых, мы не используем атрибуты для цвета текста, а вместо этого используем цвет напрямую. Во-вторых, мы лишаем себя возможности использовать те же самые настройки текста для других
2) Использование Style для
Здесь мы уже можем переиспользовать настройки, заданные в стиле. И вроде этот подход выглядит идеальным и правильным, однако существует ещё и третий способ кастомизации
На самом деле, это довольно интересное свойство. Оно позволяет нам установить ограниченный набор атрибутов, специфичных только для текста: цвет текста, его размер, шрифт, семейство цветов и т.д. При этом, в Android Material сущестуют 13 стандартных
Порядок установки атрибутов такой: сначала применяются атрибуты
Подробнее можно прочитать тут.
#design #view
Android даёт нам несколько способов установить атрибуты стиля для
TextView. Есть два самых часто используемых:1) Применение нужных атрибутов напрямую в вёрстке:
<TextView
android:textSize="16sp"
android:textColor="#fff"
Этот подход имеет несколько недостатков. Во-первых, мы не используем атрибуты для цвета текста, а вместо этого используем цвет напрямую. Во-вторых, мы лишаем себя возможности использовать те же самые настройки текста для других
TextView. Такой подход возможен в случае TextView, который редко используется в приложении.2) Использование Style для
TextView, например:
<TextView
style="@style/Widget.MyApp.TextView"
Здесь мы уже можем переиспользовать настройки, заданные в стиле. И вроде этот подход выглядит идеальным и правильным, однако существует ещё и третий способ кастомизации
TextView — это textAppearance.
<TextView
android:textAppearance="?textAppearanceBody1"На самом деле, это довольно интересное свойство. Оно позволяет нам установить ограниченный набор атрибутов, специфичных только для текста: цвет текста, его размер, шрифт, семейство цветов и т.д. При этом, в Android Material сущестуют 13 стандартных
textAppearance, которые мы можем дополнить и использовать у себя в проектах. Подробнее можно посмотреть тут.Порядок установки атрибутов такой: сначала применяются атрибуты
textAppearance, дальше атрибуты стиля, и потом те, что вы напрямую определили для View.Подробнее можно прочитать тут.
Jetpack Compose и традиционные View
#compose #jetpack #view
Многие разработчики, которые хотят переписать своё приложение на Jetpack Compose задумываются об обратной совместимости с текущими View. Ведь это непосильная задача, особенно для небольших команд.
К счастью, у нас есть возможность использовать традиционные View и Layout в Compose и наоборот.
Существует класс
Но есть также класс
Также есть
Подробнее можно почитать в этой и этой статьях.
Jetpack Compose очень крутой фреимворк, который станет будущим UI нативной Android-разработки. Если вы хотите нырнуть в Jetpack Compose больше, то есть канал @android_compose, где автор делится полезными статьями про этот инструмент.
Совсем скоро будет анонс нашего мероприятия, где каждый из нас сможет «пощупать» Compose на реальном проекте 😎
#compose #jetpack #view
Многие разработчики, которые хотят переписать своё приложение на Jetpack Compose задумываются об обратной совместимости с текущими View. Ведь это непосильная задача, особенно для небольших команд.
К счастью, у нас есть возможность использовать традиционные View и Layout в Compose и наоборот.
Существует класс
AndroidView, который легко позволяет использовать обычные View внутри Composable-функций. Это особенно полезно при использовании сложных компонентов, например MapView.Но есть также класс
ComposeView, который позволяет использовать Composable-классы внутри xml-файлов. После это необходимо задать контент в виде Composable фукнции. Также есть
AbstractComposeView, который даёт возможность сделать Composable view, где внутри можно прописать необходимую функциональность. Подробнее можно почитать в этой и этой статьях.
Jetpack Compose очень крутой фреимворк, который станет будущим UI нативной Android-разработки. Если вы хотите нырнуть в Jetpack Compose больше, то есть канал @android_compose, где автор делится полезными статьями про этот инструмент.
Совсем скоро будет анонс нашего мероприятия, где каждый из нас сможет «пощупать» Compose на реальном проекте 😎
Jetpack Compose и эквивалентные View
#compose #view #tips
При переходе на новую технологию или фреимворк, сложнее всего искать альтернативы уже знакомым конструкциям.
Для многих таким фреимворком сейчас может быть Jetpack Compose.
Тут @loskin поделился крутым ресурсом, который сопоставляет традиционные View с эквивалентами из Compose. Кроме этого, даст ещё и ссылку на пример из GitHub и на официальную документацию🔥.
А если перейти на начальную страницу, то можно найти подборку примеров приложений, использующих Jetpack Compose.
Даже если вы сейчас не пишите на Compose, то стоит сохранить сайт в закладки, так как в будущем он вам обязательно пригодится.
#compose #view #tips
При переходе на новую технологию или фреимворк, сложнее всего искать альтернативы уже знакомым конструкциям.
Для многих таким фреимворком сейчас может быть Jetpack Compose.
Тут @loskin поделился крутым ресурсом, который сопоставляет традиционные View с эквивалентами из Compose. Кроме этого, даст ещё и ссылку на пример из GitHub и на официальную документацию🔥.
А если перейти на начальную страницу, то можно найти подборку примеров приложений, использующих Jetpack Compose.
Даже если вы сейчас не пишите на Compose, то стоит сохранить сайт в закладки, так как в будущем он вам обязательно пригодится.
Custom View с нуля
#view #optimizations
При создании сложного UI компонента, у вас есть несколько способов для того, чтобы достичь результата: кастомизировать стандартный компонент, найти подходящую библиотеку или написать компонент с нуля.
Последний способ является наиболее сложным, однако добавляет одно весомое преимущество — возможность кастомизации и гибкости. Другие способы дают гораздо меньший процент кастомизации. 🤔
Сегодня, нашёл цикл статей, где автор создаёт кастомный график с нуля. При этом объясняя все фазы отрисовки: на какие методы стоит обратить внимание, какой жизненный цикл у
Статья будет полезна тем, кто не так часто пишет кастомные
Ссылки на статьи первую, вторую и третью части статьи.
Ну и конечно, с Рождеством, друзья! 😉✨
#view #optimizations
При создании сложного UI компонента, у вас есть несколько способов для того, чтобы достичь результата: кастомизировать стандартный компонент, найти подходящую библиотеку или написать компонент с нуля.
Последний способ является наиболее сложным, однако добавляет одно весомое преимущество — возможность кастомизации и гибкости. Другие способы дают гораздо меньший процент кастомизации. 🤔
Сегодня, нашёл цикл статей, где автор создаёт кастомный график с нуля. При этом объясняя все фазы отрисовки: на какие методы стоит обратить внимание, какой жизненный цикл у
View, как использовать Profiler для оптимизации отрисовки и многое другое. Статья будет полезна тем, кто не так часто пишет кастомные
View, но хочет сильнее погрузиться в эту интересую тему.Ссылки на статьи первую, вторую и третью части статьи.
Ну и конечно, с Рождеством, друзья! 😉✨
Keyboard Transitions с MotionLayout
#view
Сегодня мне попалась интересная статья, рассказывающая о некоторых фичах при работе с
В первой части автор рассматривает работу с анимацией клавиатуры, которая появилась в Android 11.
По сути, главная задача — это связать
И конечно, отдельно рассматривается работа и на более низких версиях Android (да, 11 версия сейчас далеко не у всех пользователей).
Ссылка на статью тут.
#view
Сегодня мне попалась интересная статья, рассказывающая о некоторых фичах при работе с
Instets. В первой части автор рассматривает работу с анимацией клавиатуры, которая появилась в Android 11.
По сути, главная задача — это связать
MotionLayout и Instets при помощи WindowInsetsAnimation.Callback. И конечно, отдельно рассматривается работа и на более низких версиях Android (да, 11 версия сейчас далеко не у всех пользователей).
Ссылка на статью тут.
Material Navigation Rail
#view #material
Возможно вы, как и я, пропустили выход свежей alpha-версии material-библиотеки. Туда включили фиксы, связанные с
По сути, он повторяет функциональность
Как по мне, это хороший компонент, который раньше можно было реализовать при помощи
Особенно компонент будет полезен приложениям, которые работают на планшетах. Чуть подробнее можно почитать о нём тут.
#view #material
Возможно вы, как и я, пропустили выход свежей alpha-версии material-библиотеки. Туда включили фиксы, связанные с
ProgressIndicator, а что нас больше интересует — так это новый компонент NavigationRail.По сути, он повторяет функциональность
BottomNavigationView, но располагается сбоку, а не снизу. Количество элементов при этом может быть от 3 до 7, а каждый компонент может включать в себя иконку, заголовок и значок-индикатор. Этот значок можно просто показать в виде точки, а можно добавить счётчик. Кроме этого, можно добавить header. Как по мне, это хороший компонент, который раньше можно было реализовать при помощи
RecyclerView. Особенно компонент будет полезен приложениям, которые работают на планшетах. Чуть подробнее можно почитать о нём тут.
Как измерить и оптимизировать размера Bitmap
#view #library
Если мы видим падение с
Есть хорошая статья о том, как понять, что что-то не так с изображениями.
1️⃣ Первым шагом должно быть определение размера bitmap. Сделать это можно при помощи profiler. Автор также советует использовать устройства с Android 7.1 и ниже, так как там можно увидеть preview изображения.
2️⃣ Далее стоит посмотреть на качество вашего изображения и на размер
3️⃣ Ну и напоследок стоит обратить внимание на профиль для загрузки изображений. По умолчанию может быть AGRB_8888, который использует 4 байта для каждого из пикселей. Но для большинства задач достаточно RGB_565, который использует в 2 раза меньше байтов. Да, качество изображений получается хуже, и нет поддержки прозрачности. Но для многих задач достаточно и такого качества.
#view #library
Если мы видим падение с
OutOfMemory, то чаще всего думаем про утечки, которые есть в приложении. Однако, подобная ошибка не всегда вызвана утечками памяти. Одной из причин может быть чрезмерное использование памяти нашим приложением, из-за неправильной загрузки изображений.Есть хорошая статья о том, как понять, что что-то не так с изображениями.
1️⃣ Первым шагом должно быть определение размера bitmap. Сделать это можно при помощи profiler. Автор также советует использовать устройства с Android 7.1 и ниже, так как там можно увидеть preview изображения.
2️⃣ Далее стоит посмотреть на качество вашего изображения и на размер
ImageView, в который вы его загружаете. Если оно меньше, то полезно будет использовать методы fit() и centerInside() для Glide и Picasso.3️⃣ Ну и напоследок стоит обратить внимание на профиль для загрузки изображений. По умолчанию может быть AGRB_8888, который использует 4 байта для каждого из пикселей. Но для большинства задач достаточно RGB_565, который использует в 2 раза меньше байтов. Да, качество изображений получается хуже, и нет поддержки прозрачности. Но для многих задач достаточно и такого качества.
Emoji под капотом
#view
Любопытная статья о том, как работают emoji под капотом.
По сути emoji — это стандартные Unicode-символы, которые ведут себя так же, как и обычные буквы: вы можете их вводить с клавиатуры, копировать, выделять и т.д.
Интересно, что это также bitmap font, где каждый символ — это или растровое или векторное изображение. Все зависит от операционной системы – на Android это битмапы размером 128×128. Вот главная причина, почему emoji выглядят по-разному на различных устройствах. Ну и некоторые приложения или вендоры переопределяют шрифты, чтобы отрисовать их по-своему.
В статье автор также рассматривает ситуации:
🔸когда emoji пересекаются с уже существующими пиктограммами;
🔸почему все emoji выглядят одинаково при любом выбранном шрифте;
🔸какие проблемы могут быть при нахождении длины строки и emoji;
🔸как работает модификация тона кожи;
🔸как можно комбинировать несколько emoji в одну и многое другое.
Ссылка на статью тут. Лично мне было интересно узнать столько новых деталей про такой распространённый инструмент. 🙃
#view
Любопытная статья о том, как работают emoji под капотом.
По сути emoji — это стандартные Unicode-символы, которые ведут себя так же, как и обычные буквы: вы можете их вводить с клавиатуры, копировать, выделять и т.д.
Интересно, что это также bitmap font, где каждый символ — это или растровое или векторное изображение. Все зависит от операционной системы – на Android это битмапы размером 128×128. Вот главная причина, почему emoji выглядят по-разному на различных устройствах. Ну и некоторые приложения или вендоры переопределяют шрифты, чтобы отрисовать их по-своему.
В статье автор также рассматривает ситуации:
🔸когда emoji пересекаются с уже существующими пиктограммами;
🔸почему все emoji выглядят одинаково при любом выбранном шрифте;
🔸какие проблемы могут быть при нахождении длины строки и emoji;
🔸как работает модификация тона кожи;
🔸как можно комбинировать несколько emoji в одну и многое другое.
Ссылка на статью тут. Лично мне было интересно узнать столько новых деталей про такой распространённый инструмент. 🙃
Что за Material Navigation Rail?
#design #view
Одной из фич, которая была детально рассмотрена на прошедшем Google I/O — это работа с гибкими устройствами, планшетами и большими экранами. Видео тут, а одним из упоминаний была пока не самая популярная View —
По сути — это вертикальный
В статье отлично описывается то, как использовать этот компонент, как настроить различные свойства и стили. Выглядит неплохо, и если ваше приложение предусматривает горизонтальный режим — обратите внимание на него.
#design #view
Одной из фич, которая была детально рассмотрена на прошедшем Google I/O — это работа с гибкими устройствами, планшетами и большими экранами. Видео тут, а одним из упоминаний была пока не самая популярная View —
Material Navigation Rail.По сути — это вертикальный
Bottom Navigation Bar. Однако, эта View подходит не во всех случаях: например, пользователь использует приложение в альбомной ориентации. В этом случае пространство внизу занято Bottom Navigation Bar, что делает использование контента менее удобным. В статье отлично описывается то, как использовать этот компонент, как настроить различные свойства и стили. Выглядит неплохо, и если ваше приложение предусматривает горизонтальный режим — обратите внимание на него.
Изменения виджетов для Android 12
#api #view #question
Виджеты существуют уже долгое время, и, думаю, каждый пользователь смартфона на Android использует хотя бы один на своём рабочем столе. Но не так много приложений включает их в свой арсенал: нет подходящих фич для того, чтобы их использовать, или же текущее API не позволяет добавить то, что хочется.
С появлением Android 12 у нас есть изменения в API виджетов, вероятно это вдохнёт новую жизнь в этот элемент. 🤞🏻
Обязательно почитайте эту статью, где описываются все изменения: ведь теперь нужно учитывать скругления, переключения тем и превью при добавлении.
А тут уже больше измений, связанных с кодом. Рассказывается о новом API и поддержки их в виджетах, что также может помочь вам в использовании виджетов на последнем Android.
А у вас в приложении есть виджеты?
#api #view #question
Виджеты существуют уже долгое время, и, думаю, каждый пользователь смартфона на Android использует хотя бы один на своём рабочем столе. Но не так много приложений включает их в свой арсенал: нет подходящих фич для того, чтобы их использовать, или же текущее API не позволяет добавить то, что хочется.
С появлением Android 12 у нас есть изменения в API виджетов, вероятно это вдохнёт новую жизнь в этот элемент. 🤞🏻
Обязательно почитайте эту статью, где описываются все изменения: ведь теперь нужно учитывать скругления, переключения тем и превью при добавлении.
А тут уже больше измений, связанных с кодом. Рассказывается о новом API и поддержки их в виджетах, что также может помочь вам в использовании виджетов на последнем Android.
А у вас в приложении есть виджеты?
Принципы и методы эффективной локализации
#view #tools
Интересная статья, которая рассказывает о техниках локализации вашего приложения, которые лежат чуть дальше, чем просто перевод на язык.
Речь идёт больше о том как сделать, чтобы людям из разных культур, наций и стран было комфортно пользоваться вашим приложением.
Например, любопытный момент с большими текстами на разных языках: нужно иметь ввиду, что шрифт может менять свой размер в зависимости от выбранного языка. Или вот еще, пользовательское соглашение на английском языке будет занимать гораздо меньше места, чем сообщение с иероглифами.
Ну и интересный пункт про аватарки пользователй: если вы используете какие-то предустановленные аватарки, то стоит избегать аватарок только одного пола, расы или демографической характеристики. ☝️
В общем, будет полезно проверить своё приложение, если оно работает в нескольких странах, вероятно так вы сделаете его ещё лучше.
#view #tools
Интересная статья, которая рассказывает о техниках локализации вашего приложения, которые лежат чуть дальше, чем просто перевод на язык.
Речь идёт больше о том как сделать, чтобы людям из разных культур, наций и стран было комфортно пользоваться вашим приложением.
Например, любопытный момент с большими текстами на разных языках: нужно иметь ввиду, что шрифт может менять свой размер в зависимости от выбранного языка. Или вот еще, пользовательское соглашение на английском языке будет занимать гораздо меньше места, чем сообщение с иероглифами.
Ну и интересный пункт про аватарки пользователй: если вы используете какие-то предустановленные аватарки, то стоит избегать аватарок только одного пола, расы или демографической характеристики. ☝️
В общем, будет полезно проверить своё приложение, если оно работает в нескольких странах, вероятно так вы сделаете его ещё лучше.
Создание доступного приложения
#tools #view
Отличная статья, которая рассказывает о том, как сделать ваше приложение комфортным для использования людьми с разными видами инвалидности.
На самом деле, меня радует, что в последнее время появляется много материалов, которые связаны с адаптацией приложений: ведь таких людей очень много, и не адаптируя своё приложение вы заранее вычёркиваете многих пользователей из своего списка.
В статье есть примеры кода, связанного с адаптацией View, шрифтов, описания компонентов и т.д.
А вот ещё хорошая книга, хотя и из мира iOS, но полезная всем, кто занимается адаптацией интерфейсов, где дано множество полезных и практических советов.
#tools #view
Отличная статья, которая рассказывает о том, как сделать ваше приложение комфортным для использования людьми с разными видами инвалидности.
На самом деле, меня радует, что в последнее время появляется много материалов, которые связаны с адаптацией приложений: ведь таких людей очень много, и не адаптируя своё приложение вы заранее вычёркиваете многих пользователей из своего списка.
В статье есть примеры кода, связанного с адаптацией View, шрифтов, описания компонентов и т.д.
А вот ещё хорошая книга, хотя и из мира iOS, но полезная всем, кто занимается адаптацией интерфейсов, где дано множество полезных и практических советов.
ShapeableImageView
#android #view
При разработке приложений, довольно часто нужно придавать различную форму
Путей решения много: например, кастомная
Все что нужно — это использовать
#android #view
При разработке приложений, довольно часто нужно придавать различную форму
ImageView. Самая распространённая — это круглая, которая зачастую используется для аватарок или в профилях.Путей решения много: например, кастомная
View или же библиотеки, но я только недавно узнал, что есть нативное решение из компонентов Material.Все что нужно — это использовать
com.google.android.material.imageview.ShapeableImageView и применить нужные атрибуты: это и форма, и обводка, и радиус для углов. В общем, крутая штука прям из коробки. Чуть больше деталей можно посмотреть тут.🔥26👍2🤩1