Jetpack Compose *

Разрабатывая приложение под Android — мы встроили в продукт свой мессенджер и решили, что стандартные андроидные смайлики — это преступление против дизайна. Telegram и другие популярные мессенджеры давно показали, как должны выглядеть эмоции в чате, а Google всё ещё живёт в 2015-м с Noto Color Emoji.
Хотели просто подменить парочку 😎👩‍💻🙂 на свои красивые… И получили войну: курсор, который живёт своей жизнью, тофу, кернинг и полный хаос при вводе.
Эта статья — история о том, как мы прошли все круги ада и всё‑таки победили систему.

Спойлер: победили костылями.

🚀 Хотите создать регистрацию в стиле Google для своего Android-приложения? 🚀

Забудьте о скучных формах! Погрузитесь в мир плавной анимации, интуитивного дизайна и надежной безопасности – всё это с помощью Kotlin и Jetpack Compose.

✨ Что вас ждет:

Пошаговый гайд: От первых строк кода до готового результата – разберемся вместе.

Рабочий код: Не просто теория, а готовые решения для вашего проекта.

Комментарии эксперта: Поймете каждый шаг и сможете адаптировать код под свои нужды.

Секреты профессионалов: Узнаете, как сделать регистрацию не только функциональной, но и привлекательной.

💪 Не упустите шанс прокачать свое приложение! 💪

Когда только начинаешь разрабатывать под Android, самые неприятные баги появляются не из-за опечаток, а из-за систематических ошибок. Хардкод строк и цветов, корутины, которые живут сами по себе, попытки писать Compose по старинке, как старые view — всё это превращается в технический долг, который мешает развивать продукт. 

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

Вот и время для заключительной статьи этого цикла. В предыдущих статьях мы рассмотрели нашу мотивацию, всю техническую информацию и поделились инсайтами при создании масштабируемого бизнес-решения в виде кроссплатформенного SDK. В этой небольшой статье хотелось уделить внимание иным аспектам, таким как адаптация процессов команды KMP и смежных команд, которые являются заказчиками, немного поговорить про подходы к тестированию и контролю качества, CI/CD и т.д.

Кратко напомним про контекст и продукт: Instories — мобильный видеоредактор для маркетологов, SMM-специалистов и блогеров. Контекст проекта: желание получить ряд SDK (мы называем их Kit-ами, по сути это разные сборки SDK для разных продуктов, со своими ресурсами, фичами и дизайн системой) для наших уже существующих приложений, которые содержали бы в себе коробочные фичи (и бизнес-логику, и UI), готовые к подключению, а также были бы легко расширяемыми и переиспользуемыми для разных приложений компании.

В предыдущих статьях мы рассматривали технические и архитектурные аспекты при создании Kotlin Multiplatform SDK, но немаловажной частью остается работа с UI и ресурсами в таком SDK, особенно если он поставляется сразу в несколько продуктов.

Да, в Compose Multiplatform есть базовая работа с ресурсами: можно работать со строками, картинками и файлами по аналогии с Android проектами, однако что делать, когда для каждого продукта под одним и тем же ключом локализации должна срываться своя строка? В этой статье мы поделимся своим подходом и инсайтами.

Кратко напомним про контекст и продукт: Instories — мобильный видеоредактор для маркетологов, SMM-специалистов и блогеров. Контекст проекта: желание получить ряд SDK (мы называем их Kit-ами, по сути это разные сборки SDK для разных продуктов, со своими ресурсами, фичами и дизайн системой) для наших уже существующих приложений, которые содержали бы в себе коробочные фичи (и бизнес-логику, и UI), готовые к подключению, а также были бы легко расширяемыми и переиспользуемыми для разных приложений компании.

В предыдущих статьях (раз и два) мы рассмотрели, почему выбрали Kotlin Multiplatform для нашего SDK, а также подробно разобрали базовую архитектуру проекта, включая core-модули и организацию Kit-ов. Теперь настало время погрузиться в самое интересное — архитектуру отдельной фичи и то, как мы организовали взаимодействие между модулями.

