Allows the easy creation of animated transition effects when the state of Android UI has changed

Overview

android-transition

Android Arsenal Maven Central

Android-Transition allows the easy creation of view transitions that reacts to user inputs. The library is designed to be general enough such that the same transition can be applied to differnt UI components like Drawer, SlidingUpPanel, ViewPager, ObservableScrollView (work in progress), etc., as long as appropriate adapter is used.

Changelog

0.9.5

0.9.4

Because somehow version 0.9.3 uploaded to Maven is broken :-/

0.9.3

  • Many *TransitionBuilder methods now takes varargs
  • Add visible()/invisible()/gone() to *TransitionBuilder that modifies target View's visibility
  • Add ScaledTransitionHandler
  • Improve Cascade
  • Fix erroneously sharing some TransitionBuilder states when cloned
  • Remove android:allowBackup from AndroidManifest.xml
  • Minor optimizations

0.9.2

  • Allow the transition/animation of a single MenuItem
  • Add ViewTransitionBuilder.height(int) / ViewTransitionBuilder.delayHeight(int)
  • AnimationManager/TransitionAnimation can specify either AnimationController or AnimatorController (Animator is needed to animate MenuItems but is, for some reason, slow for certain animations like View height manipulation)
  • Reduce garbage generation and other optimizations
  • Fix memory leak with MenuItem transition
  • Fix incorrect state when reverse transiting a View with a range not between 0f and 1f
  • Remove AnimationManager.removeAnimation(Animation) to support optimization, may add it back in the future

0.9.1

Fixed an embarrassing mistakenly-capitalized package name.

0.9.0

Please note that due to change in scope and direction, the code has been overhauled in 0.9.x and is incompatible with 0.8.x.

On the other hand now it only takes 8 lines of code to achieve the effect below that includes both non-interactive animation and interactive transition (drawer dragging):

On Android Studio update Gradle dependency to:

    compile 'com.github.kaichunlin.transition:core:0.9.4'

To add the corresponding slidinguppanel module:

    compile 'com.github.kaichunlin.transition:slidinguppanel:0.9.1'

0.8.3

Android Support Annotations are applied across the codebase which should help catching incorrect usage early. On Android Studio update Gradle dependency to:

    compile 'com.github.kaichunlin.transition:core:0.8.3'

Note that while many annotations such as @NonNull and @Nullable work on SDK Build Tools 22.0.x, some annotations like @IntRange and @FlatRange only work when preview version (23.0.0 rc2) is used.


Download from Google Play

Get it on Google Play

The app on Google Play may not be the latest version.

Features

Integration

The simplest way to integrate Android-Transition is to grab them from Maven Central or jCenter. On Android Studio, add the code below to Gradle dependencies:

    compile 'com.github.kaichunlin.transition:core:0.9.5'

Adapters that adapts to UI components not found in Android framework or Android Support Library are provided as their own libraries, the table below is the list of libraries:

Library Function Description in build.gradle
core Provides core transition function and adapters com.github.kaichunlin.transition:core:0.9.5
slidinguppanel AndroidSlidingUpPanel Adapter com.github.kaichunlin.transition:slidinguppanel:0.9.5

As an example, if an app requires the slidinguppanel module, which implicitly requires the core module, then build.gradle will look like below:

     dependencies {
       //other dependencies
       ...

        compile 'com.github.kaichunlin.transition:slidinguppanel:0.9.5'
     }

Usage

  • Transition is the primary object used to specify the desired operation on a View. The primary way to create Transitions is through the use of ViewTransitionBuilder and MenuItemTransitionBuilder.

  • These two classes provide fluent API with capability similar to ViewPropertyAnimator. Example:

    //create a Transition for the View with ID R.id.big_icon that rotates it by 360 degrees, applies different scaling on the X & Y axes, move it on the x axis by 200 pixels. 
      Transition transition = ViewTransitionBuilder.transit(findViewById(R.id.big_icon)).rotation(0f, 360f).scaleX(1f, 0.2f).scaleY(1f, 0f).translationX(200f)).build();
  • Once created, Transition can be added to any adapter, which will manage and initiate the Transition when the user is manipulating an interactive View such as DrawerLayout:

    mDrawerListenerAdapter.addTransition(transition);
  • ViewTransitionBuilder and MenuItemTransitionBuilder have the method buildAnimation() to create an Animation object:

      Animation animation = ViewTransitionBuilder.transit(findViewById(R.id.big_icon)).rotation(0f, 360f).scaleX(1f, 0.2f).scaleY(1f, 0f).translationX(200f)).buildAnimation();
      animation.startAnimation(300);
  • The app/ folder is a sample app containing dozens of examples.

