Урок 4: Верстаем экран по макету из Figma, ShapeDrawable | Курс Android на Kotlin c нуля

🔹 Обучающий бот по Android c Android-ROADMAP t.me/AndroidStudyBot?start=yt
🔹 Дизайн-макет для EnglishWordsApp в Figma: clck.ru/34ow4g
🛠 Код из всех уроков: t.me/ievetrov_dev
🛠 Личный телеграм канал про путь разработчика: t.me/ievetrov_dev
✅ Вопросы и ответы для Android собеседований: t.me/AndroidSprint_Interview
🔹 Текстовая версия урока:
🔹 Бесплатный курс по основам Kotlin: clck.ru/34EgJF
🔹 VK: ievetrov.development
Приступим к полноценной верстке первого экрана приложения для изучения иностранных слов. У меня есть дизайн-макет в 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 #андройд

[@ievetrov]

Ссылки и содержание: 🔸Телеграм КАНАЛ ievetrov: t.me/ievetrov_dev 🔹 Обучающий бот по Android c Android-ROADMAP t.me/AndroidStudyBot?start=yt 🔹 Дизайн-макет для EnglishWordsApp в Figma: clck.ru/34ow4g 🔹 Бесплатный курс по основам Kotlin: clck.ru/34EgJF

[@Borland_Dev]

Велике дякую саме за це відео , ну і взагалі за всі . Небагато хто подає так правильно матеріал .

[@ievetrov]

Благодарю за высокую оценку!)

[@user-we6si4mi3x]

Большое спасибо за урок!!

[@user-me5cp9ke8v]

Спасибо!

[@user-zd7ru7ow8m]

Спасибо вам сенсей

[@wzagorowski]

Топ контент 👍

[@ievetrov]

🙏

[@asortimentmaintainer8987]

Спасибо за туторы, если бы не ты я бы продолжил бомбить над редактом preview у xml. Оказывается тут нужно все верстать через код

[@seoonlyRU]

лайк от СЕООНЛИ!

[@user-xh9pc5xm8k]

Обязательно ли каждый раз писать android: или можно вывести в пространство имён как в С++ вроде того?

[@ievetrov]

в разметке обязательно, да

[@rorschach3415]

Хм, сверстал, но когда на смартфоне запускаю, все элементы не влезают. Часть заходит за нижнее меню навигации (домой, назад и т.д). Что делать? ( убрал это меню, но тем не менее ) И еще вопрос. Тут в видео мы в constraintlayout в котором находится иконка с пальцем, текст и кнопка continue не прописали marginTop = 33dp, как в макете. Или это не нужно делать? Если я прописываю это, тогда элементы в constraintlayout поджимаются и у кнопки уже явно не 24dp отступ снизу, видимо не хватает места. Как поступать в таких случаях? Ведь когда мы задаем отступы вручную, на некоторых устройствах по итогу может не оказаться места, чтобы все корректно разместить. А если минимизировать использование точных значений, тогда может быть расхождение с макетом.

[@EvgeniyKarpov01]

та же хуйня

[@EvgeniyKarpov01]

автор делал на винде, и хз с чем это связано но решение добавить android:fitsSystemWindows="true" в атрибуты androidx.constraintlayout.widget.ConstraintLayout

[@user-wo3bv6hz9e]

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

[@ievetrov]

Привет, в Figma? Да, можно скопировать в свои черновики и редактировать под себя

[@user-wo3bv6hz9e]

Спасибо большое

[@tim.wonderer]

Ссылка на фигму не работает

[@akenglishstudy]

Что-то я совсем уже запутался. Судя по заголовку это туториал по Котлин. Или xml?

[@ievetrov]

Котлин в соседнем плейлисте) это уроки по разработке Андройд приложения

[@akenglishstudy]

@@ievetrov спасибо!