Урок посвящен созданию привлекательного дизайна приложения авторизации. Разработаем интерфейс для ввода логина и пароля, используя эффективные приемы и инструменты Android Studio. Дополнительные материалы, готовый код и домашнее задание доступны на сайте [ссылка на сайт].
Настройка среды разработки
Создан пустой проект без элементов. Удалено даже стандартное текстовое поле. Перед началом работы над дизайном, рассмотрим полезные настройки Android Studio:
- Тема приложения: Выбор тем для ActionBar (верхняя панель) и нижних кнопок. Множество вариантов, сгруппированных по категориям. Пример: Material Light NoActionBar. Возможность удалить ActionBar или настроить его индивидуально.
- Тема Android Studio: Настройка темы IDE. Например, тема Darcula удобна для работы в вечернее/ночное время.
Цветовая схема приложения
Задний фон изменен с белого на темный синеватый оттенок (#35354A). Цвета подобраны с помощью онлайн-инструмента (например, Color Picker). Значение цвета задано в файле colors.xml (папка res/values).
Макет приложения
Используется вертикальный LinearLayout. В него добавлены:
- Поле ввода email.
- Поле ввода пароля.
- Кнопка входа.
- Картинка (из папки drawable).
Картинку добавляем копированием в папку drawable проекта.
Оформление элементов интерфейса
Применены следующие стили:
- Картинка: Верхний и нижний отступы (android:paddingTop="40sp", android_paddingBottom="70sp").
- Текст заголовка («Авторизация»): Шрифт Monospace, размер 25sp, выравнивание по центру, белый цвет (#FFFFFF), темно-зеленый цвет текста (#…).
- Поля ввода (email и пароль): Подсказки (android:hint), внутренние отступы (android:padding), верхний отступ (android:layout_marginTop="20sp"), левые и правые отступы (android:layout_marginStart="40sp", android_layout_marginEnd="40sp"). Фон — colorWhite (#…) из colors.xml с оттенком серого. Внутренний отступ (android:padding) — 10sp. Текст — красный (colorAccent).
Скругленные углы
Создан файл drawable/fields.xml с стилями для разных состояний элементов:
- state_pressed — нажатая кнопка/поле.
- state_focused — поле в фокусе.
- state_enabled — обычное состояние.
В каждом стиле задана форма (shape="rectangle"), скругленные углы (android:cornerRadius="20dp"), обводка (android:strokeWidth="1dp", android_strokeColor="#… ) и цвет заливки. Стили применяются к полям ввода через атрибут android:background.
Оформление кнопки «Войти»
Создан ресурсный файл drawable/button.xml, использующий градиент (<gradient>). Задано направление градиента и цвета. Применены стили из fields.xml. Добавлены название кнопки («Войти»), цвет текста, размер текста и шрифт Monospace.
Тестирование
Приложение протестировано на эмуляторе. Элементы отображаются корректно, кнопка срабатывает плавно, появляется тень при наведении и изменяется фон при нажатии.
Создан привлекательный и функциональный интерфейс приложения авторизации. Отсутствует функциональная часть, но получена базовая структура для дальнейшего расширения (обработчики событий, взаимодействие с базой данных и т. д.). Полученные знания и приемы можно использовать для создания собственных приложений.