Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/vikramkakkar/ImageTransition

A small android library to transition between a circular ImageView from one Activity to a rectangular ImageView in the launched Activity.
https://github.com/vikramkakkar/ImageTransition

Last synced: 1 day ago
JSON representation

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

Host: GitHub
URL: https://github.com/vikramkakkar/ImageTransition
Owner: vikramkakkar
License: apache-2.0
Created: 2016-10-11T15:37:44.000Z (over 7 years ago)
Default Branch: master
Last Pushed: 2016-10-18T09:57:23.000Z (over 7 years ago)
Last Synced: 2024-02-29T01:35:06.127Z (4 months ago)
Language: Java
Homepage:
Size: 11.3 MB
Stars: 634
Watchers: 15
Forks: 55
Open Issues: 6
Metadata Files:
- Readme: README.md
- License: LICENSE

Lists

awesome-github-android-ui - ImageTransition - Activity视图过渡 (ImageView)
awesome-github-android-ui - ImageTransition - Activity视图过渡 (ImageView)

README

# 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: [][1]

The transition has been slowed down for demo purposes.

Components
----------

**ImageTransition:** [Transition](https://developer.android.com/reference/android/transition/Transition.html) based on [ChangeBounds](https://developer.android.com/reference/android/transition/ChangeBounds.html) 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](https://github.com/hdodenhof/CircleImageView). Transition animators are run on this widget.

**ImageTransitionUtils:** Provides [SharedElementCallback](https://developer.android.com/reference/android/support/v4/app/SharedElementCallback.html) that is used to set values accessed in `ImageTransition`.

**ImageTransitionCompat:** *under development* [Transition](https://developer.android.com/reference/android/support/transition/Transition.html) based on [ChangeBounds](https://developer.android.com/reference/android/support/transition/ChangeBounds.html) 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](https://github.com/hdodenhof/CircleImageView).

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

```

....
....

<item name="android:windowSharedElementEnterTransition">@transition/itl_image_transition</item>
<item name="android:windowSharedElementExitTransition">@transition/itl_image_transition</item>

```

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

3. 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:

```

....
....

```

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:

```

...
...

```

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](https://github.com/hdodenhof/CircleImageView), released under Apache Licence, version 2.0. Many thanks to Henning Dodenhof for open-sourcing their work.

The example app uses [Picasso](http://square.github.io/picasso/), released under Apache Licence, version 2.0.

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.

[1]: https://play.google.com/store/apps/details?id=com.appeaser.imagetransition