Two steps to apply transition to any View (sample code):

  1. Use the adapter corresponding to the ViewGroup type:
//uses DrawerListenerAdapter to handle DrawerLayout user interactions
DrawerListenerAdapter mDrawerListenerAdapter = new DrawerListenerAdapter(mDrawerToggle, R.id.drawerList);
mDrawerListenerAdapter.setDrawerLayout(mDrawerLayout);
  1. Add desired transition to the adapter, ViewTransitionBuilder is used to build the transition:
mDrawerListenerAdapter.addTransition(
ViewTransitionBuilder.transit(findViewById(R.id.big_icon)).rotation(0f, 360f).scaleX(1f, 0.2f).scaleY(1f, 0f).translationX(200f));

Three steps to apply transition to a MenuItem (sample code):

  1. Use the appropriate adapter that extends MenuBaseAdapter:
  DrawerListenerAdapter mDrawerListenerAdapter = new DrawerListenerAdapter(mDrawerToggle, R.id.drawerList);
  mDrawerListenerAdapter.setDrawerLayout(mDrawerLayout);
  1. Let the adapter manage the creation of options menu:
  @Override
  public boolean onCreateOptionsMenu(Menu menu) {
      mDrawerListenerAdapter.onCreateOptionsMenu(this, menu);

      return super.onCreateOptionsMenu(menu);
  }
  1. Add desired transition to the adapter, MenuItemTransitionBuilder is used to build the transition:
  //shared configuration
  MenuItemTransitionBuilder builder = MenuItemTransitionBuilder.transit(toolbar).alpha(1f, 0.5f).scale(1f, 0f).cascade(0.3f).visibleOnStartAnimation(true).invalidateOptionOnStopTransition(this, true);
  // create a transition to be used when the drawer transits from the closed state to the opened state
  // notice that in most situations clone() should be used, i.e. builder.clone(), to prevent builder picking up effects that should only apply to a single transition
  MenuItemTransition mShrinkClose = builder.translationX(0, 30).build();
  // create a reverse transition to be used when the drawer transits from the opened state to the closed state
  MenuItemTransition mShrinkOpen = builder.reverse().translationX(0, 30).build();
  //tells adapter the transition and the menu options for both the opened and closed states
  mDrawerListenerAdapter.setupOptions(this, new MenuOptionConfiguration(mShrinkOpen, R.menu.drawer), new MenuOptionConfiguration(mShrinkClose, R.menu.main));

Animation


To apply both animation & transition:

This can be achieved with the code:

      //Create an adapter that listens for ActionBarDrawerToggle state change and update transition states
      DrawerListenerAdapter mDrawerListenerAdapter = new DrawerListenerAdapter(mDrawerToggle, R.id.drawerList);
      mDrawerListenerAdapter.setDrawerLayout(mDrawerLayout);

      //this builder is used to build both transition & animation effect
      ViewTransitionBuilder mRotateEffectBuilder = ViewTransitionBuilder.transit(findViewById(R.id.big_icon)).rotation(0f, 360f).scaleX(1f, 0.2f).scaleY(1f, 0f).translationX(200f);
      //build the desired transition and adds to the adapter
      ViewTransition transition = mRotateEffectBuilder.build();
      mDrawerListenerAdapter.addTransition(transition);

      //since the start animation is the reverse of the transition, set the current view state to transition's final state
      transition.setProgress(1f);
      //init an animation and add a delay to prevent stutter, needs to be higher if animation is enabled
      final IAnimation animation = mRotateEffectBuilder.reverse().buildAnimation();
      animation.startAnimationDelayed(600, 32);

See source of DrawerViewActivity.java for example.


