Практика: Пользовательский интерфейс. View, основные атрибуты

Для всех практических заданий в качестве коренного контейнера используйте LinearLayout, указанный ниже. А все виджеты добавляйте внутрь него:

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical">

    <!--Сюда добавляйте свой код-->

</LinearLayout>

Задание 1. Атрибуты android:layout_width, android:layout_height

Создайте три TextView, как указано на картинке:

Условия:

Размер текста у всех элементов – 20sp.
Фоновый цвет – #E7E4E4.
Размер вертикального отступа между элементами – 20dp.

Задание 2. Атрибуты padding, margin

Создайте три TextView, как указано на картинке:

Условия:

Размер текста у всех элементов – 20sp.
Фоновый цвет – #E7E4E4.
Отступ сверху и слева снаружи у каждого элемента – 10dp.
Отступ со всех сторон внутри элемента – 5dp.

Отступы слева снаружи элементов можно делать двумя способами:

Указывая атрибут android:layout_marginStartу всех элементов.
Указывая атрибут android:paddingStart у коренного контейнера. Получится, что он сделает отступ внутри себя слева. Т.к. все элементы будут находиться внутри него, то у них появится отступ относительно контейнера.

Задание 2.1

Вначале используйте атрибут android:layout_margin у всех элементов для задания отступов снаружи.

Задание 2.2.

Удалите атрибуты android:layout_marginStart, и теперь используйте атрибут android:paddingStart у родительского элемента для задания отступов внутри него. Подумайте хорошенько, какие преимущества у такого варианта.

Задание 3. Атрибуты gravity, layout_gravity

Создайте три TextView, как указано на картинке:

Условия:

Размер текста у всех элементов – 20sp.
Фоновый цвет – #E7E4E4.
Размер вертикального отступа между элементами – 20dp.
Ширина нижнего элемента – 300dp.

Задание 4.* Реальный макет

Заказчик сказал, что хочет, чтобы вы сделали ему макет экрана логина. Прислал такой шаблон:

На экране располагается два поля для ввода символов. Этот элемент называется EditText. Используйте атрибут android:hint для отображения текста вместо android:text. Этот атрибут отображает текст только, пока пользователь не ввёл ничего. И снизу находится кнопка.

Исходные данные:

Ширина кнопки и текстовых полей – 180 dp. Высота кнопки – 30dp, у текстовых полей – высота должна совпадать с высотой текста.
Текст для имени и пароля написан курсивом, его размер – 16sp. Текст кнопки написан толстым шрифтом, размер текста – 13sp.
Фоновый цвет экрана – #E7E4E4. Цвет текста у кнопки такой же, как фоновый цвет полей пользователя – белый (#FFF).
У поля Имя сверху отступ – 15dp, у поля Пароль сверху отступ, такой же как у кнопки – 5dp.
У текстовых полей должны быть отступы внутри элемента со всех сторон – 5dp.
Все элементы должны быть центрированы горизонтально относительно родительского контейнера. Подсказка: можете использовать атрибуты gravity у родительского контейнера или layout_gravity у самих элементов.

Решение:

Используя атрибут layout_gravity у всех элементов.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:background="#E7E4E4"
              android:orientation="vertical">

    <EditText
        android:layout_width="180dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="15dp"
        android:background="#FFF"
        android:padding="5dp"
        android:textSize="16sp"
        android:textStyle="italic"
        android:hint="Имя"/>

    <EditText
        android:layout_width="180dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="5dp"
        android:background="#FFF"
        android:padding="5dp"
        android:textSize="16sp"
        android:textStyle="italic"
        android:hint="Пароль"/>

    <Button
        android:layout_width="180dp"
        android:layout_height="30dp"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="5dp"
        android:background="#008577"
        android:text="Войти"
        android:textColor="#FFF"
        android:textSize="13sp"
        android:textStyle="bold"/>

</LinearLayout>

Используя атрибут gravity у контейнера.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:background="#E7E4E4"
              android:gravity="center_horizontal"
              android:orientation="vertical">

    <EditText
        android:layout_width="180dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="15dp"
        android:background="#FFF"
        android:padding="5dp"
        android:hint="Имя"
        android:textSize="16sp"
        android:textStyle="italic"/>

    <EditText
        android:layout_width="180dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:background="#FFF"
        android:padding="5dp"
        android:textSize="16sp"
        android:textStyle="italic"
        android:hint="Пароль"
        />

    <Button
        android:layout_width="180dp"
        android:layout_height="30dp"
        android:layout_marginTop="5dp"
        android:background="#008577"
        android:text="Войти"
        android:textColor="#FFF"
        android:textSize="13sp"
        android:textStyle="bold"/>

</LinearLayout>