【Android】アイコンの色をプログラムで設定する

by

N811_enogutoparetto_TP_V

こんにちは。Android開発担当の渡辺です。

弊社で開発しているECパンダというサービスでは、ECサイトの商品情報をWebAPIから取得して表示しているのですが、表示されるコンテンツをビルドする際の設定で変えられるような作りになっています。そうすることで、ネットショップのアプリを量産できるので、ショップオーナー様の新規のアプリ導入コストを低らすことをメリットとしています。

その際にコンテンツだけではなく、アイコンなどの色もお客様の希望の色にしたいといった要望も考えられます。背景色や文字色を設定するのは比較的容易ですが、すでに用意されているアイコンなどはどうでしょうか?

今回はカラーコードを用いてアイコンの色をプログラムでフィルターをかける方法をご紹介したいと思います。

元となる画像を用意する

今回は黒いアイコン画像を元にしてフィルターをかけていきます。

ic_favorite_black_48dp

レイアウトを作成

ImageViewに上記アイコン画像を設定します

スクリーンショット 2016-08-24 20.11.10

ImageViewを初期化して、フィルターをかける

色のフィルターをかけるにはColorFilterを使います。ImageViewのsetColorFilterで色だけ変更することができます。

        String red      = "#F44336";
        String blue     = "#2196F3";
        String yellow   = "#FFEB3B";
        
        ImageView image_1 = (ImageView) findViewById(R.id.image_favorite_1);
        image_1.setColorFilter(Color.parseColor(red), PorterDuff.Mode.SRC_IN);
        ImageView image_2 = (ImageView) findViewById(R.id.image_favorite_2);
        image_2.setColorFilter(Color.parseColor(blue), PorterDuff.Mode.SRC_IN);
        ImageView image_3 = (ImageView) findViewById(R.id.image_favorite_3);
        image_3.setColorFilter(Color.parseColor(yellow), PorterDuff.Mode.SRC_IN);

実行する

Screenshot (2016%2F08%2F24 20-45-20)

カラーコードが適応されました。

まとめ

今回は一つの画像をもとにカラーコードを指定して画像にフィルターをかけてみました。
画像にフィルターをかけることで画像のリソースを一つにすることができるのでアプリの用量を節約できますし、サーバーからカラーコードを取得する仕様にすれば遠隔でアプリ内のアイコンの色を変えたりといったことが実現できます。アプリ開発の要件に組み込んでみてはいかがでしょうか。

 

Ryo WATANABE
e.d.aのシステム開発事業部で主にAndroid開発担当。Androidフレームワークを使用したネイティブアプリが得意分野です。カンファレンスや勉強会にちょくちょく参加しながらOSSの開発トレンドにアンテナを張ってます。最近はiOS開発チームにもアサインされ、Swiftでコーディングすることも。

Egg Device Application

東京品川のスマホアプリ開発会社です。
一般アプリ、業務用アプリからVRまで開発可能。

ライター一覧

求人情報

スマホアプリ開発の
相談を受け付けています

メールでのご相談

お電話でのご相談
TEL 03-5422-7524
平日10:00~18:00