kciray Jun 16 2014 at 21:48

Раскрашиваем значки от гугла

5 min

20K

Java*Development for Android*

+16

Comments 18

alltiptop Jun 16 2014 at 22:30

Что только не делают, лишь бы svg не использовать.

Для каждого значка есть четыре версии, соответствующие разной плотности пикселей

попробуем их раскрасить. Я буду использовать для этих целей десктопную Java

Ни в коем случае не в огород автора (ведь решение работает и создано для конкретной реализации значков), но решение с вектором, поддерживающим стили, было-бы чуть-чуть проще.

kciray Jun 16 2014 at 22:41

Просто я подумал — раз гугл сам нарезал png для разных плотностей — значит это лучшее решение по каким-то причинам.

Конечно же одна векторная картинка будет более корректным решением. Где-нибудь есть эти же значки в виде png? Если есть векторные исходники для Adobe Illustrator — их наверняка можно как-то автоматически экспортировать.

alltiptop Jun 16 2014 at 23:01

Можно (могу) самому в принципе сделать. Если андроид в интерфейсе не умеет svg в принципе, то
а) маленький скрипт расторизации на imagemagic и запихивания по отдельным папкам
б) решение для андроида в виде расторизации перед представлением
в) поддержка svg в андроиде

kciray Jun 17 2014 at 13:02

Нашёл статью http://habrahabr.ru/company/twins/blog/166093/

Насколько я понял, в андроиде нет нативной поддержки SVG (ну кроме браузера, однако нас на данный момент не он интересует) для интерфейса. С помощью сторонних библиотек это можно сделать, но там, как видно из статьи, будут проблемы.

Если гугл нативно не поддерживает SVG — на это есть какие-то явные причины. Сколько я не читал статей и руководств — повсюду рекомендуют использовать растровые изображения разных размеров. Если автоматизировать процесс создания из одной картинки нескольких под разные плотности — всё не так трудно получается. Хотя надо не забывать, что это по-факту один размер под разные плотности пикселей, и он не растягивается.

alltiptop Jun 17 2014 at 15:13

Единственная причина, по которой вектор может не использоваться — чуть более требователен к ресурсам, так как в промежуточном этапе он расторизуется перед выводом. Но с характеристиками современных аппаратов, явой, веб-приложениями и прочим мне кажется это каплей в море. В самом начале оптимизация оправдывала себя, но, похоже, последние года 3 эту тему просто не затрагивали.

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

axeax Jun 17 2014 at 08:25

не говоря уж о css habrahabr.ru/post/223893/

eReS Jun 17 2014 at 12:43

А есть набор этих иконок в SVG? Где можно скачать?

vics001 Jun 17 2014 at 13:04

Есть поищите вот здесь romannurik.github.io/AndroidAssetStudio/ — исходники github.com/romannurik/AndroidAssetStudio

max_xt Jun 16 2014 at 23:02

Возможно кто-то еще не знает этого сайта http://romannurik.github.io/AndroidAssetStudio/index.html, но я давно все стандартные значки генерирую там.

kciray Jun 16 2014 at 23:19

Посмотрел, хороший сайт. В действительности, можно использовать его и тогда эта статья не имеет смысл, ну разве что предоставить ссылку на данный сайт.

Единственное что меня смутило — это
A minimal form of attribution would be to mention in your application's source project that some assets were created with the Android Asset Studio

А если я буду закрывать исходный код — буду ли я обязан в разделе «о программе» размещать ссылку на этот сайт?

max_xt Jun 16 2014 at 23:29

Статья имеет смысл, если нужно сразу много иконок в определенных цветах. По поводу ссылки на Asset Studio я думаю это просто признак хорошего тона, вряд ли кто-то будет преследовать вас за то что вы ее не добавите.

djvu Jun 17 2014 at 01:04

Более правильный способ «красить иконки» в Android в Runtime:

Добавить в проект исходные иконки в белом цвете (можно даже nine patch с черными краями, но сами иконки должны быть белыми).

Drawable coloredDrawable = Utils.getColoredDrawable(browserIcon.getContext(), R.drawable.ic_browser_chrome, SOME_COLOR);
browserIcon.setImageDrawable(coloredDrawable);

Где Utils.getColoredDrawable:

public static Drawable getColoredDrawable(Context context, int whiteDrawableResId, int targetColor) {
  Drawable drawable = context.getResources().getDrawable(whiteDrawableResId);
  ColorFilter filter = new LightingColorFilter(targetColor, 0);
  drawable.mutate().setColorFilter(filter);
  return drawable;
}

Вероятно, в версии Android <=2.1 вместо .mutate() придётся предварительно скопировать битмап в другую переменную прежде чем применять фильтр
```
Bitmap mutableBitmap = immutableBitmap.copy(Bitmap.Config.ARGB_8888, true);
```

Artem_zin Jun 17 2014 at 01:15

Сомнительно, что «более правильный способ» это красить иконки в рантайме, всё таки это время и ресурсы устройства. К тому же при верстке будет сложно, да и запаритесь вы каждую иконку сетить из кода.

Такой подход применим, если у вас есть разные темы в приложении и вы не хотите дублировать ресурсы для всех цветов, вот тогда да, конечно

ookami_kb Jun 17 2014 at 03:13

Да и в этом случае стоит их кэшировать при первом обращении.

Artem_zin Jun 17 2014 at 03:16

Согласен

lol2Fast4U Jun 17 2014 at 14:46

Я в рантайме красил, все летало даже на древнем HTC, на который Android собрали студенты (изначально Windows Mobile был) :D

Немного другой способ:

public static Bitmap colorize(final Bitmap image, final int color) {
Bitmap result = Bitmap.createBitmap(image.getWidth(), image.getHeight(), Bitmap.Config.ARGB_8888);
Canvas cnv = new Canvas(result);
Paint pnt = new Paint();
pnt.setFilterBitmap(false);
cnv.drawColor(color);
pnt.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
cnv.drawBitmap(image, 0, 0, pnt);
return result;
}

ivan4th Jun 17 2014 at 12:20

Я вот так попробовал через Image Magick + bash — вроде тот же результат:

color="#593001"
out="/tmp/out"
find . -name '*.png' | while read path; do
  mkdir -p "$out/$(dirname "$path")"
  convert "$path" -fill "$color" +opaque '#000000' "png32:$out/$path"
done

Красит все иконки, найденные в текущей папке и её подпапках, воспроизводя
структуру папок в /tmp/out — с раскрашенными иконками. Можно записать
в одну строку (через ';').

Несложно доработать до полноценной утилиты (color="$1", out="$2" и т.д.)

vovkab Jun 18 2014 at 09:06

Или как вариант можно сделать шрифт из svg.

Show the best of all time