For RecyclerView items I use CardView. I would like to make each item in the list so.

enter image description here

The background picture is not a problem to prepare. I do not specify the size of CardView, I have specified match_parent and wrap_content. I do not know what size to make a background image, so that it looks normal on phones and tablets.

Any suggestions? Or do I have to specify the width and height of the item for phones and tablets and already make a background for them? How do experienced developers do? vector drawable is not interested yet

  • Um ..., and the text box with pencils ... and so on. is it a background too? Or background only oval with little blue? - Barmaley
  • The background is just an oval. Texts and icons are not needed - Kolhoznik

2 answers 2

In order for the background image to look normal on phones and tablets, it is best to create a square background image. The size will depend on the complexity of the image. For example, if you want to create a button with a simple gradient around the edges, a size of 100x100px is enough, but inside the image you need to indent from each side at 2px, the total size of the button will be 98x98px.

We’ll use https://romannurik.imtqy.com/AndroidAssetStudio/nine-patches.html#&sourceDensity=320&name=example to work with the site

This site is due to simplicity and ease of use, although the studio has a similar tool, but, in my opinion, it is less convenient. So consider the work with the image on this site. Once you have created the background image, take it and upload it to the site. To do this, simply move your image to the center of the screen or click the "Select image" button and specify the path to your image.

Drag the image to the site

Next you need to adjust the boundaries.

enter image description here

Set boundaries like this

enter image description here

In the right block you can see the result of scaling. Please note that the text climbs out of your background image, in order to avoid this, the next step is to adjust the borders of the content.

enter image description here

As you can see in the right block, the text is now inside the specified boundaries.

enter image description here

It remains to save the image, click on the save button and the site will automatically save in the required sizes and pack in a zip archive.

enter image description here

Inside the archive there will be a res folder, and inside there will be folders with an image for the required dimensions.

enter image description here

  • one
    Thanks for the answer - Kolhoznik

Such things are much easier, faster and more convenient to do in the vector . To draw a similar background, you need literally 2 minutes. It will look great on any screens and most of the problems associated with this simply disappear.

Under the link you can download a ready .xml background in vector, drawn from your picture.

enter image description here

HOW TO DO IT?

Step 1. In any vector editor, such as Adobe Illustrator or CorelDraw , draw a rectangle and adjust the corners / fill / gradient / other. With rectangles it is quite simple, but for more complex things, you have to spend a couple of hours to master the basic features of the program.

Step 2. Export the result in svg format. In order for Android Studio to properly eat your file, its parameters must be as follows:

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

Step 3. In Android Studio, add your file via Vector Asset . Select the item Local file and specify the path to it. Click the Finish button - everything is ready, the file can be used.

TIPS

Never use a stroke in svg . If you need a stroke, then before exporting, translate it into curves.

Do not use raster effects like shadows or glows. They are easy to draw vector. There are many tutorials on this topic.

If your vector uses a simple linear or circular gradient, it is better to save the file with a regular fill. And configure the gradient already in Android Studio . This will allow, if necessary, to quickly change its colors directly in the IDE . Here is a well and clearly described the work with a circular gradient. With linear everything is simple - startColor , centerColor , endColor .

This can be done not only with the background for buttons and items. Any icons and custom interface elements saved in a vector make life much easier.

  • According to the link layout layout, comrade :) - Flippy
  • @Flippy, messed up the file. Now everything is ok) - kulikovman
  • The answer greatly lacks instructions on how to do it yourself in the vector. Here, for me, if not the designer, your answer will not help to solve the problem) - Yuriy SPb ♦
  • Does VectorDrawable support gradients? did you test on the device or how do you suggest using the project ? pavlofff
  • @Yuriy SPb, you are right, I will supplement the answer with instructions. - kulikovman