We color icons from Google
Application design is a very important part of development. Google greatly simplifies it by providing about 150 ready-made icons, prepared for different pixel density, in free access. However, by default they are gray. This was done specifically to ensure that the designer himself painted them. But if we just want to give the icons some color, there is no point in editing each one separately. Simply write a script that does the work for us.
This article will present a small Java program that automatically paints all the icons in a given color, the algorithm by which it works, and also an archive of already colored icons that you can immediately use in your applications.
Immediately make a reservation - it is possible that the means of Adobe Illustrator can do everything that is written in the article and there are already ready-made scripts. But it is not under Linux and in general it is expensive. I think Linux users and free software supporters will appreciate my approach.
')
But the main advantage of such icons is when a programmer makes a program for himself, and he has no desire and time to do design. I want the program to look like everyone else, but at the same time provide some unique functions. For example, if you are a novice programmer and learn Android, it will be very useful in parallel with learning to develop some kind of your own program and demonstrate the knowledge gained in it. At the same time with the colored icons, it will look much better.
By the way, the icons are quite universal and can be used not only in the Action Bar.
The first problem I encountered is that there is no general overview of all the icons. Twenty minutes of programming - and the Java code is already ready, which goes over the catalogs and reads the icons from there, sticking them together into one common picture. Here she is:
Now let's try to color them. I will use Java for this purpose. No matter how abused she is, she provides many ready-made and working solutions. We will use awt - libraries for working with 2D graphics. The first thing I did was load the picture into the BufferedImage and go through each pixel, selecting its 4 components (ARGB). A quick analysis of the output showed that the picture essentially uses only one color - gray. And in those places where the image itself is smoothed out - the alpha channel is simply reduced.
On this basis, in order to color the icon, we only need to replace the gray color with the necessary color, without affecting the alpha channel. I tried to take a star and paint it blue, and then test it on my device - and it looked great there!
I think that most Android developers have had at least a little experience with desktop Java — compiling and running will not be difficult. In principle, everything is simple.
In addition, the idea arose to write a script that changes the existing large icon to different sizes with anti-aliasing and stuffs into folders for different pixel densities. If there are no ready and free scripts that do it in automatic mode, I will definitely write my own and lay out.
As it turned out in the comments, there is a site http://romannurik.imtqy.com/AndroidAssetStudio/index.html that colors the icons more conveniently and provides a bunch of other functions. True, he is obliged to specify a reciprocal link when used and does not know how to massively handle icons, so my approach also has some meaning.
This article will present a small Java program that automatically paints all the icons in a given color, the algorithm by which it works, and also an archive of already colored icons that you can immediately use in your applications.
Immediately make a reservation - it is possible that the means of Adobe Illustrator can do everything that is written in the article and there are already ready-made scripts. But it is not under Linux and in general it is expensive. I think Linux users and free software supporters will appreciate my approach.
')
Introduction
On developer.android.com, anyone can download an archive with design resources that, according to a statement in NOTICE.TXT , can be used without any restrictions. Among them are icons Action Bar Icons . Let's look at them in more detail. There are two sets - for themes Holo Light and Holo Dark . Accordingly, for the dark theme, the icons are white, and for the white one - gray. As I understand it, the source for the icons are in the format of Adobe Illustrator (* .ai). But for me, this program is too expensive, and indeed I am a supporter of free software. So we will color the already prepared png files, since their size has already been adjusted for different pixel density.What for?
Of course, a large company would be better to hire a professional designer who will draw unique icons from scratch. Or finish existing. However, if you make a small application to order - it makes no sense to introduce a new design. Android users are accustomed to the standard set of icons, to their outlines. It seems to me that you just need to give color to these outlines and please the user.But the main advantage of such icons is when a programmer makes a program for himself, and he has no desire and time to do design. I want the program to look like everyone else, but at the same time provide some unique functions. For example, if you are a novice programmer and learn Android, it will be very useful in parallel with learning to develop some kind of your own program and demonstrate the knowledge gained in it. At the same time with the colored icons, it will look much better.
What we have
Consider the gray set of icons in more detail. For each icon there are four versions corresponding to different pixel density. You only use the final name in the program - for example R.id.ic_action_important , and Android itself selects the desired folder. It is very convenient and looks amazing due to the fact that on screens for mobile devices ppi is much higher than on a regular monitor. The image seems smoother.By the way, the icons are quite universal and can be used not only in the Action Bar.
The first problem I encountered is that there is no general overview of all the icons. Twenty minutes of programming - and the Java code is already ready, which goes over the catalogs and reads the icons from there, sticking them together into one common picture. Here she is:
Now let's try to color them. I will use Java for this purpose. No matter how abused she is, she provides many ready-made and working solutions. We will use awt - libraries for working with 2D graphics. The first thing I did was load the picture into the BufferedImage and go through each pixel, selecting its 4 components (ARGB). A quick analysis of the output showed that the picture essentially uses only one color - gray. And in those places where the image itself is smoothed out - the alpha channel is simply reduced.
On this basis, in order to color the icon, we only need to replace the gray color with the necessary color, without affecting the alpha channel. I tried to take a star and paint it blue, and then test it on my device - and it looked great there!
Program
After working for some more time, I made a script that overtakes all the icons from the library in the specified color. True, the directory should contain only icons and folders - nothing more.I think that most Android developers have had at least a little experience with desktop Java — compiling and running will not be difficult. In principle, everything is simple.
Main.java
import javax.imageio.ImageIO; import java.awt.*; import java.awt.image.BufferedImage; import java.io.File; import java.util.ArrayList; import java.util.List; public class Main { static final int COLUMNS_COUNT = 15; static final String DIR_WITH_GRAY_IMAGES = "E:\\wsys\\prj\\ImagePainter\\test\\gray"; static final String OUTPUT_DIR = "E:\\wsys\\prj\\ImagePainter\\test"; static final Color myColor = new Color(177, 0, 140);//, static List<File> fileList = new ArrayList<>(); public static void main(String[] strings) throws Throwable { painter(); } private static void outputImages(File dir) { for (File subDir : dir.listFiles()) { if (subDir.getName().contains("hdpi")) { File pngFile = subDir.listFiles()[0]; fileList.add(pngFile); break; } if (subDir.isDirectory()) { outputImages(subDir); } } } private static void painter() throws Throwable { File dirWithImages = new File(DIR_WITH_GRAY_IMAGES); File outputDir = new File(OUTPUT_DIR); String nameFolder = Integer.toHexString(myColor.getRGB()); for (File subDir : dirWithImages.listFiles()) { for (File drawable : subDir.listFiles()) { System.out.println(drawable); for (File pngFile : drawable.listFiles()) { System.out.println(pngFile); BufferedImage okImage = handlePngFile(pngFile, myColor); String partPath = pngFile.getAbsolutePath().replace(dirWithImages.getAbsolutePath(), ""); File newPngPath = new File(outputDir.getAbsolutePath() + "\\" + nameFolder + "\\" + partPath); newPngPath.mkdirs(); ImageIO.write(okImage, "png", newPngPath); } } } File targetDir = new File(outputDir, "\\" + nameFolder); outputImages(targetDir); ImageIO.write(getComplexImage(), "png", new File(targetDir, "all.png")); } private static BufferedImage getComplexImage() { BufferedImage bufferedImage = new BufferedImage(800, 500, BufferedImage.TYPE_INT_ARGB); Graphics g = bufferedImage.getGraphics(); int i = 0; int j = 0; int counter = 0; try { for (File pngFile : fileList) { BufferedImage image = ImageIO.read(pngFile); g.drawImage(image, i, j, null); i += image.getWidth(); counter++; if (counter == COLUMNS_COUNT) { i = 0; counter = 0; j += image.getHeight(); } } } catch (Exception e) { e.printStackTrace(); } return bufferedImage; } private static BufferedImage handlePngFile(File pngFile, Color myColor) { try { BufferedImage image = ImageIO.read(pngFile); for (int i = 0; i < image.getWidth(); i++) { for (int j = 0; j < image.getHeight(); j++) { Color pixelColor = new Color(image.getRGB(i, j), true); int a = pixelColor.getAlpha(); //a += 50;// - if (pixelColor.getRed() != 0) { int r = myColor.getRed(); int g = myColor.getGreen(); int b = myColor.getBlue(); Color newColor = new Color(r, g, b, a); image.setRGB(i, j, newColor.getRGB()); } } } return image; } catch (Exception e) { e.printStackTrace(); } return null; } } Archive and conclusion
Laid out the icons already repainted in different colors - use for health! Or you can sort out the script and repaint it in the color that you specifically need. And do not forget that all the icons with the alpha channel, respectively, on a white background, they will look brighter than the color that you set for them.In addition, the idea arose to write a script that changes the existing large icon to different sizes with anti-aliasing and stuffs into folders for different pixel densities. If there are no ready and free scripts that do it in automatic mode, I will definitely write my own and lay out.
As it turned out in the comments, there is a site http://romannurik.imtqy.com/AndroidAssetStudio/index.html that colors the icons more conveniently and provides a bunch of other functions. True, he is obliged to specify a reciprocal link when used and does not know how to massively handle icons, so my approach also has some meaning.
Source: https://habr.com/ru/post/226307/
All Articles