1

Для элементов RecyclerView использую CardView. Хотелось бы сделать каждый пункт списка таким.

введите сюда описание изображения

Картинку фоновую подготовить не проблема. Размеры CardView я не указываю у меня указаны match_parent и wrap_content. Не знаю каких размеров сделать фоновый рисунок, чтобы он нормально смотрелся на телефонах и на планшетах.

Есть предложения? Или мне обязательно нужно указать ширину и высоту itemа для телефонов и планшетов и уже под них делать фон? Как делают опытные разработчики? vector drawable пока не интересует

2
  • Эмм..., а текст коробка с карандашами... и проч. это тоже фон? Или фон только овал с синеньким?
    – Barmaley
    Commented 21 нояб. 2017 в 8:06
  • Фон это только овал. Тексты и иконка не нужна
    – Kolhoznik
    Commented 21 нояб. 2017 в 8:11

2 ответа 2

4

Такие штуки гораздо проще, быстрее и удобней делать в векторе. Что-бы нарисовать подобный фон, нужно буквально 2 минуты. На любых экранах будет выглядеть отлично и большинство проблем связанных с этим просто исчезают.

По ссылке можно скачать готовый .xml фон в векторе, срисованный с вашей картинки.

введите сюда описание изображения

КАК ЭТО СДЕЛАТЬ?

Шаг 1. В любом векторном редакторе, например Adobe Illustrator или CorelDraw, рисуете прямоугольник и настраиваете углы/заливку/градиент/прочее. С прямоугольниками это довольно просто, но для более сложных вещей, придется потратить пару часов на освоение базовых возможностей программы.

Шаг 2. Экспортируете результат в формате svg. Чтобы Android Studio правильно скушал ваш файл, его параметры должны быть следующими:

Стили - Атрибуты представления
Шрифт - SVG
Изображения - Встроить
ID объектов - Имена слоев
Точность - 2
Уменьшение файла - включено
Адаптивность - включено

Шаг 3. В Android Studio добавляете ваш файл через Vector Asset. Выбираете пункт Local file и указываете к нему путь. Нажимаете кнопку Finish - все готово, файл можно использовать.

СОВЕТЫ

Никогда не используйте обводку в svg. Если нужна обводка, то перед экспортом, переведите ее в кривые.

Не используйте растровые эффекты вроде теней или свечения. Их легко нарисовать вектором. Есть много туториалов на эту тему.

Если в вашем векторе используется простой линейный или круговой градиент, то лучше сохраните файл с обычной заливкой. А градиент настройте уже в Android Studio. Это позволит, при необходимости, быстро менять его цвета прямо в IDE. Вот здесь хорошо и понятно описывается работа с круговым градиентом. С линейным вообще все просто - startColor, centerColor, endColor.

Так можно делать не только с фоном для кнопок и айтемов. Любые иконки и кастомные элементы интерфейса сохраненные в векторе - очень сильно облегчают жизнь.

7
  • По ссылке layout разметка, товарищ :)
    – user194625
    Commented 19 дек. 2017 в 21:26
  • @Flippy, перепутал файл. Теперь все ок )
    – kulikovman
    Commented 19 дек. 2017 в 21:30
  • Ответу сильно не хватает инструкций о том, как самостоятельно сделать это в векторе. Мне вот, как не дизайнеру ваш ответ не поможет решить проблему)
    – ЮрийСПб
    Commented 19 дек. 2017 в 21:49
  • разве VectorDrawable поддерживает градиенты? вы на устройстве тестировали или как в проекте использовать предлагаете
    – pavlofff
    Commented 20 дек. 2017 в 2:30
  • @ЮрийСПб, вы правы, дополню ответ инструкцией.
    – kulikovman
    Commented 20 дек. 2017 в 4:39
3
+50

Для того чтобы фоновый рисунок нормально смотрелся на телефонах и на планшетах, лучше всего создать фоновое изображение квадратным. Размер будет зависеть от сложности изображения. Например если вы хотите создать кнопку с простым градиентом по краям, достаточно размера 100х100px, но внутри изображения нужно сделать отступ c каждой стороны в 2px, итого размер кнопки будет 98х98px.

Воспользуемся для работы сайтом https://romannurik.github.io/AndroidAssetStudio/nine-patches.html#&sourceDensity=320&name=example

Данный сайт обусловлен простотой и удобством использования, хотя в студии есть аналогичный инструмент, но, на мой взгляд, он менее удобен. Так что рассмотрим работу с изображением на этом сайте. Как только вы создали фоновое изображение, возьмите его и загрузите на сайт. Для этого достаточно перенести ваше изображение в центр экрана или нажать кнопку "Select image" и указать путь к вашему изображению.

Перетащите изображение на сайт

Далее вам необходимо настроить границы

введите сюда описание изображения

Установите границы примерно таким образом

введите сюда описание изображения

В правом блоке можно увидеть результат масштабирования. Обратите внимание, что текст вылезает за пределы вашего фонового изображения, для того чтобы этого избежать, следующим шагом нужно настроить границы контента.

введите сюда описание изображения

Как видите в правом блоке текст теперь находится внутри заданных границ.

введите сюда описание изображения

Осталось сохранить изображение, жмите на кнопку сохранить и сайт автоматически сохранит в необходимых размерах и запакует в zip архив.

введите сюда описание изображения

Внутри архива будет папка res, а внутри будут папки с изображением под необходимые размеры.

введите сюда описание изображения

0

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.