Beauty Treatment for Your Mobile Application

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

It is time to take advantage of the new tools to draw and animate, design guidelines and a few tricks and recipes to make your mobile application stand out from the rest.

Join me to speak about how to make your application look different by adding subtle effects that are appealing to the eye and the overall experience of your users.

Get your hands dirty with animations, updating layouts on scrolling events, and playing with shapes. You shall not regret it!

Transcript

1. BEAUTY treatment for your Mobile Application Image Placehol +JoseLuisUgiaGonzalez @Jl_Ugia #beautyTreatment #mobile #devfest
2. Who are you? Cloud computing community Side projects Beer business dev mobile Image Placeholder Jose L Ugia LOCK8 Wunderlist, Momenta, Aureum Digital #beautyTreatment #mobile #devfest
3. The story android != iOS Image Placehol +JoseLuisUgiaGonzalez @Jl_Ugia #beautyTreatment #mobile #devfest
4. DO NOT Be a fan boy Image Placehol +JoseLuisUgiaGonzalez @Jl_Ugia #beautyTreatment #mobile #devfest
5. patterns to Make your app stand out Help your users understand your app
6. VIEW PAGER
7. -1 1 void  transformPage(View  page,  float  position);   0
8. Slide Joy Effect -3 0 3 -1 0 1 0 1 -1 0 1 0 10 -1 0 1 pivotX scale rotationY
9. rotation Effect -0,5 0 0,5 -1 0 1 -1 0 1 0 1 -1 0 1 alpha scale translationX sin(π/2)  x  0.5
10. FX made easy -3 0 3 -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  };
11. float  value  =     Transitions.intermediateValueForRange(position,  cuePoints,  values);
12. efectos para todos 0 1 -1 0 1 value  =  1 float  value  =     Transitions.intermediateValueForRange(0.4f,  cuePoints,  values);
13. OTHER RESOURCES Jazzy Viewpager Viewpager animations – Android developers https://github.com/jfeinstein10/JazzyViewPager http://developer.android.com/training/animation/screen-slide.html
14. Lists & collections private  RecyclerView  recyclerView; private  ListView  listView; private  ScrollView  scrollView;
15. 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
16. Parallax listOffset  *  parallaxRatio
17. float  progress  =  scrollY  /  referenceScroll;
18. Reacting to scroll updates 0 1 0 1 0 1 scale -160 0 0 translationY
19. Using first visible item List View Recycler view int  firstVisibleItem layoutManager.findFirstVisibleItemPosition();
20. Android Sliding Layer Transformer compile  'com.wunderlist:sliding-­‐layer:1.2.5'  void  transform(View  view,  float  previewProgress,  float  layerProgress);   Build.gradle
21. Sliding Layer Transformer MAKE Your own  void  transform(View  view,  float  previewProgress,  float  layerProgress);   Built–IN transformers slidingLayer.setLayerTransformer(new SlideJoyTransformer()); slidingLayer.setLayerTransformer(new RotationTransformer()); slidingLayer.setLayerTransformer(new AlphaTransformer());
22. https://github.com/wunderlist/android-sliding-layer-lib
23. Paths
24. <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/
25. 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>
26. <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
27. AnimatedVectorDrawable drawable = (AnimatedVectorDrawable) getResources() .getDrawable(R.drawable.circle_stroke_animated_show); ImageView imageView = (ImageView) findViewById(R.id.imageview); imageView.setImageDrawable(drawable); 
 drawable.start(); Paths Trigger!
28. PRO – paths: Swipe to refresh 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 1 0
29. http://inloop.github.io/svg2android/
30. There is more Animations View Property transformations Activity Transitions coordinator layout
31. DO NOT FEAR! It’s not objective–c It’s not a product manager
32. making apps more lovable
33. Thank You! Image Placeholder Jose  L  Ugia LOCK8,  Wunderlist,  Momenta,  Aureum  Digital +JoseLuisUgiaGonzalez @Jl_Ugia #beautyTreatment #mobile #devfest …and we are hiring! https://github.com/JlUgia/beauty-treatment-android-animations