Основы разработки интерфейсов мобильных приложений

6.2.4 Смена фона

Идём дальше - попробуем поменять фон.

Чтобы изменить цвет фона на чёрный, нужно в XML-коде главной активности написать одну строку в блоке <RelativeLayout> элемента:

android:background="#000000".
        

Сохраните и проверьте результат, открыв графический редактор.

увеличить изображение
Рис. 6.21. Фон стал чёрным

Красиво, но скучно. Как сделать фон ещё интереснее? Поместить на него рисунок!

Для этого сначала в папке res/ создадим папку drawable/

увеличить изображение
Рис. 6.22. Создание папки

Рис. 6.23. Создание папки: имя папки

После того, как папка создана, нужно положить в эту папку изображение - картинка называется got.png:

Рис. 6.24. Изображение в папке drawable/

После этого в папке drawable/ нужно создать файл background.xml, важно при создании выбрать параметр bitmap.

увеличить изображение
Рис. 6.25. Создание нового XML-файла

Рис. 6.26. Создание нового XML-файла

Как только новый файл открылся, пропишем в него одну строчку, с указанием на то, откуда и какой файл использовать:

<?xml version="1.0" encoding="utf-8"?>
<bitmap	xmlns:android="http://schemas.android.com/apk/res/android" 
	android:src="@drawable/got">
</bitmap>
        

Вернемся в редактор XML-кода, туда, где прописывали цвет фона.

Вместо строки android:background="#000000" напишем ссылку на XML-файл android:background="@drawable/background".

Сохраняем и видим результат:

увеличить изображение
Рис. 6.27. Новый фон

Несомненно, фон смотрится хорошо, но очевидно, что кнопка и поле ввода просто затерялись, а это значит, что для этого приложения такой фон не подходит. Можно продолжить подбирать изображения на фон, но лучше создать черепичную заливку небольшим изображением. На этом сайте можно найти узор на любой вкус!

Когда вы выбрали узор и скачали его, скопируйте изображение в папку drawable/.

Рис. 6.28. Копирование изображения

Рис. 6.29. Скопированное изображение

Теперь немного изменим файл background.xml.

Во-первых, нужно изменить имя изображение со старого на новое.

android:src="@drawable/starring"
        

Во-вторых, добавим такую строчку:

android:tileMode="repeat" 
        

Сохраняем.

Атрибут android:tileMode задает тип заполнения, в данном случае простое повторение исходного изображения. Кроме repeat возможны варианты clamp и mirror. Помните, что данный приём применим только к bitmap, к фигурам, созданным при помощи XML, применить данную операцию нельзя.

Рис. 6.30. Варианты заполнения

Настало время посмотреть, что из этого получилось:

увеличить изображение
Рис. 6.31. Фон из звездочек

В <RelativeLayout> стоит добавлять android:background только в том случае, если вы хотите неподвижный фон, а в <ScrollView> чтобы фон прокручивался вместе с контентом.

Если вы выбрали тёмный фон, то стоит поменять цвет текста, вводимого в поле ввода, например на белый.

Для этого в блок <EditText> добавим строчку

android:textColor="#ffffff"