Android provides many APIs and capabilities to liven up dull UIs through graphical effects and animations. Come to this session to learn various techniques for making your mobile clients not just rich, but filthy rich.
Ultra-graphically rich applications that ooze cool. They suck the user in from the outset and hang on to them with a death grip of excitement. 2 Definition: Filthy Rich Clients 2007
Ultra-graphically rich applications that ooze cool. They suck the user in from the outset and hang on to them with a death grip of excitement. 2 Definition: Filthy Rich Clients 2007 2013
Ultra-graphically rich applications that ooze cool. They suck the user in from the outset and hang on to them with a death grip of excitement. 2 Definition: Filthy Rich Clients Applications that look cool, run smoothly, and interact well with the user. 2007 2013
#DV13 #FilthyRichAndroid Images with rounded corners • Don’t bake the shape in your images • Don’t use intermediate layers • Don’t use clipping • Use shaders! 5
#DV13 #FilthyRichAndroid Back to images 10 BitmapShader shader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP); Paint paint = new Paint(); paint.setAntiAlias(true); paint.setShader(shader);
#DV13 #FilthyRichAndroid Animate closing the gap 25 private void animateRemoval(final ListView listview, View viewToRemove) { // [ Get startTop for all views ] // Delete the item from the adapter int position = mListView.getPositionForView(viewToRemove); mAdapter.remove(mAdapter.getItem(position)); final ViewTreeObserver observer = listview.getViewTreeObserver(); observer.addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() { public boolean onPreDraw() { observer.removeOnPreDrawListener(this); for (int i = 0; i < listview.getChildCount(); ++i) { // [ get current view top ] child.setTranslationY(startTop - top); child.animate().setDuration(MOVE_DURATION).translationY(0); child.animate().withEndAction(new Runnable() { public void run() { mBackgroundContainer.hideBackground(); mSwiping = false; mListView.setEnabled(true); } }); } return true; } }); }
#DV13 #FilthyRichAndroid Circular reveal • Technique similar to images with rounded corners - Uses a BitmapShader • The mask is not a vector shape • Uses an ALPHA_8 bitmap as the mask - Converted from any type of bitmap 28
#DV13 #FilthyRichAndroid Filter reveal • Same exact implementation as before • Draws the “spotlight“ on top of original photo • Spot’s position depends on where you tapped the button 38
#DV13 #FilthyRichAndroid Path clipping • Pros - Easy to implement - Uses less memory - Faster to setup (no Bitmap copy) • Cons - Android 4.3+ only with hardware acceleration - No antialiasing - Can be very expensive - Increases overdraw 42
#DV13 #FilthyRichAndroid Color Filters • Can be used to modify a shader • Subclasses of ColorFilter - ColorMatrixColorFilter - LightingColorFilter - PorterDuffColorFilter 64
#DV13 #FilthyRichAndroid Only Draw What You Need (ODWYN) • Prefer invalidate(l, t, r, b) over invalidate() • Only invalidate custom views that actually change • Let the framework invalidate standard views 68
#DV13 #FilthyRichAndroid Get Off that UI Thread! • Avoid expensive operations on UI thread - network, database, bitmaps, ... • AsyncTask is your friend 70
#DV13 #FilthyRichAndroid Avoid Garbage Collection • ... especially during animations • Lots of small objects will eventually cause GC • Avoid Iterators, temporary objects - Consider cached objects for temporaries • Use Allocation Tracker in DDMS 71
#DV13 #FilthyRichAndroid For More Information • Google I/O talks • Parleys.com talks • Devbytes on YouTube 74 Chet graphics-geek.blogspot.com google.com/+ChetHaase @chethaase Romain: curious-creature.org google.com/+RomainGuy @romainguy
romainguy
mfunaki
kizuku_miyagi
ninoid
manfredsteyer
devoc
minma_curama
okashoi
taowata
shimabox
kojipole
hpgrahsl
ogiwarat
marktimemedia
rmw
schacon
paigeccino
paulrobertlloyd
malarkey
chrislema
edds
addyosmani
revolveconf
michaelherold
chriscoyier