Misc

  • To clear all transitions from an adapter:

      mDrawerListenerAdapter.clearTransition();
  • Share a common builder (sample code):

    //calling adapter(mSlidingUpPanelLayoutAdapter) means that when builder.build() is called, the resultant transition will automatically be added to mSlidingUpPanelLayoutAdapter
    ViewTransitionBuilder baseBuilder = ViewTransitionBuilder.transit().interpolator(mInterpolator).adapter(mSlidingUpPanelLayoutAdapter).rotationX(42f).scale(0.8f).translationYAsFractionOfHeight(-0.5f);
    
    //calls clone() so any modification will not be propagated to other transitions build from the same builder
    //adds a transition to view R.id.content_bg
    baseBuilder.clone().target(findViewById(R.id.content_bg)).build();
    
    //apply the same transition effect to a different view (R.id.content)
    baseBuilder.clone().target(findViewById(R.id.content)).build();
  • Delay transition evaluation until layout is complete, this is required if a view's position/dimension is used in the evaluation, in such a case ViewUtil provides a helper function (sample code):

      ViewUtil.executeOnGlobalLayout(findViewById(R.id.rotate_slide), new ViewTreeObserver.OnGlobalLayoutListener() {
        public void onGlobalLayout() {
          //create ViewTransitionBuilder here
        }
      });
You might also like...
VoronoiView is a view (ViewGroup) that allows you to add and display views inside Voronoi diagram regions.
VoronoiView is a view (ViewGroup) that allows you to add and display views inside Voronoi diagram regions.

