Android design lecture #3
-
Upload
vitali-pekelis -
Category
Software
-
view
26 -
download
2
Transcript of Android design lecture #3
![Page 1: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/1.jpg)
Britt Barak14/2/2016
Android DesignTake 3
3
![Page 2: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/2.jpg)
Britt BarakBritt Barak
Figure 8
Android AcademyWomen Techmakers
![Page 3: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/3.jpg)
Largest Android Community
Android Academy - TLV
TLV - Android Academy
~ 2000 members Join Us:
![Page 4: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/4.jpg)
Jonathan Yarkoni
Android Leader Ironsource
Android Academy Staff
Yonatan Levin
Android Google Developer
Expert
Britt Barak
Android LeadFigure8
Yossi Segev
Android Developer
Colu
Shahar Avigezer
Android DeveloperHello Heart
![Page 5: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/5.jpg)
Community Mentors
![Page 7: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/7.jpg)
Pairing - Stickers!
Developers red Designers green
![Page 8: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/8.jpg)
Let the fun begin!
![Page 9: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/9.jpg)
Material Design Principles
![Page 10: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/10.jpg)
Today
![Page 11: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/11.jpg)
What’s on the menu?- Bold Graphic Design- Meaningful Motion- Android Design Vision
![Page 12: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/12.jpg)
Bold Graphic Design●Colors●Imagery
○Photography
○Iconography
![Page 13: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/13.jpg)
Color
![Page 14: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/14.jpg)
90 secondsFor Product Judgement
![Page 15: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/15.jpg)
90% based on colors!
![Page 16: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/16.jpg)
Brand recognition 80%
Learning 78%Comprehension 73%
![Page 17: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/17.jpg)
Material Design Palette
![Page 18: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/18.jpg)
![Page 19: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/19.jpg)
Color Palette●Primary color - app’s personality●Accent color - draws attention
●TIP : 2-3 hues of primary + 1 accent color
![Page 20: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/20.jpg)
![Page 21: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/21.jpg)
Material Themes
●@android:style/Theme.AppCompat (dark version)@android:style/Theme.AppCompat.Light (light
version)@android:style/
Theme.AppCompat.Light.DarkActionBar
android:theme="@style/AppTheme"
![Page 22: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/22.jpg)
Customize Native Widgets Color
![Page 23: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/23.jpg)
![Page 24: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/24.jpg)
Define Resources
colors.xml
<color name="indigo_300">#7986CB</color><color name="indigo_500">#3F51B5</color><color name="indigo_700">#303F9F</color><color name="pink_a200">#FF4081</color>
![Page 25: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/25.jpg)
Define Resources
styles.xml<style name="AppTheme"
parent="Theme.AppCompat.Light"> <item name="colorPrimary">@color/indigo_500</item> <item name="colorPrimaryDark">@color/indigo_700</item> <item name="colorAccent">@color/pink_a200</item></style>
![Page 26: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/26.jpg)
Coloring Programmatically
![Page 27: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/27.jpg)
Tinting 21+
drawable.setTint(color);
![Page 28: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/28.jpg)
Tinting
drawable = DrawableCompat.wrap(drawable);
DrawableCompat.setTint(drawable.mutate(), color);
![Page 29: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/29.jpg)
Coloring Dynamically
![Page 30: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/30.jpg)
Palette Class
Extracting palette from image
![Page 31: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/31.jpg)
Palette Class
Extracting palette from image
VibrantVibrant DarkVibrant LightMutedMuted DarkMuted Light
![Page 32: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/32.jpg)
Palette API
// Synchronous Palette p = Palette.from(bitmap).generate();
// Asynchronous Palette.from(bitmap).generate(new PaletteAsyncListener() { public void onGenerated(Palette p) { } });
![Page 33: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/33.jpg)
Questions ?
![Page 34: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/34.jpg)
Imagery
![Page 35: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/35.jpg)
Imagery
Pictures are faster than words.
●Explain ideas●Clear context●Win attention
![Page 36: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/36.jpg)
Imagery
Photography
Illustration
Iconography
![Page 37: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/37.jpg)
Hi, I’m Drawable!And you are?
![Page 38: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/38.jpg)
"something that can be drawn."
Drawable
![Page 39: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/39.jpg)
Unlike a View- does not interact with the user.
![Page 40: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/40.jpg)
Important types
- Bitmap- Nine patch- Vector - Shapes- StateList
![Page 41: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/41.jpg)
BitmapDrawable
wraps a bitmapcan be tiled, stretched, or aligned.
![Page 42: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/42.jpg)
BitmapDrawable
![Page 43: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/43.jpg)
Nine patch
PNG image in which you can define stretchable regions
![Page 44: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/44.jpg)
![Page 45: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/45.jpg)
![Page 46: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/46.jpg)
example
![Page 47: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/47.jpg)
ShapeDrawable
draws primitive shapes:- Rectangle- Oval- Ring- Line
![Page 48: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/48.jpg)
<shape android:shape="rectangle" > <corners android:radius="4dp" /> <stroke android:width="4dp" android:color="@color/stroke" /> <solid android:color="@color/fill"/> <padding android:left="20dp" android:top="20dp" android:right="20dp" android:bottom="20dp" /> </shape>
![Page 49: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/49.jpg)
Questions ?
![Page 50: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/50.jpg)
Photography
![Page 51: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/51.jpg)
Imagery
Photography
Illustration
Iconography
![Page 52: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/52.jpg)
Photos
●Specific to content●Personal●Inspiring
![Page 53: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/53.jpg)
Remember
●Good quality●Not too heavy
○Out Of Memory Exceptions
●Scale types
![Page 54: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/54.jpg)
Avatars and Thumbnails
Generally- are tap targetsRound - softer, people face shapePersonalization
![Page 55: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/55.jpg)
RoundedBitmapDrawable drawable =
RoundedBitmapDrawableFactory
.create(getResources(), bitmap);
drawable.setCircular(true);
![Page 56: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/56.jpg)
...and there’s a secret
![Page 57: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/57.jpg)
![Page 58: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/58.jpg)
![Page 59: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/59.jpg)
Canvas canvas = new Canvas(destination);
canvas.drawBitmap(destination, 0, 0, null);
maskPaint.setXfermode(new PorterDuffXfermode(mode));
canvas.drawBitmap(source, 0 , 0 , maskPaint);
imageView.setImageBitmap(destination);
https://developer.android.com/reference/android/graphics/PorterDuffXfermode.html
![Page 60: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/60.jpg)
Hero Image
Anchored in a prominent position●Draw in a user●Context about the content●Reinforce the brand.
![Page 61: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/61.jpg)
Text & Icon Protection
●Shadow to icons / text●Overlay / scrim:
○Dark scrims : 20%-40% opacity
○Light scrims : 40%-60% opacity
●Blur image
![Page 62: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/62.jpg)
Text & Icon Protection
![Page 63: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/63.jpg)
Gradient Colored Shapes<shape android:shape="rectangle" > <corners android:radius="4dp" /> <stroke android:width="1dp" android:color="#0078a5" />
<gradient android:startColor="#0078a5" android:endColor="#00adee" android:angle="90"/> <padding android:left="8dp" android:top="2dp" android:right="8dp" android:bottom="2dp" /> </shape>
![Page 64: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/64.jpg)
Gradient Colored Shapes<shape android:shape="rectangle" > <corners android:radius="4dp" /> <stroke android:width="1dp" android:color="#0078a5" />
<gradient android:startColor="#0078a5" android:endColor="#00adee"
android:gradientRadius="250" android:type="radial"/> <padding android:left="8dp" android:top="2dp" android:right="8dp" android:bottom="2dp" /> </shape>
![Page 65: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/65.jpg)
Iconography
![Page 66: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/66.jpg)
Next Session….
![Page 67: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/67.jpg)
Option1: PNGs
![Page 68: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/68.jpg)
Option2: Vector Graphics
1.Size - Single file2.Quality - Drawing instructions3.Animation
![Page 69: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/69.jpg)
Do you mean SVG???
Not Exactly...
![Page 70: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/70.jpg)
Vector Graphic
M - move toH- Horizontal lineV- Vertical lineL- Line toZ - Close path
●Uppercase - absolute, Lowercase - relative
![Page 71: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/71.jpg)
Example
M 1,1
![Page 72: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/72.jpg)
Example
M 1,1H 9
![Page 73: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/73.jpg)
Example
M 1,1H 9V 9
![Page 74: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/74.jpg)
Example
M 1,1H 9V 9H 1
![Page 75: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/75.jpg)
Example
M 1,1H 9V 9H 1Z
![Page 76: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/76.jpg)
SVG
![Page 77: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/77.jpg)
VectorDrawable
![Page 78: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/78.jpg)
A Word About Performance
- Size - max 200 x 200 dp- Different size / color → separate file.- FillType and conversion
- http://a-student.github.io/SvgToVectorDrawableConverter.Web/
![Page 79: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/79.jpg)
Questions ?
![Page 80: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/80.jpg)
Meaningful Motion
![Page 82: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/82.jpg)
“I choose a lazy person to do a hard job. Because a lazy person will find
an easy way to do it.”
- Bill Gates
![Page 83: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/83.jpg)
Animations Are Important
●Draws the eye●Instruct user●Continuous experience●User feedback●Delightful details
![Page 84: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/84.jpg)
Today we’ll be cost - effective.
![Page 85: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/85.jpg)
Meaningful Motion- Responsive
- The user controls the situation
- Instructive- The user know what’s happening
![Page 86: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/86.jpg)
Responsive - the user as the prime mover
Why? - Perceived latency- Better ux (understanding how to interact)- Sense of user control
![Page 87: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/87.jpg)
Touch Feedback
●Targets size : 48dp (7-9mm)●Feedback for ALL touchable elements
○ Standard button○ Ripples○ Selectors
![Page 88: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/88.jpg)
Standard Button
Ripple & Elevation by default.
![Page 89: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/89.jpg)
Ripple
Set background: ?android:attr/selectableItemBackground
?android:attr/selectableItemBackgroundBorderless
Recolor ● on android theme : colorControlHighlight
●(custom RippleDrwawble)
![Page 90: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/90.jpg)
But that’s for L+
What can we do?
![Page 91: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/91.jpg)
StateListDrawable (aka Selector)
Different images to represent the same graphic, depending on the state of the object.
![Page 92: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/92.jpg)
<selector > <item android:state_pressed="false"
android:drawable="@color/bg_default" />
<item android:state_pressed="true" android:drawable="@color/
bg_pressed" />
</selector>
![Page 93: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/93.jpg)
States
● android:state_pressed
● android:state_focused
● android:state_hovered
● android:state_selected
● android:state_checkable
● android:state_checked
● android:state_enabled
● android:state_activated
● android:state_window_focused
![Page 94: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/94.jpg)
By the way...
Schedule
M T W T F S S
![Page 95: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/95.jpg)
StateListAnimator
Animate View State Changes
android:stateListAnimator
https://developer.android.com/reference/android/animation/StateListAnimator.html
![Page 96: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/96.jpg)
StateListAnimator
<selector>
</selector>
![Page 97: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/97.jpg)
StateListAnimator
<selector> <item android:state_pressed="true"> <set> <objectAnimator android:propertyName="translationZ" android:duration="@android:integer/config_shortAnimTime" android:valueTo="2dp" android:valueType="floatType"/> </set> </item>//………. </selector>
![Page 98: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/98.jpg)
animate translationZ when pressed<selector> <item android:state_pressed="true"> <!--...--> </item> <item android:state_pressed="false"> <set> <objectAnimator android:propertyName="translationZ" android:duration="100" android:valueTo="0" android:valueType="floatType"/> </set> </item></selector>
![Page 99: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/99.jpg)
animate translationZ when pressed<selector> <item android:state_pressed="true"> <!--...--> </item> <item android:state_pressed="false"> <set> <objectAnimator android:propertyName="translationZ" android:duration="100" android:valueTo="0" android:valueType="floatType"/> </set> </item></selector>
![Page 100: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/100.jpg)
ObjectAnimator
animating properties on target objects. <objectAnimator
android:propertyName="y"android:valueTo="200"android:valueType="floatType"android:duration="1000"android:repeatCount="1"android:repeatMode="reverse"/>
![Page 101: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/101.jpg)
By Java Code:
ObjectAnimator mAnimator;
mAnimator = ObjectAnimator.ofFloat(view, View.X, View.Y, path);
...
mAnimator.start();
![Page 102: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/102.jpg)
Motion Best Practices:
- Keep it fast- Duration per distance (and screen size)- Natural curve- Natural movement (interpolator)- Don’t do it.
![Page 103: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/103.jpg)
Duration
●Tablet 130% 390 ms●Normal 100% 300 ms●Wearable 70% 210 ms
![Page 104: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/104.jpg)
Use Curved Motion
PathInterpolator based on a Bézier curve or a Path object. <pathInterpolator android:controlX1="0.4" android:controlY1="0" android:controlX2="1" android:controlY2="1"/>
![Page 105: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/105.jpg)
Interpolator
Object are quicker close to final position@interpolator/fast_out_linear_in.xml
@interpolator/fast_out_slow_in.xml
@interpolator/linear_out_slow_in.xml
Samples: github.com/googlesamples/android-Interpolatorhttps://material.io/guidelines/motion/material-motion.html
![Page 106: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/106.jpg)
Questions ?
![Page 107: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/107.jpg)
Delightful Details
![Page 108: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/108.jpg)
API 21+ . Their attributes are can be animated.
Animated Vector Drawable
![Page 109: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/109.jpg)
Vector Drawable
API 21+Drawables defined in XMLTheir attributes are can be animated.
http://developer.android.com/training/material/animations.html#AnimVector
https://github.com/udacity/ud862-samples/tree/master/TickCross
https://github.com/udacity/ud862-samples/tree/master/HeartFill
![Page 110: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/110.jpg)
Reveal Effect
Reveal animations provide users visual continuity when you show or hide a group of UI elements. ViewAnimationUtils.createCircularReveal()
![Page 111: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/111.jpg)
Questions ?
![Page 112: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/112.jpg)
Continuous Experience
Relations between screens
Shared elementsActivity transitions
![Page 113: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/113.jpg)
Activity Transitions
Asource
Bdestinati
on
1. Exit A
2. Enter B
3. Return B
4. Re-enter A
![Page 114: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/114.jpg)
Transition Types
API 19+ :●AutoTransition
○ Fade in, change bounds, fade out
●Fade○ visibility
●ChangeBounds○ size&position
●TransitionSet
API 21+ :● Explode
○ visibility
●Slide○ enter/exit from an edge
●ChangeClipBounds○ Bounds & transforms
●ChangeImageTransform○ Bounds & transforms(scale types)
●ChangeTransform○ Bounds & transforms
![Page 115: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/115.jpg)
●Content transition○Run anim on the content coming in / going out
●Shared element transition
Window transitions (between activities)
![Page 116: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/116.jpg)
CreateIn xml file:
<autoTransition/>
<fade />
<changeBounds/>
…..
![Page 117: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/117.jpg)
Specify Multiple Transitions(For example, this is AutoTransition)
<transitionSet android:transitionOrdering="sequential"> <fade android:fadingMode="fade_out" /> <changeBounds /> <fade android:fadingMode="fade_in" /></transitionSet>
![Page 118: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/118.jpg)
Apply
Content transition:- Style- Calling activity- Called activity
![Page 119: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/119.jpg)
Style<style name="BaseAppTheme" parent="android:Theme.Material"> <item name="android:windowActivityTransitions">true</item>
<item name="android:windowEnterTransition">@transition/explode</item> <item name="android:windowExitTransition">@transition/explode</item>
</style>
![Page 120: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/120.jpg)
Calling ActivitystartActivity(intent);overridePendingTransition
(R.anim.slide_from_right, R.anim.slide_to_left);
finish();overridePendingTransition
(R.anim.slide_from_left, R.anim.slide_to_right);
![Page 121: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/121.jpg)
Called Activity
Activity.java:getWindow().setEnterTransition(transition);getWindow().setExitTransition(transition);
![Page 122: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/122.jpg)
Between View Hierarchies
TransitionManager.
beginDelayedTransition(rootView, transition);
https://developer.android.com/training/transitions/index.html
![Page 123: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/123.jpg)
Shared element
![Page 124: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/124.jpg)
Shared Element
ActivityOptionsCompat options = ActivityOptionsCompat.
makeSceneTransitionAnimation(this, view, "transitionName");startActivity(intent, options.toBundle());
![Page 125: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/125.jpg)
Shared Element
ActivityOptionsCompat options = ActivityOptionsCompat.makeSceneTransitionAnimation(this,
Pair.create(view1, "transName1"), Pair.create(view2, "transName2"));startActivity(intent, options.toBundle());
![Page 126: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/126.jpg)
What Does It Do?(For example, this is the default)
<transitionSet android:transitionOrdering="sequential"> <changeBounds /> <changeTransform /> <changeClipBounds /> <changeImageTransform /></transitionSet>
![Page 127: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/127.jpg)
Define Custom Transition<style name="BaseAppTheme" parent="android:Theme.Material">
<item name="android:windowSharedElementEnterTransition"> @transition/custom</
item> <item
name="android:windowSharedElementExitTransition">
@transition/custom</item>
</style>
![Page 128: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/128.jpg)
Called Activity
Activity.java:getWindow().setSharedElementEnterTransition(transition);getWindow().setSharedElementExitTransition(transition);
![Page 129: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/129.jpg)
Instructive Motion
Demonstrate Navigation:
scroll up a listviewpager slideshow drawer
![Page 130: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/130.jpg)
Questions ?
![Page 131: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/131.jpg)
But, How Do We Know
If The UX Is Good Enough?
![Page 132: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/132.jpg)
Android Design Vision
![Page 133: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/133.jpg)
Research: Predict Marriage Lasting
By watching couples for 15min. after wedding
Prof. John Gottman at the University of Washington
![Page 134: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/134.jpg)
Research: Predict Marriage Lasting
By watching couples for 15min. after wedding - 94% accuracy
![Page 135: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/135.jpg)
How??
![Page 136: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/136.jpg)
How??
Success
Prof. John Gottman, Washington Uni.
15
![Page 137: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/137.jpg)
How??
Failure
Prof. John Gottman, Washington Uni.
11
![Page 138: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/138.jpg)
Workgroup Productiveness
Productive
Marcials Loanda
13
![Page 139: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/139.jpg)
Positive to Negative Emotions
Barbara Fredrickson
13
![Page 140: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/140.jpg)
Fill The Jars
![Page 141: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/141.jpg)
Fill The Jars
![Page 142: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/142.jpg)
HOW?
![Page 143: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/143.jpg)
Android Creative Vision
Enchant me.Simplify my life.
Make me amazing.
![Page 144: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/144.jpg)
Android Creative Vision
Dear Android,Enchant me.
Simplify my life.Make me amazing.
10x!!!Users.
![Page 145: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/145.jpg)
Let’s Fill The Jars!
![Page 146: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/146.jpg)
● Delight me in surprising ways
● Real objects are more fun that button and menus
● Let me make it mine
● Get to know me
Enchant MeSimplify My LifeMake me Amazing
Enchant Me
![Page 147: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/147.jpg)
Delight me in surprising ways
Surface, animation, sound effect…Subtle effects contribute to a feeling of effortlessness
![Page 148: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/148.jpg)
Real objects are more fun than buttons and menus
Reduces the cognitive effortMore emotionally satisfying
![Page 149: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/149.jpg)
Let me make it mine
Customization that lets users ‘own’ the experience.
![Page 150: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/150.jpg)
Get to know me
Learn users’ preferencesPrevious choices within easy reach
![Page 151: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/151.jpg)
Get to know me
![Page 152: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/152.jpg)
● Keep it brief● Pictures are faster than words● Decide for me but let me have
the final say● Only show what I need when I
need it● I should always know where I
am● Never lose my stuff● If it looks the same, it should
act the same● Only interrupt me if it’s
important
Enchant MeSimplify My LifeMake me Amazing
Simplify My Life
![Page 153: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/153.jpg)
Keep it brief
Short phrases with simple words. People skip long sentences.
![Page 154: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/154.jpg)
Keep it brief
Yossi Segev, Jonathan Yarkoni, Yonatan V. Levin and 74 others like this.
![Page 155: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/155.jpg)
Pictures are faster than words
●Eye-catching ●Faster to understand than text●Words are longer
SET TIME AAJUSTAR HORÁRIO REGLAGES DE L'HEURE ZEITSPANNE AUSWÄHLEN
![Page 156: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/156.jpg)
Decide for me but let me have the final say
Take your best guess and act rather than asking first. Allow for 'undo'.
![Page 157: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/157.jpg)
Decide for me but let me have the final say
![Page 158: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/158.jpg)
Decide for me but let me have the final say
![Page 159: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/159.jpg)
Decide for me but let me have the final say
“Are you sure” implies that the user didn't think through
![Page 160: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/160.jpg)
Only show what I need when I need it
Too much data is overwhelming
Small tasks and information chunks
Hide if not essential at the moment
Teach people as they go.
![Page 161: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/161.jpg)
Navigation Drawers
Too much data is overwhelming
Small tasks and information chunks
Hide if not essential at the moment
Teach people as they go.
![Page 162: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/162.jpg)
Runtime Permissions
Too much data is overwhelming
Small tasks and information chunks
Hide if not essential at the moment
Teach people as they go.
![Page 163: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/163.jpg)
Contextual Tips Instead of Onboarding
Too much data is overwhelming
Small tasks and information chunks
Hide if not essential at the moment
Teach people as they go.
![Page 164: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/164.jpg)
Contextual Tips Instead of Onboarding
They are not a substitute for good UX design!
Only for priority or difficult tasks
If you MUST use onboarding :It’s essential for first use
Allow users to skip it
![Page 165: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/165.jpg)
I should always know where I am
Give users confidence.Make places in your app look distinct Transitions show relationships among screens.Progress feedback
![Page 166: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/166.jpg)
Never lose my stuff
Save given data and let access it from anywhere. settings, personal touches, and creations across phones, tablets, and computers.
![Page 167: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/167.jpg)
If it looks the same, it should act the same
Discern functional differences by making them visually distinct
![Page 168: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/168.jpg)
Only interrupt me if it's important
●Shield people from unimportant minutiae. ●Interruption can be dispersing, taxing and
frustrating.
![Page 169: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/169.jpg)
Only interrupt me if it's important
●Notifications ●Un-interrupting progressbar
![Page 170: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/170.jpg)
● Give me tricks that work everywhere
● It’s not my fault● Sprinkle
encouragement● Do the heavy lifting for
me● Make important things
fast
Enchant MeSimplify My LifeMake me Amazing
Make Me Amazing
![Page 171: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/171.jpg)
Give me tricks that work everywhere
Make an easy to learn app●Use ui patterns.●People love figuring out for themselves.
![Page 172: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/172.jpg)
Gestures
●Touch ○→ example: select.
●Double touch ○→ example: zoom in
●Drag, Swipe, or Fling ○→ Example: Dismiss, scroll, tilt, etc.
![Page 173: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/173.jpg)
Gestures
●Long press○ → Example: Select an elemen
● Long press is not used to display a contextual menu.
●Pinch open / close: zoom in / out
![Page 174: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/174.jpg)
It's not my fault
When things go wrong - be niceUsers should feel smartClear instructions
verbs, short words, not technical,spare the unneeded details.
Fix behind the scenes if possible
![Page 175: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/175.jpg)
It's not my fault
Insert your SIM card now.
You did not insert SIM card!
![Page 176: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/176.jpg)
It's not my fault
![Page 177: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/177.jpg)
It's not my fault - No Content
![Page 178: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/178.jpg)
Avoiding completely empty states
![Page 179: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/179.jpg)
Best matchTto handle a misspelled query without explicitly blaming on the user.
![Page 180: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/180.jpg)
![Page 181: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/181.jpg)
Sprinkle encouragement
Smaller easier steps instead of one complex taskFeedback on actions, even just a subtle glow.Use 2nd person, human approachable toneHumor - not always appropriate
![Page 182: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/182.jpg)
Sprinkle encouragement
Just a sprinkle...
![Page 183: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/183.jpg)
Do the heavy lifting for me
Make novices feel like experts
![Page 184: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/184.jpg)
Do the heavy lifting for me
Predict what would the user want to do next
![Page 185: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/185.jpg)
Make important things fast
Make the most important thing easy to find and fast to use
![Page 186: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/186.jpg)
Make important things fast
Make the most important thing easy to find and fast to use
![Page 187: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/187.jpg)
Words Are Powerful
Pay attention to:- Keep it brief- It’s not my fault- Sprinkle encouragement
![Page 188: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/188.jpg)
Let’s View Some general Examples
![Page 189: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/189.jpg)
Example- How to inform users?
![Page 190: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/190.jpg)
Blocking Alert Dialog
Negative:●Keep it brief●It’s not my fault●Only interrupt me if it’s important
![Page 191: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/191.jpg)
Toast
Negative:●Only interrupt me if it’s important●It’s not my fault
![Page 192: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/192.jpg)
Snackbar
Positive:●Only interrupt me if it’s important●Do the heavy lifting for me●Decide for me but let me have the final say
![Page 193: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/193.jpg)
Example- Rich Notifications
![Page 194: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/194.jpg)
Rich Notifications
Positive:●Only interrupt me if it’s important●Make important things fast
![Page 195: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/195.jpg)
Example- Phone (Dialer)
![Page 196: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/196.jpg)
Phone -
Positive:●Get to know me●Let me make it mine●Pictures are faster than words●Make important things fast
![Page 197: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/197.jpg)
Example- Expanding FAB
![Page 198: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/198.jpg)
Expanding FAB
Positive:●Get to know me●Pictures are faster than words●Make important things fast●Only show what I need
when I need it
![Page 199: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/199.jpg)
Any Questions?
![Page 200: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/200.jpg)
So What Did We Have Today?
●Bold Graphic Design○Themes and colors
○Tinting
○Palette api
○Drawables
●Meaningful Motion○Touch feedback
○Object Animator
○Transitions
●Android Creative Vision
![Page 201: Android design lecture #3](https://reader036.fdocuments.net/reader036/viewer/2022062903/58ed8e091a28ab88488b468f/html5/thumbnails/201.jpg)