A
A
Alexey2016-10-04 11:23:37
Android
Alexey, 2016-10-04 11:23:37

How to properly prepare icons for Android developer?

The guide shows the following:
style_icons_system_anatomy_clearance_are
I.e. the icon itself fits into a 24x24dp square, and then that square fits into a 48x48dp square. And when I cut it, it turned out that for mdpi the png size turned out to be 48x48dp with a 24x24dp icon inside it.
But then the encoder told me that when I inserted it into the application, the icon turned out to be small and said that these indents around the icon itself (Touch target) do not need to be done when slicing.
Attached icons.
120d3d8fee754d199023a193909b6ab8.png- this is what I gave to the encoder
02744b08cda84b6682fe21bd2ca9cf05.png- this is what I had to give him according to him

Answer the question

In order to leave comments, you need to log in

1 answer(s)
A
Alexey, 2016-10-04
@aheleha

Take a closer look at the guides from Google. In " Clearance " it says that the size of the icon itself is 24dp, and the Touch target is 48dp. Therefore, you are required to have a 24dp icon for different resolutions, and the programmer himself will make 12dp indents on all sides:

<ImageView
  android:id="@+id/iсon"
  android:layout_width="24dp"
  android:layout_height="24dp"
  android:padding="12dp" // отступы по краям
  android:src="@drawable/ic_search_white_24dp" 
/>

In general, it is recommended to use standard Google icons if possible. In your case, it's better to do so. Go to the Google site or materialdesignicons.com and download the archive with this icon for different resolutions. As a result, you will have 5 folders with all the necessary icons that you will give to the programmer.
If you have not found a suitable icon, then you can turn to an amazing resource . Upload your icon for maximum extension (xxxhdpi) with a size of 96x96 px. At the output, you will get 5 icons that are already in the right folders.
Thus, you will provide the programmer with all the necessary icons on a silver platter, and he will not swear at you.
Also, I think you're doing it wrong when you cut the icon right along with the background. It is more reasonable to pass an icon with a transparent background, and make the color of the icon itself white. Because if you change the color scheme of the application, you will have to redraw all the icons (change their background or color). In the code, you can add a couple of lines:
<ImageView
...
android:tint="@color/my_color_icon" // цвет иконки
android:background="@color/my_color_icon_background" // цвет фона иконки
/>
/>

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question