Android Colorfilter and Tint

Overview

The relationship between Android Colorfilter and tint has been confusing. Both are coloring or filtering the displayed picture.

Colorfilter: Color Filter
Tint: Coloring

From the original meaning of English, it seems similar, and from the actual effect is consistent. The Android Wizard document seems to be a bit of a stroke too, unwilling to go deep, people are somewhat puzzled:

With Android 5.0 (API level) and above, you can tint bitmaps and nine-patches defined as alpha masks. Can tint them with color resources or theme attributes this resolve to color sources (for example,? android:attr/color Primary). Usually, you create these assets only once and color them automatically to match your theme.

You can apply a tint to bitmapdrawable or ninepatchdrawable objects with the setTint() method. You can also set the tint color and mode in your layouts with the android:tint and android:tintMode attributes.

This text tells the main idea is: Tint is added after API 21, you can apply Tint effects to bitmapdrawable and ninepatchdrawable. Using the tint effect can save us the hassle of creating multiple versions of the same picture for different theme. The second paragraph is followed by a sermon on how to use tint in two ways:

1 Calling the function:

 class Drawable {     ...     publicvoidsetTint (int tint);                       //Added in API 21     publicvoidsetTintMode (PorterDuff.Mode tintMode);   //Added in API 21     ...}

2 XML Layout:

drawable file Location:res/drawable/tintedrawable.xml

<nine-path xmlns:android="http://schemas.android.com/apk/res/android"    android:src="@drawable/rawdrawable"    android:tint="@color/what_ever_color"    android:tintMode="multiply" />

Layout file Location:res/layout/layout_main.xml

<View    android:id="@+id/my_view_id"    android:layout_width="20dp"    android:layout_height="10dp"    android:background="@drawable/tintedrawable"/>

ImageView and Tint

class ImageView {public  final  void   Setcolorfilter  (int  color, porterduff.mode Mode);    //added in API 1  public  void  setimagetintlist                  (Colorstatelist tint);    //added in API  public  void  setimagetintmode             (Porterduff.mode Tintmode); //added in API }  

In addition to ImageView can continue to use setColorFilter(int, PorterDuff.Mode), API 21 also added to ImageView setimagetintlist (), Setimagetintmode (), Android:tint, Android:tintmode and other features!

First we look at a sample and give a imageview using these three different methods to color.

        <!--method One uses Setcolorfilter --        <TextViewandroid:layout_width="Wrap_content"android:layout_height= "Wrap_content" Android:text="Setcolorfilter" />                                            <ImageViewandroid:id="@+id/image1"android:layout_width="200DP"  android:layout_height="50DP"android:layout_gravity="Center_horizontal"  android:src= "@drawable/rawdrawable"android:scaletype="Fitxy"/ >                                                                                <!--method Two uses Setimagetintlist --        <textview  android:layout _width  = "wrap_content"  android:layout_height  = "wrap_content"  android:text  = "setimagetintlist" />         <ImageViewandroid:id="@+id/image2"android:layout_width="200DP"  android:layout_height="50DP"android:layout_gravity="Center_horizontal"  android:src= "@drawable/rawdrawable"android:scaletype="Fitxy"/ >                                                                                <!--method Three uses XML Android:tint property --        <textview  android:layout _width  = "wrap_content"  android:layout_height  = "wrap_content"  android:text  = "Android:tint" />         <imageview  android:id= "@+id/image3"  android:layout_width  =
      
        "200DP" 
       android:layout_height  =" 50DP " android:layout_gravity  =" cen Ter_horizontal " android:src  =" @drawable/rawd            Rawable " android:scaletype  =" Fitxy " android:tint  = "#673AB7"  android:tintmode  = "multiply" /> 

    @Override     PublicViewOncreateview(Layoutinflater inflater, ViewGroup container, Bundle savedinstancestate) {View v = inflater.inflate (r.layout.tinting_fragment,NULL);        MImage1 = (ImageView) V.findviewbyid (r.id.image1);        MImage2 = (ImageView) V.findviewbyid (r.id.image2); Updatetint (Color.argb (0xFF,0x67,0x3A,0xb7), PorterDuff.Mode.MULTIPLY); } Public void Updatetint(intColor, Porterduff.mode mode) {mimage1.setcolorfilter (color, mode);        Mimage2.setimagetintlist (colorstatelist.valueof (color));    Mimage2.setimagetintmode (mode); }

As you can see, the end result is the same for ImageView regardless of the method used.

We see that we ImageView.setImageTintList(ColorStateList) actually accept a colorstatelist parameter, above our android:tint="#673AB7" tint value is a single color, if changed to colorstatelist that effect?

1 res/color/custom_tint.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">    <!-- Pressed state -->    <item android:color="#ff0000" android:state_pressed="true" />    <!-- Default -->    <item android:color="#4aff48" /></selector>

2 Res/layout/layout_main.xml

 <ImageView            android:id="@+id/image3"            android:clickable="true"            android:layout_width="200dp"            android:layout_height="50dp"            android:layout_gravity="center_horizontal"            android:src="@drawable/rawdrawable"            android:scaleType="fitXY"            android:tint="@color/custom_tint"            android:tintMode="multiply"/>

When you click on the bottom ImageView, the color does not change as the state changes. Then we change the ImageView to ImageButton:

 <ImageButton            android:id="@+id/image3"            android:layout_width="200dp"            android:layout_height="50dp"            android:layout_gravity="center_horizontal"            android:src="@drawable/rawdrawable"            android:scaleType="fitXY"            android:tint="@color/custom_tint"            android:tintMode="multiply"/>

Drawable and Tint

It is clear in the documentation that the introduction of tint is to support the coloring of drawable. Support and attributes are clearly specified for bitmapdrawable and ninepatchdrawable documents at least android:tint android:tintMode . In this case android:tint , our support for attributes is easily extended from ImageView to any view, as long as the view is directed to android:background our custom drawable:

1 res/drawable/tintedrawable.xml

<bitmap xmlns="http://schemas.android.com/apk/res/android"    android:src="@drawable/background_image"    android:tint="@color/custom_tint"    android:tintMode="multiply" />

2 Res/layout/layout_main.xml

<View            android:id="@+id/image"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_gravity="center_horizontal"            android:background="@drawable/tintedrawable"/>

But as with the above problem, using this approach does not support multi-state scenarios. And if we change the view in XML layout to ImageButton and android:background change android:src it to a problem, it will be solved:

<ImageButton            android:id="@+id/image"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_gravity="center_horizontal"            android:src="@drawable/tintedrawable"            android:scaleType="centerInside"/>

The above two pictures are the effects of ImageButton coloring in the default state and pressed state respectively. If you switch to a different view, the red color will not appear, but it will still have a green tint.

Through the above analysis, it is found that the support for tint to automatically change the coloring color in each state is still limited to ImageButton, here perhaps we can fix this problem by customizing the view, but if we can do the native support of the system is certainly better, Readers are expected to provide a better approach.

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Android Colorfilter and Tint