Дизайн Android приложений: урок в Android Studio

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

Настройка темы

Сначала изменим тему приложения. Её можно изменить в папке Theme.AppCompat. Также следует изменить файл colors.xml. В нём определён основной цвет (colorPrimary), изначально красный. Заменим его на голубовато-синие оттенки. Вы можете выбрать свои цвета, например, с помощью сервиса Google. Я использовал следующие цвета.

Создание дизайна с помощью RelativeLayout

Перейдём в режим Split для ручного написания кода дизайна. Это позволит лучше понять свойства элементов и в некоторых случаях упростит работу. Вместо ConstraintLayout используется RelativeLayout. В RelativeLayout положение объектов задаётся относительно друг друга или с помощью отступов. Этот layout подходит для создания адаптивных версий приложений. Каждый элемент должен иметь открывающий и закрывающий теги. Например:

<RelativeLayout>
    <!-- Содержимое RelativeLayout -->
</RelativeLayout>

Внутри RelativeLayout размещаются различные элементы.

Верхний блок

Зададим цвет приложения, используя f1f1f1 (светло-серый или белый) в файле colors.xml. Создадим блок с фоном и текстом приветствия. Внутри RelativeLayout создадим ещё один RelativeLayout:

<RelativeLayout
    android_layout_width="match_parent"
    android_layout_height="20dp"
    >
    <!-- Содержимое внутреннего RelativeLayout -->
</RelativeLayout>

match_parent задаёт ширину, равную ширине родительского элемента, а высота — фиксированная (20 пикселей).

Добавим фон:

android:background="#...цвет..."

(Цвет указан непосредственно в коде, но лучше использовать файл colors.xml). Добавим TextView с текстом «Привет, админ!». Используем сокращенную запись:

<TextView
    android_text="Привет, админ!"
    android_textColor="@android:color/white"
    android_fontFamily="Montserrat Bold"
    android_textSize="20sp"
    android_layout_marginTop="40dp"
    android_layout_marginLeft="40dp"
    />

Указаны цвет текста, шрифт (Montserrat Bold), размер текста и отступы. Затем добавим TextView с текстом «Ваш личный кабинет», изменив цвет, размер текста и отступы:

<TextView
    android_text="Ваш личный кабинет"
    android_textColor="@color/bg"
    android_textSize="14sp"
    android_layout_marginTop="70dp"
    />

Нижний блок и изображение

Создадим RelativeLayout высотой 150dp под верхним блоком:

<RelativeLayout
    android_layout_width="match_parent"
    android_layout_height="150dp"
    android_layout_below="@+id/upperBlockId"  <!--  Ссылка на ID верхнего блока -->
    android_background="@android:color/white"
    android_paddingLeft="50dp"
    android_paddingRight="50dp"
    android_layout_marginTop="-80dp"
    >
    <!-- Содержимое нижнего блока -->
</RelativeLayout>

android:layout_below указывает, что блок располагается под предыдущим (upperBlockId — ID верхнего блока). Заданы отступы и отрицательный marginTop, создавая эффект наложения. Внутри разместим кнопку:

<Button
    android_layout_width="match_parent"
    android_layout_height="wrap_content"
    android_text="Личный кабинет"
    android_layout_marginTop="50dp"
    android_backgroundTint="@color/colorPrimary"
    />

Добавим изображение с помощью ImageView:

<ImageView
    android_id="@+id/mainImage"
    android_layout_width="match_parent"
    android_layout_height="250dp"
    android_layout_below="@+id/mainBox"
    android_layout_marginLeft="50dp"
    android_layout_marginRight="50dp"
    android_layout_marginTop="30dp"
    android_src="@drawable/shock"
    />

(Путь к изображению shock.jpg указан вручную, проще добавить через графический редактор). Меню добавлено в основной код.

Меню и заключение

Добавим меню снизу с помощью LinearLayout с горизонтальной ориентацией:

<LinearLayout
    android_layout_width="match_parent"
    android_layout_height="wrap_content"
    android_layout_alignParentBottom="true"
    android_orientation="horizontal"
    android_background="#...цвет..."
    android_layout_marginTop="50dp"
    >
    <Button
        android_layout_width="wrap_content"
        android_layout_height="wrap_content"
        android_text="Главное"
        android_layout_marginLeft="20dp"
        />
    <!--  Другие кнопки -->
</LinearLayout>

Создан базовый дизайн приложения. Его можно дополнить цветами, изображениями, кнопками и другими элементами. Прописывание кода часто проще, чем использование дизайнера, особенно с RelativeLayout. RelativeLayout позволяет создавать адаптивные макеты.