たくさんの画像リソースが公開されています.
【使える! 即保存】 github で公開されている Material design icons 一覧
どれもいいかんじです.
で, これ一覧で好きなアイコンを選んだあと,
zipをダウンロード/展開したあとどれを使ったらいいのか.
たとえば, 一覧で「error」アイコンを使おうとすると
こんなにある.
./alert/drawable-hdpi/ic_error_black_18dp.png ./alert/drawable-hdpi/ic_error_black_24dp.png ./alert/drawable-hdpi/ic_error_black_36dp.png ./alert/drawable-hdpi/ic_error_black_48dp.png ./alert/drawable-hdpi/ic_error_grey600_18dp.png ...(略)... ./alert/drawable-xxxhdpi/ic_error_red_48dp.png ./alert/drawable-xxxhdpi/ic_error_white_18dp.png ./alert/drawable-xxxhdpi/ic_error_white_24dp.png ./alert/drawable-xxxhdpi/ic_error_white_36dp.png ./alert/drawable-xxxhdpi/ic_error_white_48dp.png
ディレクトリの構造はこんなかんじになってる.
material-design-icons-master ├── action │ ├── drawable-hdpi │ │ ├── ic_error_red_18dp.png │ │ ├── ic_error_red_24dp.png │ │ ├── ic_error_red_36dp.png │ │ ├── ic_error_red_48dp.png │ ├── drawable-mdpi │ ├── drawable-xhdpi │ ├── drawable-xxhdpi │ ├── drawable-xxxhdpi
アイコンファイルを選択する他に
いくつか決めなければならないことがあったりします.
・dpi
・color
・dip
「色」は見て決めれるけども...
以下を見ながら, dip(サイズ/スケール) と
対象ファイル, 新しいファイル名を決める.
| Launcher | ic_launcher_***.png | 48dp |
| Action Bar | ic_menu_***.png | 32dp |
| Small/Contextual | ic_***.png | 16dp |
| Notification | ic_stat_notify_***.png | 24dp |
Iconography | Android Developers
細かくいろいろ区別できるのだろうけど,
Android Studioのプロジェクトデフォルトdpiの構成に
drawableディレクトリはとりあえず合わせよう.
res ├── drawable-hdpi │ └── ic_error.png ├── drawable-mdpi │ └── ic_error.png ├── drawable-xhdpi │ └── ic_error.png ├── drawable-xxhdpi │ └── ic_error.png
などとシコシコ手動でやってみたがめんどうなので
zip の展開後のディレクトリ構成とファイル名を
あらかじめ変更しておけば, フォルダごと上書きできそうなので
一括でスクリプトで以下に変更しておく.
{category}/drawable-{dpi}/ic_{name}_{color}_{dip}.png
↓
{category}/{name}/{color}/{dip}/drawable-{dpi}/ic_{name}.png
<?php
/**
Restructure dirs/files tree.
https://github.com/google/material-design-icons
Usage:
$ curl -LO https://github.com/google/material-design-icons/archive/master.zip
$ unzip material-design-icons-master.zip
$ ls
... material-design-icons-master ...
$ php restructure.php
{category}/drawable-{dpi}/ic_{name}_{color}_{dip}.png
-> {category}/{name}/{color}/{dip}/drawable-{dpi}/ic_{name}.png
~/material-design-icons-master_new $ tree .
.
├── action
│ ├── 3d_rotation
│ │ ├── black
│ │ │ ├── 18dp
│ │ │ │ ├── drawable-hdpi
│ │ │ │ │ └── ic_3d_rotation.png
│ │ │ │ ├── drawable-mdpi
│ │ │ │ │ └── ic_3d_rotation.png
│ │ │ │ ├── drawable-xhdpi
│ │ │ │ │ └── ic_3d_rotation.png
│ │ │ │ ├── drawable-xxhdpi
│ │ │ │ │ └── ic_3d_rotation.png
│ │ │ │ └── drawable-xxxhdpi
│ │ │ │ └── ic_3d_rotation.png
│ │ │ ├── 24dp
│ │ │ │ ├── drawable-hdpi
│ │ │ │ │ └── ic_3d_rotation.png
│ │ │ │ ├── drawable-mdpi
│ │ │ │ │ └── ic_3d_rotation.png
...
*/
foreach (glob('material-design-icons-master/*/*/*.png') as $file) {
if (is_file($file) && preg_match('@/drawable@', $file)) {
$path_parts = pathinfo($file);
$filename = $path_parts['filename'];
$dirs = explode('/', $path_parts['dirname']);
$category = $dirs[1];
$dip = substr($filename, strrpos($filename, '_') + 1);
$dpi = substr($dirs[2], strpos($dirs[2], '-') + 1);
$filename = substr($filename, 0, strpos($filename, '_' . $dip));
$name_color = substr($filename, strpos($filename, '_') + 1);
$color = substr($name_color, strrpos($name_color, '_') + 1);
$name = substr($name_color, 0, strpos($name_color, '_' . $color));
$path = sprintf('%s_new/%s/%s/%s/%s/drawable-%s/ic_%s.png',
$dirs[0], $category, $name, $color, $dip, $dpi, $name);
mkdir(dirname($path), 0777, true);
copy($file, $path);
echo $file . "\n";
echo '-> ' . $path . "\n";
}
}
構成変更後はこんなかんじに.
~/material-design-icons-master_new $ tree . . ├── action │ ├── 3d_rotation │ │ ├── black │ │ │ ├── 18dp │ │ │ │ ├── drawable-hdpi │ │ │ │ │ └── ic_3d_rotation.png │ │ │ │ ├── drawable-mdpi │ │ │ │ │ └── ic_3d_rotation.png │ │ │ │ ├── drawable-xhdpi │ │ │ │ │ └── ic_3d_rotation.png │ │ │ │ ├── drawable-xxhdpi │ │ │ │ │ └── ic_3d_rotation.png │ │ │ │ └── drawable-xxxhdpi │ │ │ │ └── ic_3d_rotation.png │ │ │ ├── 24dp │ │ │ │ ├── drawable-hdpi │ │ │ │ │ └── ic_3d_rotation.png │ │ │ │ ├── drawable-mdpi │ │ │ │ │ └── ic_3d_rotation.png ...
こうしておけば,
使いたいアイコンの色, 利用場所(dip) を考えながら,
GUI上でディレクトリごと上書きで,
IDE上の res ディレクトリ以下にコピーすればよい.
よくみると, IDE側の drawable-*** のディレクトリ名は微妙に違ってたりするが(笑)