Dialogfragment dynamic grow animation on image item click

Question

I created the recyclerview with grid layout manager. When any one clicks on the image thumbnail the image should be expanded to full screen in Dialogfragment which has view pager with the animation from the thumb clicked.

I have tried the different solution but not worked. The animation directly applied from the styles working but how to define the dynamic runtime animation.

I had tried the following but not working exactly.

Any idea on how to achieve this thing??

MediaFragment.java

@Override
public void onItemClick(View v, int position) {
    switch (v.getId()) {
        case R.id.llItemContainer:
            Bundle bundle = new Bundle();
            bundle.putInt(Constant.KEY_CURRENT_ITEM, position);
            dialogMediaProfileFragment = new DialogMediaProfileFragment();
            dialogMediaProfileFragment.setArguments(bundle);
            dialogMediaProfileFragment.show(getFragmentManager(), TAG);
            zoomImageFromThumb(v).start();
            break;
    }
}

private Animator zoomImageFromThumb(final View thumbView) {

    if (mCurrentAnimator != null) {
        mCurrentAnimator.cancel();
    }

    startBounds = new Rect();
    finalBounds = new Rect();
    Point globalOffset = new Point();

    thumbView.getGlobalVisibleRect(startBounds);
    rvMediaPost.getGlobalVisibleRect(finalBounds, globalOffset);
    startBounds.offset(-globalOffset.x, -globalOffset.y);
    finalBounds.offset(-globalOffset.x, -globalOffset.y);

    if ((float) finalBounds.width() / finalBounds.height() > (float) startBounds
            .width() / startBounds.height()) {
        // Extend start bounds horizontally
        startScale = (float) startBounds.height() / finalBounds.height();
        float startWidth = startScale * finalBounds.width();
        float deltaWidth = (startWidth - startBounds.width()) / 2;
        startBounds.left -= deltaWidth;
        startBounds.right += deltaWidth;
    } else {
        // Extend start bounds vertically
        startScale = (float) startBounds.width() / finalBounds.width();
        float startHeight = startScale * finalBounds.height();
        float deltaHeight = (startHeight - startBounds.height()) / 2;
        startBounds.top -= deltaHeight;
        startBounds.bottom += deltaHeight;
    }
    setAlpha(thumbView, 1f);
    //This shows the nullpointer exception

    /*setPivotX(dialogMediaProfileFragment.getView(), 0f);
    setPivotY(dialogMediaProfileFragment.getView(), 0f);*/

    AnimatorSet set = new AnimatorSet();
    set.play(
            ObjectAnimator.ofFloat(dialogMediaProfileFragment, "translationX",
                    startBounds.left, finalBounds.left))
            .with(ObjectAnimator.ofFloat(dialogMediaProfileFragment, "translationY",
                    startBounds.top, finalBounds.top))
            .with(ObjectAnimator.ofFloat(dialogMediaProfileFragment, "scaleX",
                    startScale, 1f))
            .with(ObjectAnimator.ofFloat(dialogMediaProfileFragment, "scaleY",
                    startScale, 1f));
    set.setDuration(mShortAnimationDuration);
    set.setInterpolator(new DecelerateInterpolator());
    set.addListener(new AnimatorListenerAdapter() {
        @Override
        public void onAnimationEnd(Animator animation) {
            mCurrentAnimator = null;
        }

        @Override
        public void onAnimationCancel(Animator animation) {
            mCurrentAnimator = null;
        }
    });
    return mCurrentAnimator = set;

}

private void setAlpha(View view, float alpha) {
    view.setAlpha(alpha);
}

private void setPivotX(View view, float x) {
    view.setPivotX(x);
}

private void setPivotY(View view, float y) {
    view.setPivotY(y);
}

Answer 1

@Jaymin Panchal,

You have to implement customize Android Activity Transition animation.

Also you can refer this code snippet for more on about your requirement.