$30 off During Our Annual Pro Sale. View Details »

Beauty Treatment for Your Mobile Application

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!

Jose L

October 02, 2015
Tweet

More Decks by Jose L

Other Decks in Technology

Transcript

  1. BEAUTY treatment for your
    Mobile Application
    Image
    Placehol
    +JoseLuisUgiaGonzalez
    @Jl_Ugia
    #beautyTreatment #mobile #devfest

    View Slide

  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

    View Slide

  3. The story
    android != iOS
    Image
    Placehol
    +JoseLuisUgiaGonzalez
    @Jl_Ugia
    #beautyTreatment #mobile #devfest

    View Slide

  4. DO NOT Be a fan boy
    Image
    Placehol
    +JoseLuisUgiaGonzalez
    @Jl_Ugia
    #beautyTreatment #mobile #devfest

    View Slide

  5. patterns to
    Make your app stand out
    Help your users understand your app

    View Slide

  6. VIEW PAGER

    View Slide

  7. -1 1
    void  transformPage(View  page,  float  position);  
    0

    View Slide

  8. Slide Joy Effect
    -3
    0
    3
    -1 0 1
    0
    1
    -1 0 1
    0
    10
    -1 0 1
    pivotX
    scale
    rotationY

    View Slide

  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

    View Slide

  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  };

    View Slide

  11. float  value  =    
    Transitions.intermediateValueForRange(position,  cuePoints,  values);

    View Slide

  12. efectos para todos
    0
    1
    -1 0 1
    value  =  1
    float  value  =    
    Transitions.intermediateValueForRange(0.4f,  cuePoints,  values);

    View Slide

  13. OTHER RESOURCES
    Jazzy Viewpager
    Viewpager animations – Android developers
    https://github.com/jfeinstein10/JazzyViewPager
    http://developer.android.com/training/animation/screen-slide.html

    View Slide

  14. Lists & collections
    private  RecyclerView  recyclerView;
    private  ListView  listView;
    private  ScrollView  scrollView;

    View Slide

  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

    View Slide

  16. Parallax
    listOffset  *  parallaxRatio

    View Slide

  17. float  progress  =  scrollY  /  referenceScroll;

    View Slide

  18. Reacting to scroll updates
    0
    1
    0
    1
    0 1
    scale
    -160
    0
    0
    translationY

    View Slide

  19. Using first visible item
    List View
    Recycler view
    int  firstVisibleItem
    layoutManager.findFirstVisibleItemPosition();

    View Slide

  20. Android Sliding Layer
    Transformer
    compile  'com.wunderlist:sliding-­‐layer:1.2.5'
     void  transform(View  view,  float  previewProgress,  float  layerProgress);  
    Build.gradle

    View Slide

  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());

    View Slide

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

    View Slide

  23. Paths

    View Slide

  24.                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">


                                   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"/>


                                   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"/>

     
    Paths
    vector drawable –> from svg
    http://inloop.github.io/svg2android/

    View Slide

  25. Paths
    Animated Vector drawable
    xmlns:android="http://schemas.android.com/apk/res/android"

    android:drawable="@drawable/circle_stroke">


    android:name="left-semi-circle"

    android:animation="@animator/stroke_appear_from_center"/>


    android:name="right-semi-circle"

    android:animation="@animator/stroke_appear_from_center"/>



    View Slide

  26. xmlns:android="http://schemas.android.com/apk/res/android"

    android:ordering="together">


    android:propertyName="trimPathStart"

    android:valueFrom="0.5"

    android:valueTo="0"

    android:valueType="floatType"

    android:duration="350"

    android:interpolator="@android:interpolator/decelerate_quint"/>


    android:propertyName="trimPathEnd"

    android:valueFrom="0.5"

    android:valueTo="1"

    android:valueType="floatType"

    android:duration="350"

    android:interpolator="@android:interpolator/decelerate_quint"/>



    Paths
    Object Animator / Animator set

    View Slide

  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!

    View Slide

  28. PRO – paths: Swipe to refresh
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    1
    0

    View Slide

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

    View Slide

  30. There is more
    Animations
    View Property transformations
    Activity Transitions
    coordinator layout

    View Slide

  31. DO NOT
    FEAR!
    It’s not objective–c It’s not a product manager

    View Slide

  32. making apps more lovable

    View Slide

  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

    View Slide