Talking about Tint in Android Material Design

What is Tint

When I first came across the word Tint, I actually didn’t quite understand its meaning, and I wasn’t clear on the purpose of Google inventing it. It is usually used in conjunction with Background, but now that we already have Background, why do we still need Tint?

Tint translates to coloring.

Coloring, what color? It is related to the background, of course, the background color. When I develop a client and use the appcompat-v7 package, in order to achieve the effect of Material Design, we will set several colors in the theme, such as primaryColor, colorControlNormal, colorControlActived, etc., and some components we use, such as EditText, will automatically change to the background color we want. In the case of only one background image, this approach greatly reduces the size of our apk package.

The way to do this is to tint our background image with a color.
example:

Looking at the upcoming SegmentFault for Android 2.7, the issue feature, the color of this EditText is the same as our main color. It uses the TintManager class to color its background (green).
So what does this original graph look like? We found this graph from the appcompat-v7 package, which is a .9 graph and looks like this:

In fact, it is just a black bar, which is turned into a green bar by green coloring. It is this design method that saves us a lot of resource files in Material Design!

Okay, now that we understand the meaning of tint, let’s take a look at how all this is achieved.
In fact, the underlying layer is very simple. Those who have learned about rendering should know about PorterDuffColorFilter. We use the SRC_IN method to render the color of this Drawable, that is, where there are pixels in this Drawable, we use our filter to color it again.
In fact, if we want to implement it ourselves, we only need to get the backgroundDrawable of View and set the colorFilter.

Look at the core code, there are only a few lines

 if (filter == null ) {
 // Cache miss, so create a color filter and add it to the cache  
 filter = new PorterDuffColorFilter(color, mode);
 } 
 
 d.setColorFilter(filter);

Normally, our mode is usually SRC_IN. If you want to know more about this attribute, here is the portal: http://blog.csdn.net/t12x3456/article/details/10432935 (Chinese)

Because API Level 21 and before did not support background tint settings in XML, the ViewCompat.setBackgroundTintList method and ViewCompat.setBackgroundTintMode were provided to manually change the color that needs to be tinted, but the related View was required to inherit the TintableBackgroundView interface.
Source code analysis

Let's take a look at how the source code is implemented. Let's take AppCompatEditText as an example:
Look at the constructor (ignoring irrelevant code)

 public AppCompatEditText(Context context, AttributeSet attrs, int defStyleAttr) {
 super (TintContextWrapper.wrap(context), attrs, defStyleAttr); 
 
 ... 
 
 ColorStateList tint = a.getTintManager().getTintList(a.getResourceId( 0 , - 1 )); //Get the built-in tinting color based on the background's resource id.  
 if (tint != null ) {
 setInternalBackgroundTint(tint); //Set tint  
 } 
 
 ...
 } 
 
 private   void setInternalBackgroundTint(ColorStateList tint) {
 if (tint != null ) {
 if (mInternalBackgroundTint == null ) {
 mInternalBackgroundTint = new TintInfo();
 }
 mInternalBackgroundTint.mTintList = tint;
 mInternalBackgroundTint.mHasTintList = true ;
 } else {
 mInternalBackgroundTint = null ;
 }
 //The above code records tint related information.  
 applySupportBackgroundTint(); //Apply tint to the background  
 } 
 
 
 private   void applySupportBackgroundTint() {
 if (getBackground() != null ) {
 if (mBackgroundTint != null ) {
 TintManager.tintViewBackground( this , mBackgroundTint);
 } else   if (mInternalBackgroundTint != null ) {
 TintManager.tintViewBackground( this , mInternalBackgroundTint); //Most importantly, apply tint  
 }
 }
 } 
 
 Then we go to tintViewBackground and look at the source code in TintManager 
 
 public   static   void tintViewBackground(View view, TintInfo tint) {
 final Drawable background = view.getBackground();
 if (tint.mHasTintList) {
 //If tint is set, set PorterDuffColorFilter for the background  
 setPorterDuffColorFilter(
 background,
 tint.mTintList.getColorForState(view.getDrawableState(),
 tint.mTintList.getDefaultColor()),
 tint.mHasTintMode ? tint.mTintMode : null );
 } else {
 background.clearColorFilter();
 } 
 
 if (Build.VERSION.SDK_INT <= 10 ) {
 // On Gingerbread, GradientDrawable does not invalidate itself when it's ColorFilter  
 // has changed, so we need to force an invalidation  
 view.invalidate();
 }
 } 
 
 
 private   static   void setPorterDuffColorFilter(Drawable d, int color, PorterDuff.Mode mode) {
 if (mode == null ) {
 // If we don't have a blending mode specified, use our default  
 mode = DEFAULT_MODE;
 } 
 
 // First, lets see if the cache already contains the color filter  
 PorterDuffColorFilter filter = COLOR_FILTER_CACHE.get(color, mode); 
 
 if (filter == null ) {
 // Cache miss, so create a color filter and add it to the cache  
 filter = new PorterDuffColorFilter(color, mode);
 COLOR_FILTER_CACHE.put(color, mode, filter);
 } 
 
 // Most importantly, it turns out that setting colorFilter on the background drawable completes the function we want.  
 d.setColorFilter(filter);
 }

The above is compatible with API 21 and below.
If we want to implement our own AppCompat component to implement some features of tint, we can specify the ColorStateList and use TintManager to color our background. Of course, if we need to open the setting interface to the outside world, we also need to implement the TintableBackgroundView interface and then use ViewCompat.setBackgroundTintList to set it. This will achieve compatibility with all versions above v7.
Examples

For example, if I want to implement Tint support for a custom component, I only need to inherit it and add some code. The code is as follows (almost universal):

 public   class AppCompatFlowLayout extends FlowLayout implements TintableBackgroundView { 
 
 private   static   final   int [] TINT_ATTRS = {
 android.R.attr.background
 }; 
 
 private TintInfo mInternalBackgroundTint;
 private TintInfo mBackgroundTint;
 private TintManager mTintManager; 
 
 public AppCompatFlowLayout(Context context) {
 this (context, null );
 } 
 
 public AppCompatFlowLayout(Context context, AttributeSet attributeSet) {
 this (context, attributeSet, 0 );
 } 
 
 public AppCompatFlowLayout(Context context, AttributeSet attributeSet, int defStyle) {
 super (context, attributeSet, defStyle); 
 
 if (TintManager.SHOULD_BE_USED) {
 TintTypedArray a = TintTypedArray.obtainStyledAttributes(getContext(), attributeSet,
 TINT_ATTRS, defStyle, 0 );
 if (a.hasValue( 0 )) {
 ColorStateList tint = a.getTintManager().getTintList(a.getResourceId( 0 , - 1 ));
 if (tint != null ) {
 setInternalBackgroundTint(tint);
 }