Beauty Treatment for Your Mobile Application

5f83ef806155b403c3393160ce51f955?s=47 Jose L
October 02, 2015

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!

5f83ef806155b403c3393160ce51f955?s=128

Jose L

October 02, 2015
Tweet

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