Красивые компоновки на основе CardView и ScrollView. AndroidStudio

Сейчас создаём новый проект, как мы делали раньше и выбираем шаблон "Empty Activity". Далее даём название "CardView Layout". (Рис. 1)

Далее развернем папку "res" и нажимаем правой кнопкой мыши на подпапку "layout". Далее выбираем пункт "New" и затем выбираем "Layout Resource file". После этого видим новое окно, где указываем название, в моём случае я указал "main_layout"(Страница по умолчанию) и в поле "Root element" меняем на "ScrollView" (Рис. 2). После этого нажимаем "OK"

Теперь сделаем так, чтобы при запуске приложения открывалось наше новое только что созданное активити(main_layout). Для этого нам в методе "onCreate" нужно поменять одну строку, как это делали раньше. (Рис. 3)

Далее загрузим некоторые изображения и добавим их в наш проект, а именно в директорию "res/drawable". Я добавил три новые картинки (Рис. 4).

Теперь создадим ещё три компоновки и назовём их "card_contents_1, card_contents_2, card_contents_3" , а также используем "LinearLayout". (Рис. 5).

Далее выберем "card_contents_1" и добавим туда "TextView" после этого добавим "ImageView" выберем в появившемся окне нашу картинку, затем добавим ещё два поля "TextView" и должно получиться примерно так: (Рис. 6)

Далее для верхнего "TextView" установим значение для атрибута "layout_margin - 16dp" и изменим текст, должно получиться так: (Рис. 7)

Далее для картинки мы установим значения для атрибутов "layout_height, layout_width" "wrap_content".

Далее для "TextView", который находиться под картинкой изменим атрибут "text" , "layout_margin - 16dp" и "textSize - 16sp". (Рис. 8)

Для нижнего "TextView" установим "layout_margin - 16dp", "text", "textSize - 24sp" и "textColor - цвет можете установить любой." (Рис. 9).

Для самого "LinearLayout" установим значение для "padding - 15dp". И должно получиться примерно следующее: (Рис. 10)

Теперь всё тоже самое повторим и с двумя другими созданными компоновками. Разумеется нужно будет поменять текст и картинки. После того как все три компоновки мы разработали нажимаем правой кнопкой мыши по папке "Values" и выбираем пункт "New" и опцию "Values Resource file" и назовём этот файл "dimens"(Размеры) (Рис. 11). Затем нажимаем "OK".

Далее у нас открывается только что созданный xml файл. Нужно отредактировать его следующим образом. (Рис. 12)

Этот файл будет использоваться для некоторых общих значений, которые наш CardView будет использовать со ссылкой на них.

Далее мы будем добавлять "CardView" в компоновку. Перейдем на вкладку "main_layout.xml". Есть одно НО, "ScrollView" имеет ограничение — у него может быть только одна прямая дочерняя компоновка. Мы же хотим, чтобы он содержал три виджета "CardView". Перетащим "LinearLayout(vertical)" . И мы после добавим три наших виджета "CardView" внутрь "LinearLayout" и тогда будет прокручиваться всё без особых проблем.

Далее установим для "CardView" следующие атрибуты:

1. layout_width - wrap_content;
2. layout_gravity - centre;
3. layout_margin - @dimen/card_margin;
4. cardCornerRadius - @dimen/card_corner_radius.

Теперь нам нужно в "CardView" добавить нашу компоновку. Для этого используется "include". Немного нужно отредактировать код таким образом (Рис. 13).

После этого мы можем увидеть в визуальном редакторе компоновку внутри элемента "CardView". (Рис. 14)

Теперь делаем тоже самое для оставшихся двух "CardView" , но за одним исключением. На втором "CardView" установим для "cardEvelation" значение 22dp, а на третьем - 42dp.

Вот и всё, в результатах мы можем заметить, что края карточек скруглены - это "cardCornerRadius", для которого мы установили значения, а также присутствует тень - это "cardEvalation".