Beauty Treatment for your Android Application

BEAUTY treatment for your Mobile Application

Image +JoseLuisUgiaGonzalez@Jl_Ugia

#beautyTreatment #mobile #codemotion

Who are you?

Cloud computing

community

Side projects

Beer

business dev

mobile

Image Placeholder

Jose L UgiaLOCK8

Wunderlist, Momenta, Aureum Digital


The story

android != iOS



DO NOT Be a fan boy



patterns to

Make your app stand out

Help your users understand your app

VIEW PAGER

-1 1

void transformPage(View page, float position);

0

Slide Joy Effect

-303

-1 0 1

0

1

-1 0 1

0

10

-1 0 1

pivotX

scale

rotationY

rotation Effect

-0,50

0,5

-1

0

1

-1 0 1

0

1

-1 0 1

alpha

scale

translationXsin(π/2) x 0.5

FX made easy

-303

-1 0 1

rotationY

private final float[] rotationYValues = new float[] { 0 , -‐2.8f, 0, 2.8f, 0 }; private final float[] rotationYCuePoints = new float[] { -‐.3f, -‐.1f , 0, .1f , .3f };

0

1

-1 0 1

alpha

private final float[] alphaYValues = new float[] { 0 , 1 , 1 , 0 }; private final float[] alphaYCuePoints = new float[] { -‐.7f, -‐.5f, .5f, .7f };

float value = Transitions.intermediateValueForRange(position, cuePoints,

values);

EFFECTS FOR EVERYONE

0

1

-1 0 1

value = 1

float value = Transitions.intermediateValueForRange(0.4f, cuePoints, values);

OTHER RESOURCES

Jazzy Viewpager

Viewpager animations – Android developers

https://github.com/jfeinstein10/JazzyViewPager

http://developer.android.com/training/animation/screen-slide.html

Lists & collectionsprivate RecyclerView recyclerView;

private ListView listView;private ScrollView scrollView;

Lists & collections

void onScrolled(RecyclerView recyclerView, int dx, int dy);

void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount)

void onScrollChange(View v, int scrollX, int scrollY, int oldScrollX, int oldScrollY)

scrollY += dy;

scrollY;

float headerScrollY = firstVisibleItem == 0 ? -‐headerView.getTop() : headerViewHeight;

Recycler view

Scroll view

List view

Parallax

listOffset * parallaxRatio

float progress = scrollY / referenceScrollY;

Reacting to scroll updates

0

1

0

1

0 1

scale

-160

0

0

translationY

Using first visible item

List View

Recycler view

int firstVisibleItem

layoutManager.findFirstVisibleItemPosition();

Android Sliding Layer

Transformer

compile 'com.wunderlist:sliding-‐layer:1.2.5'

void transform(View view, float previewProgress, float layerProgress);

Build.gradle

Sliding Layer Transformer

MAKE Your own void transform(View view, float previewProgress, float layerProgress);

Built–IN transformersslidingLayer.setLayerTransformer(new SlideJoyTransformer()); slidingLayer.setLayerTransformer(new RotationTransformer()); slidingLayer.setLayerTransformer(new AlphaTransformer());

https://github.com/wunderlist/android-sliding-layer-lib

Paths

<vector xmlns:android="http://schemas.android.com/apk/res/android" android:height="@dimen/dynamic_header_list_user_avatar_size_big" android:width="@dimen/dynamic_header_list_user_avatar_size_big" android:viewportHeight="100" android:viewportWidth="100"> <path android:name="right-‐semi-‐circle" android:strokeColor="@color/grey" android:strokeWidth="2" android:pathData="M51,1 C77.61,1 100,23.39 100,51 C100,78.61 77.61,101 50,101"/> <path android:name="left-‐semi-‐circle" android:strokeColor="@color/grey" android:strokeWidth="2" android:pathData="M51,101 C23.39,101 1,78.61 1,51 C1,23.39 23.39,1 51,1"/></vector>

Paths

vector drawable –> from svg

http://inloop.github.io/svg2android/

<set xmlns:android="http://schemas.android.com/apk/res/android" android:ordering="together"> <objectAnimator android:propertyName="trimPathStart" android:valueFrom="0.5" android:valueTo="0" android:valueType="floatType" android:duration="350" android:interpolator="@android:interpolator/decelerate_quint"/> <objectAnimator android:propertyName="trimPathEnd" android:valueFrom="0.5" android:valueTo="1" android:valueType="floatType" android:duration="350" android:interpolator="@android:interpolator/decelerate_quint"/> </set>

Paths

Object Animator / Animator set

Paths

Animated Vector drawable

<animated-vector xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/circle_stroke"> <target android:name="left-semi-circle" android:animation="@animator/stroke_appear_from_center"/> <target android:name="right-semi-circle" android:animation="@animator/stroke_appear_from_center"/> </animated-vector>

int drawableResource = R.drawable.circle_stroke_animated_show; AnimatedVectorDrawable drawable = (AnimatedVectorDrawable) getResources()

.getDrawable(drawableResource);

ImageView imageView = (ImageView) findViewById(R.id.imageview); imageView.setImageDrawable(drawable); drawable.start();

Paths

Trigger!

PRO – paths: Swipe to refresh

1

2

3

4

5

6

78

910

1112

13

14

15

16

1

0

Android Support Library 23.2

// Gradle Plugin 2.0+ android { defaultConfig { vectorDrawables.useSupportLibrary = true } }

VectorDrawableCompat 7AnimatedVectorDrawableCompat 11

There is more

Animations

View Property transformations

Activity Transitions

coordinator layout

DO NOT FEAR!

It’s not objective–c It’s not a product manager

making apps more lovable

Thank You!

Image Placeholder

Jose L UgiaLOCK8, Wunderlist, Momenta, Aureum Digital

+JoseLuisUgiaGonzalez@Jl_Ugia


…and we are hiring!

https://github.com/JlUgia/beauty-treatment-android-animationshttps://speakerdeck.com/jlugia/beauty-treatment-for-your-mobile-application

https://github.com/JlUgia/beauty-treatment-android-animations

https://speakerdeck.com/jlugia/beauty-treatment-for-your-mobile-application

License

(cc) 2016 Jose Ugia Gonzalez. Some rights reserved . This document is distributed under the Creative Commons Attribution-ShareAlike 3.0 license,

available on http://creativecommons.org/licenses/by-sa/3.0/.

All device screenshots used belong to Google Inc and Apple Inc.

http://creativecommons.org/licenses/by-sa/3.0/