Android Studio: Дизайн экрана из Figma (Урок 2)

Использование макета из Figma

Для работы с макетом (.fig), скачайте его с сайта it-prager.com (ссылка в описании) и выполните следующие действия:

1. Зарегистрируйтесь на сайте Figma (figma.com).
2. Импортируйте файл .fig в свой аккаунт Figma, выбрав «Import» в меню пользователя.
3. Откройте и отредактируйте импортированный проект.

Макет содержит дизайн главной страницы и страницу с отдельным курсом. Некоторые блоки шире приложения для удобства пролистывания и отображения скрытых элементов. В этом уроке реализуем основной дизайн главной страницы: боковую панель, название приложения и базовые стили. Функционал категорий товаров, отображение товаров и корзину добавим позже.

Настройка Android Studio

Откройте Android Studio и удалите существующий текст. Включите отображение системного интерфейса (Show system UI). Скроем системную и приложение шапки, изменив тему приложения:

1. Откройте файлы styles.xml в папках res/values и res/values-night.
2. Замените атрибут theme на NoActionBar в обоих файлах.
3. Добавьте следующие атрибуты в styles.xml и res/values-night/styles.xml:

<item name="android:windowNoTitle">true</item>
<item name="android:windowFullscreen">true</item>

Это уберёт системные заголовки и развернёт приложение на весь экран.

Добавление шрифтов

Добавьте шрифты Montserrat Regular и Montserrat Bold, используемые в макете (проверьте используемые шрифты в макете Figma):

1. В Android Studio, в папке res/font, добавьте шрифты через More Fonts…

Создание боковой панели

Создадим боковую панель с иконкой и текстом. Перейдём в режим Split, скроем Project-иерархию и начнём кодирование:

1. Создайте ConstraintLayout внутри основного объекта.
2. Установите фоновый цвет, создав новый цвет в colors.xml (например, main_bg_color) и применив его к ConstraintLayout.
3. Установите ширину ConstraintLayout на 65 dp, а высоту — 0dp.
4. Используйте ограничения, чтобы прижать панель к левому краю, верху и низу.

Добавим иконку:

1. Экспортируйте иконку из Figma как SVG.
2. Добавьте SVG-файл в папку drawable через New > Vector Asset.
3. Добавьте ImageView, установите импортированную иконку и ограничения, добавив отступ снизу (например, 20 dp) и contentDescription. Запишите contentDescription в strings.xml.
4. Добавьте в build.gradle поддержку векторной графики и синхронизируйте проект:

android {
    defaultConfig {
        ...
        vectorDrawables {
            useSupportLibrary true
        }
    }
}

Добавление текстовых надписей

Добавьте TextView объекты для «Контакты», «О нас» и «Главное»:

1. Запишите тексты в strings.xml.
2. Установите шрифт Montserrat (Regular и Bold), размер шрифта (20 sp), цвет текста (@color/black).
3. Используйте вращение (rotation) для вертикальной ориентации текста «Контакты».
4. Установите ограничения и отступы для всех TextView объектов, используя ConstraintLayout.

Добавление названия приложения

Создайте два TextView объекта для названия приложения («Курсы» и «Об»):

1. Добавьте тексты в strings.xml.
2. Установите шрифт Montserrat (Regular и Bold), размер шрифта (40 sp) и цвет текста. Создайте новый цвет в colors.xml для текста «Об».
3. Установите ограничения и отступы.

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