Fade between images based on position of fragment

**All of the information below is with regards to the icons illustrated on the right side of the gif.

I have created a simple toolbar that has a button that changes the image based on the position of the fragment. Everything works fine, however, I can't seem to get the fading correctly. I want the images to fade nicely as the fragment changes. Right now, going from the center (position 1) to the left (position 0) has a nice fade. The icon changes from an equalizer to a chat icon. However, going back from left (position 0) to center (position 1) makes the image pop into frame (not a fade). Additionally the same is observed going from center (position 1) to the right (position 2) and vice versa. There is no fading in this case either.

I believe the issue is with the if else statements and the setAlpha.

• Position 0 (Left side)
• Position 1 (Center)
• Position 2 (Right side)

Gif Demo (What current code does):

https://imgur.com/a/vNEJZAJ

Code:

public class TopVariableFunctionalityButtonView extends FrameLayout implements ViewPager.OnPageChangeListener {

  // Initialize content
  private ImageView mVariableFunctionalityButtonImageView;
  private ImageView mVariableFunctionalityButtonBackgroundImageView;

  private ArgbEvaluator mArgbEvaluator;

  // Initialize color change
  private int mCenterVariableFunctionalityButtonColor;
  private int mSideVariableFunctionalityButtonColor;

  private int mCenterVariableFunctionalityButtonBackgroundColor;
  private int mSideVariableFunctionalityButtonBackgroundColor;

  public TopVariableFunctionalityButtonView(@NonNull Context context) {
    this(context, null);
  }

  public TopVariableFunctionalityButtonView(@NonNull Context context, @Nullable AttributeSet attrs) {
    this(context, attrs, 0);
  }

  public TopVariableFunctionalityButtonView(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    init();
  }

  public void setUpWithViewPager(ViewPager viewPager) {
    viewPager.addOnPageChangeListener(this);

    mVariableFunctionalityButtonImageView.setOnClickListener(new OnClickListener() {
      @Override
      public void onClick(View view) {
        if (viewPager.getCurrentItem() == 2)
          HomeActivity.openSettings(getContext());
      }
    });
  }

  private void init() {
    LayoutInflater.from(getContext()).inflate(R.layout.view_top_variable_functionality_button, this, true);

    // Initialize top variable functionality button image
    mVariableFunctionalityButtonImageView = findViewById(R.id.view_top_variable_functionality_button_image_view);

    // Initialize top variable functionality button image background
    mVariableFunctionalityButtonBackgroundImageView = findViewById(R.id.view_top_variable_functionality_button_background_image_view);


    // Set start color and end color for button icons
    mCenterVariableFunctionalityButtonColor = ContextCompat.getColor(getContext(), R.color.white);
    mSideVariableFunctionalityButtonColor = ContextCompat.getColor(getContext(), R.color.iconColor);

    mCenterVariableFunctionalityButtonBackgroundColor = ContextCompat.getColor(getContext(), R.color.transparentSearch);
    mSideVariableFunctionalityButtonBackgroundColor = ContextCompat.getColor(getContext(), R.color.secondaryColor);

    // Evaluate the difference between colors
    mArgbEvaluator = new ArgbEvaluator();
  }

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

    if (position == 0) {

      // Change color of icons based on view
      setColor(1 - positionOffset);

      // Change variable button image
      mVariableFunctionalityButtonImageView.setAlpha(1 - positionOffset);
      mVariableFunctionalityButtonImageView.setBackgroundResource(R.drawable.ic_chat);

    } else if (position == 1) {

      // Change color of icons based on view
      setColor(positionOffset + 1);

      // Change variable button image
      mVariableFunctionalityButtonImageView.setAlpha(positionOffset + 1);
      mVariableFunctionalityButtonImageView.setBackgroundResource(R.drawable.ic_equalizer);

    } else if (position == 2) {

      // Change color of icons based on view
      setColor(positionOffset + 1);

      // Change variable button image
      mVariableFunctionalityButtonImageView.setAlpha(positionOffset + 1);
      mVariableFunctionalityButtonImageView.setBackgroundResource(R.drawable.ic_settings);

    }
  }

  @Override
  public void onPageSelected(int position) {

  }

  @Override
  public void onPageScrollStateChanged(int state) {

  }

  private void setColor(float fractionFromCenter) {
    int variableFunctionalityButtonColor = (int) mArgbEvaluator.evaluate(fractionFromCenter,
      mCenterVariableFunctionalityButtonColor, mSideVariableFunctionalityButtonColor);
    int variableFunctionalityButtonBackgroundColor = (int) mArgbEvaluator.evaluate(fractionFromCenter,
      mCenterVariableFunctionalityButtonBackgroundColor, mSideVariableFunctionalityButtonBackgroundColor);

    mVariableFunctionalityButtonImageView.setColorFilter(variableFunctionalityButtonColor);
    mVariableFunctionalityButtonBackgroundImageView.setColorFilter(variableFunctionalityButtonBackgroundColor);
  }
}

from Fade between images based on position of fragment