Эта статья будет особенно полезна тем, кто хочет понять, как на практике реализовать feature-first подход в KMP проекте, как правильно организовать DI, навигацию и работу с ресурсами в многомодульной архитектуре.

Кратко напомним контекст и продукты: Instories — мобильный видеоредактор для маркетологов, SMM-специалистов и блогеров. Контектс проекта: желание получить ряд SDK (мы называем их Kit-ами, по сути это разные сборки SDK для разных продуктов, со своими ресурсами, фичами и дизайн системой) для наших уже существующих приложений, которые содержали бы в себе коробочные фичи (и бизнес-логику, и UI), готовые к подключению, а также были бы легко расширяемыми и переиспользуемыми для разных приложений компании.

В прошлой статье было много текста о том, почему мы стали смотреть в сторону кроссплатформенной разработки и почему мы в Instories выбрали именно Kotlin Multiplatform (далее — KMP) для своего решения.

Кратко напомним контекст и продукты: Instories — мобильный видеоредактор для маркетологов, SMM‑специалистов и блогеров. Контектс проекта: желание получить ряд SDK (мы называем их Kit‑ами, по сути это разные сборки SDK для разных продуктов, со своими ресурсами, фичами и дизайн системой) для наших уже существующих приложений, которые содержали бы в себе коробочные фичи (и бизнес‑логику, и UI), готовые к подключению, а также были бы легко расширяемыми и переиспользуемыми для разных приложений компании.

Мы выбрали использовать многомодульную архитектуру, чтобы каждая фича была инкапсулирована в своем модуле и не влияла на другие фичи, а также разделили проект на несколько крупных пакетов: kits, core и feature. В данной статье мы рассмотрим первые два пакета с технической точки зрения, а также поделимся причинами и инсайтами для выбранных решений.

В современном мире мобильной разработки скорость вывода новых функций на рынок становится критическим фактором успеха. Особенно это актуально в контексте быстро развивающихся технологий, таких как AI, где промедление может стоить конкурентного преимущества. Рассказывать будем на примере нашего продукта Instories — мобильного видеоредактора для маркетологов, SMM-специалистов и блогеров.

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

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

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

Привет, Хабр! Меня зовут Иван Кузнецов, я Android‑разработчик в Кинопоиске. Сегодня расскажу историю разработки своего пет‑проекта, которая началась с код‑ревью очередного экрана на Jetpack Compose.

Представьте, вы открываете пул‑реквест и взгляд цепляется за знакомые паттерны: нестабильный параметр в Composable‑функции, remember без ключа, применение трансформаций на Layout‑фазе. Сразу хочется написать комментарий‑лекцию о том, почему это ударит по производительности и почему лучше так не делать.

Вот только объяснения отнимают время и не всегда наглядно доносят суть проблемы. Особенно это актуально для новичков, которым сложно сопоставить абстракции с реальным поведением UI. А ведь для сложных асинхронных штук вроде RxJava или корутин есть визуализаторы — RxMarbles и FlowMarbles, а для самой частой головной боли в Compose до сих пор нет. Вот бы вместо стены текста просто кинуть ссылку со словами: «Смотри, вот что твой код делает на самом деле».

В этой статье я расскажу о разработке собственного приложения, которое в реальном времени визуализирует рекомпозиции. Чтобы заставить его работать, пришлось залезть под капот компилятора Kotlin и подружиться с его внутренними API: FIR и IR.

Привет, Хабр! Меня зовут Артем и я автор и ведущий YouTube и Telegram каналов Android Insights.

Jetpack Navigation 3 дает полный контроль над навигацией через NavBackStack, но прямая работа с ним превращается в написание шаблонного кода и усложняет использование из ViewModel. В статье предлагается решение этих проблемы, добавляя привычный API с командами push(), pop(), replace().

Если вы работаете с Navigation 3 или планируете на неё переходить — эта статья поможет сделать процесс разработки приятнее.

