Animation -

is a dialog between user and system.

#dfua

Considerations

Respond to touch events in your views with touch feedback animations.

#dfua

Ripple Effect

<Button
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="New Button"
     android:paddingLeft="16dp"
     android:paddingRight="16dp"/>

Code

Result

Android L Developer Preview new touch feedback mechanism.

Raised button, a typically rectangular button made of paper that lifts and emits ink reactions on press.

Ripple Effect

<Button
     ...   
     android:background="?android:attr/selectableItemBackground"/>

Code

Result

Flat button, a button made of ink that emits ink reactions on press but does not lift.

Ripple Effect

<style name="AppTheme" parent="android:style/Theme.Material">
    <item name="android:colorControlHighlight">@android:color/holo_purple</item>
</style>

Code

Result

To change the default touch feedback color, use the theme's attribute.

Ripple Effect

<ripple android:color="@android:color/holo_purple">  
    <!--mask defines the bounds for the ripple animation-->
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle" />
    </item>
</ripple>

Code

Result

To change the default touch feedback color, of single view use ripple drawable.

<Button android:background="@drawable/ripple"/>

drawable/ripple.xml​​

Ripple Effect

<Button
     ...   
     android:background="?android:attr/selectableItemBackgroundBorderless"/>

Code

Result

To make ripple extends beyond the view bounds.

Hide and show views with reveal effect animations.

#dfua

Reveal Effect

ValueAnimator anim = 
    ViewAnimationUtils.createCircularReveal(
        view, 
        centerX, 
        centerY, 
        startRadius, 
        endRadius
    );

Code

Result

The createCircularReveal method enables you to animate a clipping circle to reveal or hide a view.

Create more natural animations with curved motion.

#dfua

Curved Motion

Path path = new Path();
path.addCircle(x, y, radius, Path.Direction.CW);
		
ObjectAnimator animator = 
    ObjectAnimator.ofFloat(view, View.X, View.Y, path);

animator.setDuration(1000);
animator.start();

Code

Result

The Object Animator class has new constructors that enable you to animate coordinates along a path.

Animate changes in one or more view properties with view state change animations.

#dfua

Lift on touch

<selector>
    <item android:state_pressed="true">
        <set>
            <objectAnimator
                    android:propertyName="translationZ"
                    android:duration="100"
                    android:valueTo="4"
                    android:valueFrom="0"
                    android:valueType="floatType"/>
        </set>
    </item>
    ...
</selector>

Code

Result

The new State List Animator class lets you define animators that run when the state of a view changes.

anim/selector.xml​​

<android.support.v7.widget.CardView
        android:stateListAnimator="@anim/selector"/>

Show animations in state list drawables between view state changes.

#dfua

Icon morphing

Code

<animated-selector>
    <item android:state_checked="true" android:id="@+id/state_on">
        <bitmap android:src="@drawable/ic_done_anim_030" />
    </item>
    <item android:state_checked="false" android:id="@+id/state_off">
        <bitmap android:src="@drawable/ic_plus_anim_030" />
    </item>
    <transition android:fromId="@+id/state_on" 
                android:toId="@+id/state_off">
        <animation-list>
            <item android:duration="16">
                <bitmap android:src="@drawable/ic_plus_anim_000" />
            </item>
            ...
            </item>
            <item android:duration="16">
                <bitmap android:src="@drawable/ic_plus_anim_030" />
            </item>
        </animation-list>
    </transition>
</animated-selector>

drawable-v21/icon_anim.xml​​

Result

The new Animated State List Drawable class lets you create drawables that show animations between state changes of the associated view.

A better solution?

Icon morphing library

Code

Result

*Nightly build

Icon morphing library

• Open Source
• Ice Cream Sandwitch
• Scalable graphic
• Declaration via XML
• Web app

Plans & Opportunities

Imagination is your only limitation

Switch between activities with custom activity transition animations.

#dfua

Activity Transitions

Activity Transitions - Fade

Activity Transitions - Slide

Activity Transitions - Explode

Shared elements transition

Move Image Sample

Move Image Sample

Move Image Sample

Move Image Sample

How it works

Compatibility

#dfua

Check the System Version

// Check if we're running on Android 5.0 or higher
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    // Call some material design APIs here
} else {
    // Implement this feature without material design
}

Code

• Activity transitions
• Touch feedback
• Reveal animations
• Path-based animations
• Animated selectors
• Vector drawables

Samples from

all around the world.

#dfua

Shoppr Loading Animation

by Nikosaurier

Shoppr Checkout Runthrough

by Nikosaurier

Alarm

by Ehsan Rahimi​

Contact Detail

by Eric Azares​

Music Store

by Chris Basha