Vorolay VoronoiView is a view (ViewGroup) that allows you to add and display views inside Voronoi diagram regions. [Voronoi diagram] (https://en.wikip

Easy, flexible and powerful Swipe Layout for Android
Easy, flexible and powerful Swipe Layout for Android

SwipeRevealLayout A layout that you can swipe/slide to show another layout. Demo Overview Drag mode Drag mode normal: Drag mode same_level: Features F

Android library used to create an awesome Android UI based on a draggable element similar to the last YouTube graphic component.
Android library used to create an awesome Android UI based on a draggable element similar to the last YouTube graphic component.

Draggable Panel DEPRECATED. This project is not maintained anymore. Draggable Panel is an Android library created to build a draggable user interface

Bubbles for Android is an Android library to provide chat heads capabilities on your apps. With a fast way to integrate with your development.
Bubbles for Android is an Android library to provide chat heads capabilities on your apps. With a fast way to integrate with your development.

Bubbles for Android Bubbles for Android is an Android library to provide chat heads capabilities on your apps. With a fast way to integrate with your

Android library used to create an awesome Android UI based on a draggable element similar to the last YouTube New graphic component.
Android library used to create an awesome Android UI based on a draggable element similar to the last YouTube New graphic component.

Please switch to DragView, for the best support, thank you DraggablePanel Download allprojects { repositories { ... maven { url 'https://jitp

FixedHeaderTableLayout is a powerful Android library for displaying complex data structures and rendering tabular data composed of rows, columns and cells with scrolling and zooming features. FixedHeaderTableLayout is similar in construction and use as to Android's TableLayout
FixedHeaderTableLayout is a powerful Android library for displaying complex data structures and rendering tabular data composed of rows, columns and cells with scrolling and zooming features. FixedHeaderTableLayout is similar in construction and use as to Android's TableLayout

FixedHeaderTableLayout is a powerful Android library for displaying complex data structures and rendering tabular data composed of rows, columns and cells with scrolling and zooming features. FixedHeaderTableLayout is similar in construction and use as to Android's TableLayout

A wave view of android,can be used as progress bar.
A wave view of android,can be used as progress bar.

WaveView ![Gitter](https://badges.gitter.im/Join Chat.svg) A wave view of android,can be used as progress bar. Screenshot APK demo.apk What can be use

An Android library that help you to build app with swipe back gesture.
An Android library that help you to build app with swipe back gesture.

SwipeBackLayout An Android library that help you to build app with swipe back gesture. Demo Apk GooglePlay Requirement The latest android-support-v4.j

TileView is a subclass of android.view.ViewGroup that asynchronously displays, pans and zooms tile-based images.  Plugins are available for features like markers, hotspots, and path drawing.
TileView is a subclass of android.view.ViewGroup that asynchronously displays, pans and zooms tile-based images. Plugins are available for features like markers, hotspots, and path drawing.

This project isn't maintained anymore. It is now recommended to use https://github.com/peterLaurence/MapView. MapView is maintained by Peter, one of o

Comments
  • Outdated SlidingUpPanelLayoutAdapter

    Outdated SlidingUpPanelLayoutAdapter

    Hello,

    The SlidingUpPanelLayoutAdapter is outdated as the following classes are no longer being overridden:

    • onPanelCollapsed
    • onPanelExpanded
    • onPanelAnchored
    • onPanelHidden

    Instead the four classes have been brought together in the new:

    @Override
    public void onPanelStateChanged(View panel, SlidingUpPanelLayout.PanelState previousState, SlidingUpPanelLayout.PanelState newState) {
            
    }
    
    opened by THMCombine 0
Releases(v0.9.5)
  • v0.9.5(Jan 17, 2016)

  • v0.9.4(Dec 4, 2015)

    • Many *TransitionBuilder methods now takes varargs
    • Add visible()/invisible()/gone() to *TransitionBuilder that modifies target View's visibility
    • Add ScaledTransitionHandler
    • Improve Cascade
    • Fix erroneously sharing some TransitionBuilder states when cloned
    • Remove android:allowBackup from AndroidManifest.xml
    • Minor optimizations
    Source code(tar.gz)
    Source code(zip)
  • v0.9.2(Aug 23, 2015)

    • Allow the transition/animation of a single MenuItem
    • Add ViewTransitionBuilder.height(int) / ViewTransitionBuilder.delayHeight(int)
    • AnimationManager/TransitionAnimation can specify either AnimationController or AnimatorController (Animator is - needed to animate MenuItems but is, for some reason, slow for certain animations like View height manipulation)
    • Reduce garbage generation and other optimizations
    • Fix memory leak with MenuItem transition
    • Fix incorrect state when reverse transiting a View with a range not between 0f and 1f
    • Remove AnimationManager.removeAnimation(Animation) to support optimization, may add it back in the future
    Source code(tar.gz)
    Source code(zip)
  • v0.9.0-beta(Jul 12, 2015)

  • v0.8.3(Jul 9, 2015)

  • v0.8.2(May 21, 2015)

    Changelog:

    • AnimateMenuAdapter is added that can animate MenuItems.

    Comments:

    • Single transition attached to a view works well
    • Incorrect behaviors may result when attaching two or more transitions to the same view.
    • ViewPager adapter does not reset view states, resulting in visual artifacts when changing the transitions attached to page views
    Source code(tar.gz)
    Source code(zip)
Owner
Kai
Kai
ViewStateLayout - Easy way to manage common state templates like loading, empty, error etc.!

ViewStateLayout Easy way to manage common state templates like loading, empty, error etc.! How to Step 1. Add the JitPack repository to your build fil

Kamrul Hasan 7 Dec 15, 2022
A layout to transition between two views using a Floating Action Button as shown in many Material Design concepts

⚠ This library is no longer maintained ⚠️ FABRevealLayout A layout to transition between two views using a Floating Action Button as shown in many Mat

Tomás Ruiz-López 901 Dec 9, 2022
swipe display drawer with flowing & bouncing effects.

FlowingDrawer swipe right to display drawer with flowing effects. Download Include the following dependency in your build.gradle file. Gradle: rep

mxn 2.6k Jan 3, 2023
A pull-down-to-refresh layout inspired by Lollipop overscrolled effects

JellyRefreshLayout A pull-down-to-refresh layout inspired by Lollipop overscrolled effects Preview Download Gradle: repositories { maven {

Y.Chen 628 Oct 26, 2022
An Android Layout which has a same function like https://github.com/romaonthego/RESideMenu

ResideLayout An Android Layout which has a same function like https://github.com/romaonthego/RESideMenu. Can be used on Android 1.6(I haven't try it.)

Yang Hui 392 Oct 12, 2022
A customize multiple state layout for Android.

MultiStateLayout ?? A customize multiple state layout for Android. (中文文档) Preview Download the sample apk to see more: Sample APK. Setup Add the multi

Airsaid 10 Dec 26, 2022
Simple android library to present an animated ferris wheel

Ferris Wheel View Overview An Android Library used to implement an animated Ferris Wheel in android. API SDK 15+ Written in Kotlin Supports landscape

Igor Lashkov 318 Dec 7, 2022
It's an Android library that allows you to use Layout as RadioButton or CheckBox.

Android - CompoundLayout It's an Android library that allows you to use Layout as RadioButton or CheckBox. The librarie is Android 14+ compatible. Gra

null 483 Nov 25, 2022
ConstraintLayout is an Android layout component which allows you to position and size widgets in a flexible way

ConstraintLayout is a layout manager for Android which allows you to position and size widgets in a flexible way. It's available for both the Android view system and Jetpack Compose.

Android Jetpack 970 Jan 6, 2023
A library that easily allows you to mask layouts/viewgroups

Maskable Layout Overview ======================= The Maskable Layout is a simple framelayout that allows you to easily mask views and viewgroups. You

Christophe Smet 654 Dec 2, 2022