Property animation on views behind RecyclerView using ItemTouchHelper.SimpleCallback

Question

I am trying to implement an animation on the views which is basically behind my RecyclerView. I am using ItemTouchHelper.SimpleCallback class to get the motion events on RecyclerView and overriding the callback method onChildDraw() to propagate the animation.

This animation is basically controlled by user swipe gestures. So here is my problem.

I have a RecyclerView with a email content on a card view. There are two images on the left and right side of the screen below that card view. It is something like this shown in the image inside this link:

CardView inside a RecyclerView with left and right images behind card view

Initially, Red and Pink images are invisible and will be animated on the amount of swipe on the white cardview. Now when I swipe on the white card view to the left and right hand side, the images in red and pink will be shown up by scale, alpha animation. Scale animation starts from 0.8 and alpha animation starts from 0 to 255. When these two animation finishes the Red and Pink images will be translated towards the direction of the swipe.

Here is my code:

public class ViewItemTouchHelperCallback extends ItemTouchHelper.SimpleCallback {

  private Context mContext;
  private OnViewSwipedListener mOnSwipeListener;

  public interface OnViewSwipedListener {
    void onViewSwiped(float dX);
  }

  public FocusViewItemTouchHelperCallback(int dragDirs, int swipeDirs, Context context, OnViewSwipedListener listener) {
    super(dragDirs, swipeDirs);
    this.mContext = context;
    this.mOnSwipeListener = listener;
  }

  @Override
  public boolean onMove(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, RecyclerView.ViewHolder target) {
    return false;
  }

  @Override
  public void onSwiped(RecyclerView.ViewHolder viewHolder, int swipeDir) {
    if(mContext instanceof ViewActivity) {
      if(viewHolder != null) {
        WebView webView = ((ViewAdapter.MailObjectHolder) viewHolder).webViewBody;
        if(webView != null) {
          webView.clearView();
          webView.loadUrl(Constants.ABOUT_BLANK);

          if(swipeDir == ItemTouchHelper.LEFT) {
            ((ViewActivity) mContext).onSwipedLeft();
          } else if(swipeDir == ItemTouchHelper.RIGHT) {
            ((ViewActivity) mContext).onSwipedRight();
          }
        }
      }
    }
  }

  @Override
  public void onChildDraw(Canvas canvas, RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, float dX, float dY, int actionState, boolean isCurrentlyActive) {
    if(actionState == ItemTouchHelper.ACTION_STATE_SWIPE) {
      if(mOnSwipeListener != null) {
        mOnSwipeListener.onViewSwiped(dX);
      }

      super.onChildDraw(canvas, recyclerView, viewHolder, dX, dY, actionState, isCurrentlyActive);
    }
  }
}

Below is my activity code where I get the callbacks from the above class:

    @Override
  public void onViewSwiped(float dX) {
    if(dX == 0) {
      mFlagEmailIcon.setVisibility(View.INVISIBLE);
      mNextEmailIcon.setVisibility(View.INVISIBLE);
    } else if(dX > 0) {
      //Left to right - flag email

      float swipedWidth = Math.abs(dX) / mFlagEmailIcon.getMeasuredWidth();
      if(swipedWidth >= 1) {
        LogUtils.log(TAG, "Left to right dX = " + dX + "and Swiped width = " + swipedWidth);
        mFlagEmailIcon.setVisibility(View.VISIBLE);
        float scaleChange = Math.scalb(Math.abs(dX) / mFlagEmailIcon.getMeasuredWidth(), 1);
        if(scaleChange >= 0.8 && scaleChange <= 1) {
          mFlagEmailIcon.animate().scaleX(scaleChange).scaleY(scaleChange);
        }

        mFlagEmailIcon.animate().alpha(scaleChange);
      } else {

      }
    } else {
      //Right to left - next email

      float swipedWidth = Math.abs(dX) / mNextEmailIcon.getMeasuredWidth();
      if(swipedWidth >= 1) {
        LogUtils.log(TAG, "Right to left dX = " + dX + "and Swiped width = " + swipedWidth);
        mNextEmailIcon.setVisibility(View.VISIBLE);
        float scaleChange = Math.scalb(Math.abs(dX) / mNextEmailIcon.getMeasuredWidth(), 1);
        if(scaleChange >= 0.8 && scaleChange <= 1) {
          mNextEmailIcon.animate().scaleX(scaleChange).scaleY(scaleChange);
        }

        mNextEmailIcon.animate().alpha(scaleChange);
      } else {

      }
    }
  }

In the above code, I am trying to animate the Red and Pink image based on the amount of user swipe on the white card view. But I am really stuck in the calculation based on "dX" and can't figure out how to calculate the values for animation.

Note:- When user swipes left to right on the card then Red image should be animated and when user swipes right to left on the card then Pink image should be animated. Animation will contain scale and alpha animation initially and when both animation finishes the Red or Pink image will start translating towards the direction of the swipe.

Can anyone help me to calculate the animation values based on user swipe. If you have any query related to this question, please ask. I am really stucked in this problem and there is no solution for this anywhere on the web.

Any help will be appreciated. Thanks in advance.