Android imitation wechat bottom gradient tab effect

Let's take a look at the renderings first

Except for the tab difference found in the third one, the other ones basically restore the gradient effect of the bottom tab of wechat

Each tab is a custom view. The color gradient effect is realized according to the tint attribute of ImageView. The use of tint attribute can be seen in my last article

I named the custom view shadeview, which contains four custom attributes

The meanings are icon, background color, bottom text and bottom text size

Shadeview is defined as follows. It mainly performs drawing operations and provides methods to change transparency and icons

Then declare the use in the layout file. You don't need to use every custom attribute here, because I also provide the default value

Because the main interface is viewpager, a fragment subclass is required here

The mainactivity code is as follows. The key point is to monitor the sliding of the viewpager and dynamically change the transparency alpha according to the sliding offset, so as to realize the color gradient effect

summary

The above is the gradient tab effect at the bottom of Android imitation wechat introduced by Xiaobian. I hope it will help you. If you have any questions, please leave me a message, and Xiaobian will reply to you in time. Thank you very much for your support for the programming tips website!