Android ColorFilter を使う

Android フレームワークの Menu アイコンなど、用意されている画像の色だけを変えたい場合、ColorFilter が便利です。

ColorFilter を継承したクラスとして、ColorMatrixColorFilter, LightingColorFilter, PorterDuffColorFilter が用意されています。

ここでは、PorterDuffColorFilter を使ってみます。



■ ImageView で ColorFilter を使う

ImageView には、ColorFilter を設定するためのメソッドが用意されています。

　・public final void setColorFilter (int color) (Since: API Level 8)
　　　引数で指定された color で SRC_ATOP blending mode の
　　　PorterDuffColorFilter をかけます。

　・public void setColorFilter (ColorFilter cf)
　　　引数で指定された ColorFilter をかけます。

　・public final void setColorFilter (int color, PorterDuff.Mode mode)
　　　引数で指定された color と blending mode での
　　　PorterDuffColorFilter をかけます。

また、XML の属性として android:tint が用意されています。

　・android:tint="#rgb", "#argb", "#rrggbb", or "#aarrggbb"
　　　指定された color で SRC_ATOP blending mode の
　　　PorterDuffColorFilter をかけます。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:app="http://schemas.android.com/apk/res/yanzm.example.customview"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
    <ImageView
        android:id="@+id/imageview"
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:src="@android:drawable/ic_menu_camera"
        />
    <ImageView
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:src="@android:drawable/ic_menu_camera"
        android:tint="#ccff0000"
        />
</LinearLayout>

public class MainActivity extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        ImageView imageView = (ImageView)findViewById(R.id.imageview);
        imageView.setColorFilter(0xcc0000ff, PorterDuff.Mode.SRC_IN);
    }
}

■ Custom View で ColorFilter を使う

　上記で指摘したように、ImageView の android:tint では PorterDuff のモードが PorterDuff.Mode.SRC_ATOP に固定されてしまいます。そこで、PorterDuff のモードも attribute で指定できるようにした Custom View を作りました。

　　　ColorFilteredImageView.java


　yanzm/yanzm-s-Custom-View-Project - GitHub - の ColorFilteredImageViewSample がサンプルアプリです。

　こんな感じで使います。詳しくはサンプルアプリを見てください。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    xmlns:app="http://schemas.android.com/apk/res/yanzm.example.customview"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" 
        android:gravity="center_vertical"
        >
        <yanzm.products.customview.ColorFilteredImageView  
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" 
            android:src="@android:drawable/ic_menu_share"
            app:tint="#ccff00ff"        
            app:porterduff_mode="MULTIPLY"
            />
        <TextView
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" 
            android:text="ColorFilteredImageView\n    #ccff00ff  MULTIPLY"
            />
    </LinearLayout>
</LinearLayout>

　

　YanzmCustomView を Android Library Project にして使うこともできます。サンプルアプリでは、YanzmCustomView を Library Project として参照しています。

　Library Projectとして使う場合、

    xmlns:app="http://schemas.android.com/apk/res/yanzm.example.customview"

　部分の最後のパッケージ名には、Library Project を使う方のパッケージ名を入れてください。
　Library Project のパッケージ名にするとエラーになります。