8.3.11 Paint API - ColorFilter (Color Filter) (3-3)

Category Android Basic Tutorial

Introduction:

Well, I said I wouldn't write today, but I did, since I had some free time. This section introduces the third subclass of ColorFilter: PorterDuffColorFilter. Seeing PorterDuff should be familiar to you. If you've read the previous Android Basic Tutorial - 8.3.5 Paint API - Xfermode and PorterDuff Detailed Explanation (Part 2), the effects are the same, but here we use colors and set them directly. Below, we'll write a simple example where we take six different colors and test them against 18 modes!

Official API documentation: PorterDuffColorFilter. We can see that the key lies in its constructor:

The first parameter is the color, and the second is the mode. Let's write an example:

1. Test Code Example:

Run Effect Image:

Code Implementation:

Here, we use a GridView to hold them. First, let's write the layout for each item: view_item.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/img_show"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher" />

    <TextView
        android:id="@+id/tv_color"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:textSize="12sp"
        android:text="Color"
        android:textColor="#FFFFFFFF" />

    <TextView
        android:id="@+id/tv_mode"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="#FFD9ECFF"
        android:text="Mode"/>

</LinearLayout>

Next, we write a POJO business class: Data.java:

/**
 * Created by Jay on 2015/10/29 0029.
 */
public class Data {
    private int color;
    private PorterDuff.Mode mode;

    public Data() {
    }

    public Data(int color, PorterDuff.Mode mode) {
        this.color = color;
        this.mode = mode;
    }

    public int getColor() {
        return color;
    }

    public PorterDuff.Mode getMode() {
        return mode;
    }

    public void setColor(int color) {
        this.color = color;
    }

    public void setMode(PorterDuff.Mode mode) {
        this.mode = mode;
    }
}

For the Adapter class, we use a reusable custom BaseAdapter class, which we won't post here, but we need to add a method:

/**
 * Set ColorFilter
 */
public ViewHolder setColorFilter(int id, int color, PorterDuff.Mode mode) {
    View view = getView(id);
    if (view instanceof ImageView) {
        ((ImageView) view).setColorFilter(color, mode);
    }
    return this;
}

Next is our main layout file: activity_main.xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <GridView
        android:id="@+id/gd_show"
        android:background="#FF333333"
        android:numColumns="6"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

</LinearLayout>

Finally, our MainActivity.java class, which populates the data, sets the Adapter, and is very simple:

public class MainActivity extends AppCompatActivity {

    private GridView gd_show;
    private ArrayList<Data> items = null;
    private MyAdapter<Data> myAdapter = null;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        gd_show = (GridView) findViewById(R.id.gd_show);

        // Populate data, iterate through Mode modes:
        items = new ArrayList<Data>();
        for (PorterDuff.Mode mode : PorterDuff.Mode.class.getEnumConstants()) {
            items.add(new Data(0x77E50961, mode));
            items.add(new Data(0xFFE50961, mode));
            items.add(new Data(0x77FFFFFF, mode));
            items.add(new Data(0xFFFFFFFF, mode));
            items.add(new Data(0x77000000, mode));
            items.add(new Data(0xFF000000, mode));
        }
        myAdapter = new MyAdapter<Data>(items, R.layout.view_item) {
            @Override
            public void bindView(ViewHolder holder, Data obj) {
                holder.setColorFilter(R.id.img_show, obj.getColor(), obj.getMode());
                holder.setText(R.id.tv_color, String.format("%08X", obj.getColor()));
                holder.setText(R.id.tv_mode, obj.getMode().toString());
            }
        };
        gd_show.setAdapter(myAdapter);
    }
}

The animated GIF above might be too fast for some readers to check. Here are separate screenshots because I couldn't find a good full-screen capture tool...

2. Sample Code Download:

PorterDuffColorFilterDemo2.zip

Summary:

This section is very brief, as the API documentation only shows one usage. Here, we've listed all 18 cases, which should help everyone understand image blending. Thank you. Today, I took a day off and went back to school to feel like a student again, visited the library, saw a lot of beautiful women, and then felt nice. I've decided to temporarily stay in this company and be a good intern. Changing environments might not change anything; it's better to start by changing myself.

PS: Example taken from Github: ColorFilterTest

-1.0 Android Basic Tutorial

-1.0.1 2015年最新Android基础入门教程目录

-1.1 背景相关与系统架构分析

-1.2 开发环境搭建

-1.2.1 使用Eclipse + ADT + SDK开发Android APP -1.2.2 Developing Android Apps with Android Studio

-1.3 Solving SDK Update Issues

-1.4 Installing Genymotion Emulator

-1.5.1 Git Tutorial: Basic Operations on Local Repositories

-1.5.2 Using GitHub to Set Up a Remote Repository with Git

-1.6 How to Use the 9(Nine Sisters) Image

-1.7 Interface Prototype Design