SoFunction
Updated on 2025-04-05

Android imitation WeChat bottom button slides and changes color

Android imitation WeChat’s bottom button slides and changes color. Here, it only provides a simple explanation of color change when sliding operations using Fragment as Tab pages.

First, let’s talk about the OnPageChangeListener monitor

//There are three methods for listeningpublic abstract void onPageScrollStateChanged (int state) 

public abstract void onPageScrolled (int position, float positionOffset, int positionOffsetPixels) 

public abstract void onPageSelected (int position) 

//The parameter state in the first method onPageScrollStateChanged has three desirable values
public static final int SCROLL_STATE_DRAGGING 
Constant Value: 1 (0x00000001) //When the finger is sliding on the ViewPager
public static final int SCROLL_STATE_IDLE 
Constant Value: 0 (0x00000000) //After the finger is released, the ViewPager will automatically slide during the period
public static final int SCROLL_STATE_SETTLING 
Constant Value: 2 (0x00000002) //ViewPager enters a page
//If you output the value of state in onPageScrollStateChanged, you will find that "1---2--0" is printed out in order every time
//The three parameters of the second method onPageScrolled
position://When sliding, the first page displayed on the left side of the screen
positionOffset://The sliding ratio, the range of the value is [0, 1), the finger slides to the left, the value increases, otherwise it decreases
positionOffsetPixels://The sliding distance is related to the screen. If you slide your finger to the left, the value will increase or decrease.
//We often need to check the sliding direction of the viewpager and do some operations. At this time, you only need to use position and positionOffset to achieve this function.
//For example, when you realize the color gradient of the icon at the bottom of WeChat, slide to the left
ChangeColorIconWithTextView left = (position); //Initialization of the bottom icon and text on the first page displayed on the leftChangeColorIconWithTextView right = (position + 1); //Initialization of the icon and text at the bottom of the Page displayed on the right
(1 - positionOffset); //Set the transparency of the icon. The positionOffset value is incremented. The color of the icon on the left becomes lighter.(positionOffset); //The color of the icon on the right gradually becomes darker
//The three parameters of the third method onPageSelected
position://The currently selected page number
//The time when this method is called is quite special. After 2 of "1---2--0" in the first method above is executed, onPageSelected is executed, and then 0 of "1---2--0" is executed.  That is, after the finger releases the screen, onPageSelected is executed.

The ChangeColorIconWithTextView main class mentioned above

package ;

import ;
import ;
import ;
import ;
import ;
import ;
import ;
import ;
import ;
import ;
import ;
import ;
import ;
import ;
import ;
import ;
import ;

import ;


/**
  * This class is used to modify the color gradient
  */
public class ChangeColorIconWithTextView extends View {

  private Bitmap mBitmap;
  private Canvas mCanvas;
  private Paint mPaint;
  /**
    * color
    */
  private int mColor = 0XFF07B7C4;
  /**
    * Transparency 0.0-1.0 Initialization must be 0. If it is not 0, it will be scrapped
    */
  private float mAlpha = 0f;
  /**
    * icon
    */
  private Bitmap mIconBitmap;
  /**
    * Limit the scope of drawing icons
    */
  private Rect mIconRect;
  /**
    * icon bottom text
    */
  private String mText = "WeChat";
  private int mTextSize = (int) (
      TypedValue.COMPLEX_UNIT_SP, 10, getResources().getDisplayMetrics());
  private Paint mTextPaint;
  private Rect mTextBound = new Rect();

  public ChangeColorIconWithTextView(Context context) {
    super(context);
  }

  /**
    * Initialize custom attribute values
    *
    * @param context
    * @param attrs
    */
  public ChangeColorIconWithTextView(Context context, AttributeSet attrs) {
    super(context, attrs);

    // Get the settings icon    TypedArray a = (attrs,
        );

    int n = ();
    for (int i = 0; i < n; i++) {

      int attr = (i);
      switch (attr) {
      case .ChangeColorIconView_icon:
        BitmapDrawable drawable = (BitmapDrawable) (attr);
        mIconBitmap = ();
        break;
      case .ChangeColorIconView_color:
        mColor = (attr, 0x07B7C4);
        break;
      case .ChangeColorIconView_text:
        mText = (attr);
        break;
      case .ChangeColorIconView_text_size:
        mTextSize = (int) (attr, TypedValue
            .applyDimension(TypedValue.COMPLEX_UNIT_SP, 10,
                getResources().getDisplayMetrics()));
        break;

      }
    }

    ();

