Урок 4: Верстаем экран по макету из Figma, ShapeDrawable | Курс Android на Kotlin c нуля
📍 Дизайн-макет для EnglishWordsApp в Figma: https://clck.ru/34ow4g 📖 Текстовая версия урока и практика: https://androidsprint.ru/courses/osnovy-android-xml/?utm_source=rutube&utm_medium=video&utm_campaign=android_xml_osnovi 🎯 Обучающая платформа с ИИ: https://androidsprint.ru/?utm_source=rutube&utm_medium=video&utm_campaign=android_xml_osnovi - Код из всех уроков в моем TG канале: https://t.me/ievetrov - Сообщество в VK: https://vk.com/ivan.ievetrov ✅ Бесплатный курс по Kotlin: https://rutube.ru/plst/508925 ✅ Бесплатный курс по Jetpack Compose для начинающих и опытных Android-разработчиков: https://rutube.ru/plst/1605147 Приступим к полноценной верстке первого экрана приложения для изучения иностранных слов. У меня есть дизайн-макет в Figma - наиболее распространенным инструментов на сегодняшний день для создания дизайна. Проведу по нему краткий обзор и покажу как пользоваться основными функциями, которые нужны нам, как разработчикам. Из основного это: экспорт графики (иконок/изображений из Фигмы), просмотров размеров элементов и отступов, просмотр цветовой палитры, просмотр шрифтов и размеров текстов. Далее приступим к верстке элементов. Использовать будем распространенные вью, такие как: Button, ImageButton, ImageView и лейауты LinearLayout и ConstraintLayout. Из особенно интересного научимся создавать ShapeDrawable, чтобы придавать контейнерам формы. Например, как в макета, контейнеры с закругленными углами. 00:00 Что такое Figma (Фигма)? 01:31 Верстка иконки закрытия 02:10 Импорт векторной иконки в проект 04:30 Верстка изучаемого слова 05:46 Верстка вариантов ответа 06:07 Вложенные лейауты 07:26 Стилизация (позиционирование, размер текста и фон) 08:05 Создание фонов (ShapeDrawable) 11:09 LinearLayout и layout_gravity 12:41 Верстка и стилизация футера 15:14 Элемент иконка "с пальцем вверх" 16:47 Добавляем Button #androiddevelopment #mobiledevelopment #андройд
📍 Дизайн-макет для EnglishWordsApp в Figma: https://clck.ru/34ow4g 📖 Текстовая версия урока и практика: https://androidsprint.ru/courses/osnovy-android-xml/?utm_source=rutube&utm_medium=video&utm_campaign=android_xml_osnovi 🎯 Обучающая платформа с ИИ: https://androidsprint.ru/?utm_source=rutube&utm_medium=video&utm_campaign=android_xml_osnovi - Код из всех уроков в моем TG канале: https://t.me/ievetrov - Сообщество в VK: https://vk.com/ivan.ievetrov ✅ Бесплатный курс по Kotlin: https://rutube.ru/plst/508925 ✅ Бесплатный курс по Jetpack Compose для начинающих и опытных Android-разработчиков: https://rutube.ru/plst/1605147 Приступим к полноценной верстке первого экрана приложения для изучения иностранных слов. У меня есть дизайн-макет в Figma - наиболее распространенным инструментов на сегодняшний день для создания дизайна. Проведу по нему краткий обзор и покажу как пользоваться основными функциями, которые нужны нам, как разработчикам. Из основного это: экспорт графики (иконок/изображений из Фигмы), просмотров размеров элементов и отступов, просмотр цветовой палитры, просмотр шрифтов и размеров текстов. Далее приступим к верстке элементов. Использовать будем распространенные вью, такие как: Button, ImageButton, ImageView и лейауты LinearLayout и ConstraintLayout. Из особенно интересного научимся создавать ShapeDrawable, чтобы придавать контейнерам формы. Например, как в макета, контейнеры с закругленными углами. 00:00 Что такое Figma (Фигма)? 01:31 Верстка иконки закрытия 02:10 Импорт векторной иконки в проект 04:30 Верстка изучаемого слова 05:46 Верстка вариантов ответа 06:07 Вложенные лейауты 07:26 Стилизация (позиционирование, размер текста и фон) 08:05 Создание фонов (ShapeDrawable) 11:09 LinearLayout и layout_gravity 12:41 Верстка и стилизация футера 15:14 Элемент иконка "с пальцем вверх" 16:47 Добавляем Button #androiddevelopment #mobiledevelopment #андройд