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 in ImageTransition
.
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
- Use com.appeaser.imagetransitionlibrary.TransitionImageView in place of ImageView. The
rounding
value can be set usingapp:tiv_rounding
attribute. Value must be within [0,1] - 0 for no rounding, 1 for perfect rounding. Setandroid:transitionName
attribute.
<com.appeaser.imagetransitionlibrary.TransitionImageView
android:id="@+id/image"
android:layout_width="80dp"
android:layout_height="80dp"
android:scaleType="centerCrop"
android:transitionName="@string/iv_transition_name"
app:tiv_rounding="0"/>
Note: com.appeaser.imagetransitionlibrary.TransitionImageView
only works with scaleType="centerCrop"
. This restriction has been inherited from Henning Dodenhof's CircleImageView.
- Provide
@transition/itl_image_transition
as the value forandroid:windowSharedElementEnterTransition
&android:windowSharedElementExitTransition
under your Activity theme instyles.xml
:
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <item name="colorPrimary">...</item>
<item name="colorPrimaryDark">...</item>
<item name="colorAccent">...</item>
....
....
<!-- @transition/itl_image_transition is provided by ImageTransition library -->
<item name="android:windowSharedElementEnterTransition">@transition/itl_image_transition</item>
<item name="android:windowSharedElementExitTransition">@transition/itl_image_transition</item> </style>
This should ideally be placed in your values-v21/styles.xml
file. Refer to the sample app for an example.
- 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 from tiv_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:
<transitionSet
xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="your interpolator">
....
....
<transition
class="com.appeaser.imagetransitionlibrary.ImageTransition"
android:duration="your duration" />
....
.... </transitionSet>
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:
<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
package="...">
<uses-sdk tools:overrideLibrary="com.appeaser.imagetransitionlibrary"/>
<application ...>
...
...
</application> </manifest>
API version requirements
For image transition between activities, version 21 or above is required. Under development For image transition within an activity, use ImageTransitionCompat
which works on API 14 and above. Note that ImageTransitionCompat
will not work if defined in XML.
Acknowledgements
As mentioned above, the library depends on Henning Dodenhof's CircleImageView, released under Apache Licence, version 2.0. Many thanks to Henning Dodenhof for open-sourcing their work.
The example app uses Picasso, released under Apache Licence, version 2.0.
License
Copyright (c) 2016 Vikram Kakkar Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.