    mTextPaint = new Paint();
    (mTextSize);
    (0xff07B7C4);
    (true); 
    // Get text drawing range    (mText, 0, (), mTextBound);

  }

  @Override
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    (widthMeasureSpec, heightMeasureSpec);

    // Get the width of the drawing icon    int bitmapWidth = (getMeasuredWidth() - getPaddingLeft()
        - getPaddingRight(), getMeasuredHeight() - getPaddingTop()
        - getPaddingBottom() - ());

    int left = getMeasuredWidth() / 2 - bitmapWidth / 2;
    int top = (getMeasuredHeight() - ()) / 2 - bitmapWidth
        / 2;
    // Get the width of the drawing icon    mIconRect = new Rect(left, top, left + bitmapWidth, top + bitmapWidth);

  }

  @Override
  protected void onDraw(Canvas canvas) {

    int alpha = (int) ((255 * mAlpha));
    (mIconBitmap, null, mIconRect, null);
    setupTargetBitmap(alpha);
    drawSourceText(canvas, alpha);
    drawTargetText(canvas, alpha);
    (mBitmap, 0, 0, null);

  }

  private void setupTargetBitmap(int alpha) {
    mBitmap = (getMeasuredWidth(), getMeasuredHeight(),
        Config.ARGB_8888);
    mCanvas = new Canvas(mBitmap);
    mPaint = new Paint();
    (mColor);
    (true);
    (true);
    (alpha);
    (mIconRect, mPaint);
    (new PorterDuffXfermode(.DST_IN));
    (255);
    (mIconBitmap, null, mIconRect, mPaint);
  }

  /**
    * Transparency 255
    *
    * @param canvas
    * @param alpha
    */
  private void drawSourceText(Canvas canvas, int alpha) {
    (mTextSize);
    (0x00333333);
    (255 - alpha);
    (mText,  + () / 2
        - () / 2,
         + (), mTextPaint);
  }

  private void drawTargetText(Canvas canvas, int alpha) {
    (mColor);
    (alpha);
    (mText,  + () / 2
        - () / 2,
         + (), mTextPaint);

  }

  public void setIconAlpha(float alpha) {
     = alpha;
    invalidateView();
  }

  private void invalidateView() {
    if (() == ()) {
      invalidate();
    } else {
      postInvalidate();
    }
  }

  public void setIconColor(int color) {
    mColor = color;
  }

  public void setIcon(int resId) {
     = (getResources(), resId);
    if (mIconRect != null)
      invalidateView();
  }

  public void setIcon(Bitmap iconBitmap) {
     = iconBitmap;
    if (mIconRect != null)
      invalidateView();
  }

  private static final String INSTANCE_STATE = "instance_state";
  private static final String STATE_ALPHA = "state_alpha";

  @Override
  protected Parcelable onSaveInstanceState() {
    Bundle bundle = new Bundle();
    (INSTANCE_STATE, ());
    (STATE_ALPHA, mAlpha);
    return bundle;
  }

  @Override
  protected void onRestoreInstanceState(Parcelable state) {
    if (state instanceof Bundle) {
      Bundle bundle = (Bundle) state;
      mAlpha = (STATE_ALPHA);
      ((INSTANCE_STATE));
    } else {
      (state);
    }
  }
}

Implement monitoring operations in Activity

@Override
  public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    if (positionOffset > 0) {
      ChangeColorIconWithTextView left = (position);
      ChangeColorIconWithTextView right = (position + 1);

      (1 - positionOffset);
      (positionOffset);
    }
  }

Define a collection to load all color-changing controls into

private List<ChangeColorIconWithTextView> mTabIndicator = new ArrayList<ChangeColorIconWithTextView>();

private void initTabIndicator() {
    ChangeColorIconWithTextView one = (ChangeColorIconWithTextView) findViewById(.id_indicator_one);
    ChangeColorIconWithTextView two = (ChangeColorIconWithTextView) findViewById(.id_indicator_two);
    ChangeColorIconWithTextView three = (ChangeColorIconWithTextView) findViewById(.id_indicator_three);
    ChangeColorIconWithTextView four = (ChangeColorIconWithTextView) findViewById(.id_indicator_four);

    (one);
    (two);
    (three);
    (four);

    (this);
    (this);
    (this);
    (this);

    (1.0f);
  }

Click to listen

@Override
  public void onClick(View v) {

    resetOtherTabs();

    switch (()) {
    case .id_indicator_one:
      (0).setIconAlpha(1.0f);
      (0, false);
      break;
    case .id_indicator_two:
      (1).setIconAlpha(1.0f);
      (1, false);
      break;
    case .id_indicator_three:
      (2).setIconAlpha(1.0f);
      (2, false);
      mAppContext.has_new_talk = false;

      break;
    case .id_indicator_four:
      (3).setIconAlpha(1.0f);
      (3, false);
      break;

    }
  }

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.