Привет, Хабр! Меня зовут Арсений Шпилевой, и я Android-разработчик в core-команде WB Partners, Wildberries & Russ. Сегодня поделюсь нашим опытом развития архитектуры приложения на Jetpack Compose: с какими ограничениями мы столкнулись, как укротили навигацию от Google и какими молитвами всё это подружили с Koin. Главным образом речь пойдёт про навигацию на уровне UI, без data- и domain-слоёв.

Статья об использовании мультиплатформенного Android и iOS решения на Compose с минимальным количеством сторонних beta библиотек. Настройке проекта для iOS и Android, а также тестировании с помощью локального сервера Netty

Из сторонних бета-библиотек используется buildkonfig = "0.17.1"

Room - База данных

Ktor - Network. Также задействован embeddedServer для эмуляции сервера

Koin - Dependency Injection

Coroutine Flow

Compose Navigation

Clean Architecture

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

И хотя программиста не запугаешь даже 16-ричной, все-таки метаться между системами счисления в уме, когда ты уже стоишь у кассы и должен расплатиться, причем, по нынешним временам, наличными, - тот еще квест. Поэтому давайте доведем знание числительных до автоматизма.

Каждый Android‑разработчик сталкивается с задачей обучения пользователей новым функциям или помощи в навигации по интерфейсу. Традиционные всплывающие окна или сообщения могут быть навязчивыми. Конечно же есть способ элегантно подсвечивать элементы UI и предоставлять контекстную помощь.
Встречайте TAO Bubbles — легковесную библиотеку для Jetpack Compose, созданную для отображения настраиваемых «пузырей», «подсказок» или «тултипов», которые могут указывать на конкретные UI‑компоненты.TAO Bubbles прекрасно подходит для создания пошаговых руководств, демонстрации новых возможностей или предоставления контекстно‑зависимой справки прямо в вашем приложении.

При разработке и тестировании приложений порой требуется заглянуть под капот - проанализировать HTTP-трафик или проверить кэш данных в базе данных. Ранее для этих целей мы использовали Inspektify и Delight SQL Viewer. Но в какой-то момент нам понадобился еще и удобный доступ к логам приложения и тащить ещё одно отдельнее решение не хотелось. Был нужен один инструмент, который объединит всё самое необходимое в одном месте. Так появился Kick — расширяемый модульный набор инструментов, позволяющий разработчикам и тестировщикам легко инспектировать приложение.

В Дринкит был анимированный компонент на MotionLayout — слайдер быстрой оплаты в меню. Его и сейчас можно увидеть, когда вы добавляете продукты в корзину. Проведя по нему, вы оплатите заказ, а тапнув — перейдёте к покупкам.

Так почему «был»? У компонента накопилось немало багов, а самому слайдеру понадобился новый функционал. Реализовать его на MotionLayout было сложно, так что мы решили переписать компонент на Compose.

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

В Jetpack Compose легко реализуется меню первого уровня. Но реализация вложенного (каскадного) меню не очевидна, поскольку в лямбде onClick пункта меню DropdownMenuItem() невозможно вызвать @Composable функцию, которая будет отображать вложенное меню.

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

Тест меню реализован на основе проекта Empty Activity Android Studio.

Всем привет! Меня зовут Владимир, и я мобильный разработчик в компании «Финам». В своих проектах мы активно используем Jetpack Compose, в котором, несмотря на растущую популярность, получение некоторых визуальных эффектов до сих пор не так очевидно, как хотелось бы. В этой статье рассмотрен один из способов «наложения» различных эффектов рендеринга на уже готовый контент.

Всем привет!

В этой статье мы будем обсуждать, как писать масштабируемые и поддерживаемые интерфейсы на Jetpack Compose: от базовых компонентов до архитектурных практик. Разбираем иерархию, принципы проектирования, naming, порядок параметров и антипаттерны.

Думаю, что статья будет полезна как новичкам, так и опытным разработчикам.

При работе с Jetpack Compose разработчики часто не замечают, как элементы Material и Material 3 дизайн-систем вплетаются в их код. Один из таких элементов - это индикация клика, реализованная в Material как круги на воде (англ. ripple effect). В этой статье мы разберем, в чем недостатки дефолтной реализации риппл-эффекта в Compose и как сделать свою.