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

#beautyTreatment #mobile #codemotion

The story

android != iOS

Image +JoseLuisUgiaGonzalez@Jl_Ugia

#beautyTreatment #mobile #codemotion

DO NOT Be a fan boy

Image +JoseLuisUgiaGonzalez@Jl_Ugia

#beautyTreatment #mobile #codemotion

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

#beautyTreatment #mobile #codemotion

…and we are hiring!

https://github.com/JlUgia/beauty-treatment-android-animationshttps://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.