ImageTransition

... is a small android library to transition between a circular ImageView from one Activity to a rectangular ImageView in the launched Activity.

Gradle dependency

compile 'com.appeaser.imagetransitionlibrary:imagetransitionlibrary:0.0.1'

Walkthrough

Following gif has been taken from the sample application available here: 

The transition has been slowed down for demo purposes.

Components

ImageTransition: Transition based on ChangeBounds that provides animation support between a circular and rectangular ImageView (implemented as TransitionImageView) residing in two different activities. Works on API version >= 21.

TransitionImageView: A modified version of Henning Dodenhof's CircleImageView. Transition animators are run on this widget.

ImageTransitionUtils: Provides SharedElementCallback that is used to set values accessed inImageTransition.

ImageTransitionCompat: under development Transition based on ChangeBounds that provides animation support between a circular and rectangular ImageView (implemented as TransitionImageView) residing in the same activity or fragment. Requires API version >= 14.

Usage

1. Use com.appeaser.imagetransitionlibrary.TransitionImageView in place of ImageView. The rounding value can be set using app:tiv_rounding attribute. Value must be within [0,1] - 0 for no rounding, 1 for perfect rounding. Set android:transitionName attribute.

Note: com.appeaser.imagetransitionlibrary.TransitionImageView only works with scaleType="centerCrop". This restriction has been inherited from Henning Dodenhof's CircleImageView.

1. Provide @transition/itl_image_transition as the value forandroid:windowSharedElementEnterTransition & android:windowSharedElementExitTransition under your Activity theme in styles.xml:

This should ideally be placed in your values-v21/styles.xml file. Refer to the sample app for an example.

1. In the second Activity's onCreate(Bundle) method, add the following line of code:

public class SecondActivity extends AppCompatActivity {

    ....
    ....

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        ....
        ....

        // SharedElementCallback needs be set in the second Activity.
        // See ImageTrainsitionUtil for more info.
        setEnterSharedElementCallback(ImageTransitionUtil.DEFAULT_SHARED_ELEMENT_CALLBACK);
    }

    ....
    ....

    @Override
    public void onBackPressed() {
        supportFinishAfterTransition();
        super.onBackPressed();
    }
}

The sample app shows this approach.

Note: ImageTransitionUtil.DEFAULT_SHARED_ELEMENT_CALLBACK can be used only when transitioning fromtiv_rounding="1" to tiv_rounding="0". If you're transitioning between any other values, use:

setEnterSharedElementCallback(ImageTransitionUtil
    .prepareSharedElementCallbackFor(_your start rounding value_, _your end rounding value_));

If you'd like to change the duration of the transition, or use the transition within your own set of transitions, or use a different interpolator, include the following:

....
    ........
    ....

The library declares its min SDK version as 14. If your app's minSdkVersion is set to a lower value, include the following in your app's manifest:

        ...
        ...