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 をかけます。

view plainprint?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout  
3.     xmlns:app="http://schemas.android.com/apk/res/yanzm.example.customview"  
4.     xmlns:android="http://schemas.android.com/apk/res/android"  
5.     android:orientation="vertical"  
6.     android:layout_width="fill_parent"  
7.     android:layout_height="fill_parent"  
8.     >  
9.     <ImageView  
10.         android:id="@+id/imageview"  
11.         android:layout_width="wrap_content"   
12.         android:layout_height="wrap_content"   
13.         android:src="@android:drawable/ic_menu_camera"  
14.         />  
15.     <ImageView  
16.         android:layout_width="wrap_content"   
17.         android:layout_height="wrap_content"   
18.         android:src="@android:drawable/ic_menu_camera"  
19.         android:tint="#ccff0000"  
20.         />  
21. </LinearLayout>  

<?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>

view plainprint?

1. public class MainActivity extends Activity {  
2.     @Override  
3.     public void onCreate(Bundle savedInstanceState) {  
4.         super.onCreate(savedInstanceState);  
5.         setContentView(R.layout.main);  
6.   
7.         ImageView imageView = (ImageView)findViewById(R.id.imageview);  
8.         imageView.setColorFilter(0xcc0000ff, PorterDuff.Mode.SRC_IN);  
9.     }  
10. }  

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 がサンプルアプリです。

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

view plainprint?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout   
3.     xmlns:app="http://schemas.android.com/apk/res/yanzm.example.customview"  
4.     xmlns:android="http://schemas.android.com/apk/res/android"  
5.     android:layout_width="fill_parent"  
6.     android:layout_height="fill_parent"  
7.     >  
8.     <LinearLayout  
9.         android:orientation="horizontal"  
10.         android:layout_width="fill_parent"  
11.         android:layout_height="wrap_content"   
12.         android:gravity="center_vertical"  
13.         >  
14.         <yanzm.products.customview.ColorFilteredImageView    
15.             android:layout_width="wrap_content"   
16.             android:layout_height="wrap_content"   
17.             android:src="@android:drawable/ic_menu_share"  
18.             app:tint="#ccff00ff"          
19.             app:porterduff_mode="MULTIPLY"  
20.             />  
21.         <TextView  
22.             android:layout_width="wrap_content"   
23.             android:layout_height="wrap_content"   
24.             android:text="ColorFilteredImageView\n    #ccff00ff  MULTIPLY"  
25.             />  
26.     </LinearLayout>  
27. </LinearLayout>  

<?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として使う場合、

view plainprint?

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

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

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