![Page 1: Beauty Treatment for your Android Application](https://reader031.vdocument.in/reader031/viewer/2022022203/58739c201a28ab85438b6abf/html5/thumbnails/1.jpg)
BEAUTY treatment for your Mobile Application
Image +JoseLuisUgiaGonzalez@Jl_Ugia
#beautyTreatment #mobile #codemotion
![Page 2: Beauty Treatment for your Android Application](https://reader031.vdocument.in/reader031/viewer/2022022203/58739c201a28ab85438b6abf/html5/thumbnails/2.jpg)
Who are you?
Cloud computing
community
Side projects
Beer
business dev
mobile
Image Placeholder
Jose L UgiaLOCK8
Wunderlist, Momenta, Aureum Digital
#beautyTreatment #mobile #codemotion
![Page 3: Beauty Treatment for your Android Application](https://reader031.vdocument.in/reader031/viewer/2022022203/58739c201a28ab85438b6abf/html5/thumbnails/3.jpg)
The story
android != iOS
Image +JoseLuisUgiaGonzalez@Jl_Ugia
#beautyTreatment #mobile #codemotion
![Page 4: Beauty Treatment for your Android Application](https://reader031.vdocument.in/reader031/viewer/2022022203/58739c201a28ab85438b6abf/html5/thumbnails/4.jpg)
DO NOT Be a fan boy
Image +JoseLuisUgiaGonzalez@Jl_Ugia
#beautyTreatment #mobile #codemotion
![Page 5: Beauty Treatment for your Android Application](https://reader031.vdocument.in/reader031/viewer/2022022203/58739c201a28ab85438b6abf/html5/thumbnails/5.jpg)
patterns to
Make your app stand out
Help your users understand your app
![Page 6: Beauty Treatment for your Android Application](https://reader031.vdocument.in/reader031/viewer/2022022203/58739c201a28ab85438b6abf/html5/thumbnails/6.jpg)
VIEW PAGER
![Page 7: Beauty Treatment for your Android Application](https://reader031.vdocument.in/reader031/viewer/2022022203/58739c201a28ab85438b6abf/html5/thumbnails/7.jpg)
-1 1
void transformPage(View page, float position);
0
![Page 8: Beauty Treatment for your Android Application](https://reader031.vdocument.in/reader031/viewer/2022022203/58739c201a28ab85438b6abf/html5/thumbnails/8.jpg)
Slide Joy Effect
-303
-1 0 1
0
1
-1 0 1
0
10
-1 0 1
pivotX
scale
rotationY
![Page 9: Beauty Treatment for your Android Application](https://reader031.vdocument.in/reader031/viewer/2022022203/58739c201a28ab85438b6abf/html5/thumbnails/9.jpg)
rotation Effect
-0,50
0,5
-1
0
1
-1 0 1
0
1
-1 0 1
alpha
scale
translationXsin(π/2) x 0.5
![Page 10: Beauty Treatment for your Android Application](https://reader031.vdocument.in/reader031/viewer/2022022203/58739c201a28ab85438b6abf/html5/thumbnails/10.jpg)
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 };
![Page 11: Beauty Treatment for your Android Application](https://reader031.vdocument.in/reader031/viewer/2022022203/58739c201a28ab85438b6abf/html5/thumbnails/11.jpg)
float value = Transitions.intermediateValueForRange(position, cuePoints,
values);
![Page 12: Beauty Treatment for your Android Application](https://reader031.vdocument.in/reader031/viewer/2022022203/58739c201a28ab85438b6abf/html5/thumbnails/12.jpg)
EFFECTS FOR EVERYONE
0
1
-1 0 1
value = 1
float value = Transitions.intermediateValueForRange(0.4f, cuePoints, values);
![Page 13: Beauty Treatment for your Android Application](https://reader031.vdocument.in/reader031/viewer/2022022203/58739c201a28ab85438b6abf/html5/thumbnails/13.jpg)
OTHER RESOURCES
Jazzy Viewpager
Viewpager animations – Android developers
https://github.com/jfeinstein10/JazzyViewPager
http://developer.android.com/training/animation/screen-slide.html
![Page 14: Beauty Treatment for your Android Application](https://reader031.vdocument.in/reader031/viewer/2022022203/58739c201a28ab85438b6abf/html5/thumbnails/14.jpg)
Lists & collectionsprivate RecyclerView recyclerView;
private ListView listView;private ScrollView scrollView;
![Page 15: Beauty Treatment for your Android Application](https://reader031.vdocument.in/reader031/viewer/2022022203/58739c201a28ab85438b6abf/html5/thumbnails/15.jpg)
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
![Page 16: Beauty Treatment for your Android Application](https://reader031.vdocument.in/reader031/viewer/2022022203/58739c201a28ab85438b6abf/html5/thumbnails/16.jpg)
Parallax
listOffset * parallaxRatio
![Page 17: Beauty Treatment for your Android Application](https://reader031.vdocument.in/reader031/viewer/2022022203/58739c201a28ab85438b6abf/html5/thumbnails/17.jpg)
float progress = scrollY / referenceScrollY;
![Page 18: Beauty Treatment for your Android Application](https://reader031.vdocument.in/reader031/viewer/2022022203/58739c201a28ab85438b6abf/html5/thumbnails/18.jpg)
Reacting to scroll updates
0
1
0
1
0 1
scale
-160
0
0
translationY
![Page 19: Beauty Treatment for your Android Application](https://reader031.vdocument.in/reader031/viewer/2022022203/58739c201a28ab85438b6abf/html5/thumbnails/19.jpg)
Using first visible item
List View
Recycler view
int firstVisibleItem
layoutManager.findFirstVisibleItemPosition();
![Page 20: Beauty Treatment for your Android Application](https://reader031.vdocument.in/reader031/viewer/2022022203/58739c201a28ab85438b6abf/html5/thumbnails/20.jpg)
Android Sliding Layer
Transformer
compile 'com.wunderlist:sliding-‐layer:1.2.5'
void transform(View view, float previewProgress, float layerProgress);
Build.gradle
![Page 21: Beauty Treatment for your Android Application](https://reader031.vdocument.in/reader031/viewer/2022022203/58739c201a28ab85438b6abf/html5/thumbnails/21.jpg)
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());
![Page 22: Beauty Treatment for your Android Application](https://reader031.vdocument.in/reader031/viewer/2022022203/58739c201a28ab85438b6abf/html5/thumbnails/22.jpg)
https://github.com/wunderlist/android-sliding-layer-lib
![Page 23: Beauty Treatment for your Android Application](https://reader031.vdocument.in/reader031/viewer/2022022203/58739c201a28ab85438b6abf/html5/thumbnails/23.jpg)
Paths
![Page 24: Beauty Treatment for your Android Application](https://reader031.vdocument.in/reader031/viewer/2022022203/58739c201a28ab85438b6abf/html5/thumbnails/24.jpg)
<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/
![Page 25: Beauty Treatment for your Android Application](https://reader031.vdocument.in/reader031/viewer/2022022203/58739c201a28ab85438b6abf/html5/thumbnails/25.jpg)
<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
![Page 26: Beauty Treatment for your Android Application](https://reader031.vdocument.in/reader031/viewer/2022022203/58739c201a28ab85438b6abf/html5/thumbnails/26.jpg)
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>
![Page 27: Beauty Treatment for your Android Application](https://reader031.vdocument.in/reader031/viewer/2022022203/58739c201a28ab85438b6abf/html5/thumbnails/27.jpg)
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!
![Page 28: Beauty Treatment for your Android Application](https://reader031.vdocument.in/reader031/viewer/2022022203/58739c201a28ab85438b6abf/html5/thumbnails/28.jpg)
PRO – paths: Swipe to refresh
1
2
3
4
5
6
78
910
1112
13
14
15
16
1
0
![Page 29: Beauty Treatment for your Android Application](https://reader031.vdocument.in/reader031/viewer/2022022203/58739c201a28ab85438b6abf/html5/thumbnails/29.jpg)
Android Support Library 23.2
// Gradle Plugin 2.0+ android { defaultConfig { vectorDrawables.useSupportLibrary = true } }
VectorDrawableCompat 7AnimatedVectorDrawableCompat 11
![Page 30: Beauty Treatment for your Android Application](https://reader031.vdocument.in/reader031/viewer/2022022203/58739c201a28ab85438b6abf/html5/thumbnails/30.jpg)
There is more
Animations
View Property transformations
Activity Transitions
coordinator layout
![Page 31: Beauty Treatment for your Android Application](https://reader031.vdocument.in/reader031/viewer/2022022203/58739c201a28ab85438b6abf/html5/thumbnails/31.jpg)
DO NOT FEAR!
It’s not objective–c It’s not a product manager
![Page 32: Beauty Treatment for your Android Application](https://reader031.vdocument.in/reader031/viewer/2022022203/58739c201a28ab85438b6abf/html5/thumbnails/32.jpg)
making apps more lovable
![Page 33: Beauty Treatment for your Android Application](https://reader031.vdocument.in/reader031/viewer/2022022203/58739c201a28ab85438b6abf/html5/thumbnails/33.jpg)
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
![Page 34: Beauty Treatment for your Android Application](https://reader031.vdocument.in/reader031/viewer/2022022203/58739c201a28ab85438b6abf/html5/thumbnails/34.jpg)
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.