Image Transition


Source link: https://github.com/vikramkakkar/ImageTransition

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

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

  1. Provide @transition/itl_image_transition as the value for android:windowSharedElementEnterTransition & android:windowSharedElementExitTransition under your Activity theme in styles.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.

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

Resources

The utilities provided here allow for automatic unsubscription from sequences based on Activity or Fragment lifecycle events. This capability is useful in Android, where incomplete subscriptions can cause memory leaks.

With Carpaccio, your views became smarter, instead of calling functions on views, now your views can call functions! You no longer need to extend a view to set a custom behavior.

This Android project samples some Material Design-ish transitions for list items and floating action buttons. It uses the the shared element concept introduced in Android 5.0.

This library implements a color picker and a color preference for use in Android applications.

Batch uninstall Android apps using this very convenient script. Just supply a package name (or part of it) and the script will take care of the uninstallation.

Inspired by cwac-adapter, RecyclerAdapterWrapper allows you to add more functionalities into an existing RecyclerView.Adapter. The wrapper delegates all behaviors to the wrapped object, you just need to override the specific behaviors you need.

Topics


2D Engines   3D Engines   9-Patch   Action Bars   Activities   ADB   Advertisements   Analytics   Animations   ANR   AOP   API   APK   APT   Architecture   Audio   Autocomplete   Background Processing   Backward Compatibility   Badges   Bar Codes   Benchmarking   Bitmaps   Bluetooth   Blur Effects   Bread Crumbs   BRMS   Browser Extensions   Build Systems   Bundles   Buttons   Caching   Camera   Canvas   Cards   Carousels   Changelog   Checkboxes   Cloud Storages   Color Analysis   Color Pickers   Colors   Comet/Push   Compass Sensors   Conferences   Content Providers   Continuous Integration   Crash Reports   Credit Cards   Credits   CSV   Curl/Flip   Data Binding   Data Generators   Data Structures   Database   Database Browsers   Date &   Debugging   Decompilers   Deep Links   Dependency Injections   Design   Design Patterns   Dex   Dialogs   Distributed Computing   Distribution Platforms   Download Managers   Drawables   Emoji   Emulators   EPUB   Equalizers &   Event Buses   Exception Handling   Face Recognition   Feedback &   File System   File/Directory   Fingerprint   Floating Action   Fonts   Forms   Fragments   FRP   FSM   Functional Programming   Gamepads   Games   Geocaching   Gestures   GIF   Glow Pad   Gradle Plugins   Graphics   Grid Views   Highlighting   HTML   HTTP Mocking   Icons   IDE   IDE Plugins   Image Croppers   Image Loaders   Image Pickers   Image Processing   Image Views   Instrumentation   Intents   Job Schedulers   JSON   Keyboard   Kotlin   Layouts   Library Demos   List View   List Views   Localization   Location   Lock Patterns   Logcat   Logging   Mails   Maps   Markdown   Mathematics   Maven Plugins   MBaaS   Media   Menus   Messaging   MIME   Mobile Web   Native Image   Navigation   NDK   Networking   NFC   NoSQL   Number Pickers   OAuth   Object Mocking   OCR Engines   OpenGL   ORM   Other Pickers   Parallax List   Parcelables   Particle Systems   Password Inputs   PDF   Permissions   Physics Engines   Platforms   Plugin Frameworks   Preferences   Progress Indicators   ProGuard   Properties   Protocol Buffer   Pull To   Purchases   Push/Pull   QR Codes   Quick Return   Radio Buttons   Range Bars   Ratings   Recycler Views   Resources   REST   Ripple Effects   RSS   Screenshots   Scripting   Scroll Views   SDK   Search Inputs   Security   Sensors   Services   Showcase Views   Signatures   Sliding Panels   Snackbars   SOAP   Social Networks   Spannable   Spinners   Splash Screens   SSH   Static Analysis   Status Bars   Styling   SVG   System   Tags   Task Managers   TDD &   Template Engines   Testing   Testing Tools   Text Formatting   Text Views   Text Watchers   Text-to   Toasts   Toolkits For   Tools   Tooltips   Trainings   TV   Twitter   Updaters   USB   User Stories   Utils   Validation   Video   View Adapters   View Pagers   Views   Watch Face   Wearable Data   Wearables   Weather   Web Tools   Web Views   WebRTC   WebSockets   Wheel Widgets   Wi-Fi   Widgets   Windows   Wizards   XML   XMPP   YAML   ZIP Codes