Supercharge Your UI
Dominik Helleberg Mobile Development Android ingress Level 6 dominik-helleberg.de/+ Jonas Gehring Mobile Development Android JavaScript https://github.com/jjoe64 http://www.jjoe64.com
Design is important https://play.google.com/store/apps/details?id=com.outlook.z7
This is what happens when you let developers create UI http://www.codinghorror.com/blog/2006/11/this-is-what-happens-when-you-let-developers-create-ui.html
Stick with Holo http://developer.android.com/design/index.html
Holo is designed by professional designers and let you create beautiful apps https://play.google.com/store/apps/details?id=com.michaelpardo.quotes
Holo is designed by professional designers and let you create beautiful apps https://play.google.com/store/apps/details?id=ch.teamtasks.tasks.paid
Don t customize it......unless you know what you re doing https://play.google.com/store/apps/details?id=sweesoft.prohome
How to use Holo https://developer.android.com/design/building-blocks/index.html
Mind the Gap https://developer.android.com/design/style/metrics-grids.html
How to use Holo - Grids res/values/dimens.xml <resources> <!-- Default screen margins, per the Android Design guidelines. --> <dimen name="activity_horizontal_margin">16dp</dimen> <dimen name="activity_vertical_margin">16dp</dimen> <dimen name= ui_gap >8dp</dimen> <dimen name= element_height >48dp</dimen> </resources> https://developer.android.com/design/style/metrics-grids.html
Theme.Holo existiert seit API Level 11 (Honeycomb) erst ab API Level 14 (ICS) garantiert unverändert durch OEM Vorschlag Ab Api Level 11 Theme.Holo verwenden (hell: Holo.Light) Frühere Api Level verwenden Theme.Black. (hell: Theme)
Das richtige Theme zur Laufzeit automatisch auswählen res/values/ android: Theme.Black res/values-v11/ res/values-v14/ android: Theme.Holo android: Theme.Holo android: Theme.MyTheme
Das richtige Theme zur Laufzeit automatisch auswählen res/values/themes.xml <resources> <style name="theme.mytheme" parent="android:theme.black"></style> <style name="theme.mytheme.notitlebar" parent="android:theme.black.notitlebar"></style> <style name="theme.mytheme.fullscreen" parent="android:theme.black.notitlebar.fullscreen"></style> <style name="theme.mytheme.light" parent="android:theme"></style> <style name="theme.mytheme.light.notitlebar" parent="android:theme.notitlebar"></style> <style name="theme.mytheme.light.notitlebar.fullscreen" parent="android:theme.notitlebar.fullscreen"></style> </resources>
Themes für Honeycomb res/values-v11/themes.xml <resources> <style name="theme.mytheme" parent="android:theme.holo"></style>... <!-- Bug: Theme.Holo.Light.NoActionBar is not public --> <style name="theme.mytheme.light.notitlebar" parent="android:theme.holo.light"> <item name="android:windowactionbar">false</item> <item name="android:windownotitle">true</item> </style> <!-- Bug? Theme.Holo.Light.NoActionBar.Fullscreen has a titlebar --> <style name="theme.mytheme.light.notitlebar.fullscreen" parent="android:theme.holo.light"> <item name="android:windowactionbar">false</item> <item name="android:windownotitle">true</item> <item name="android:windowfullscreen">true</item> <item name="android:windowcontentoverlay">@null</item> </style>
Themes für Ice Cream Sandwich res/values-v14/themes.xml <resources> <style name="theme.mytheme" parent="android:theme.holo"></style> <style name="theme.mytheme.notitlebar" parent="android:theme.holo.noactionbar"></style> <style name="theme.mytheme.fullscreen" parent="android:theme.holo.noactionbar.fullscreen"></style> <style name="theme.mytheme.light" parent="android:theme.holo.light"></style> <style name="theme.mytheme.light.notitlebar" parent="android:theme.holo.light.noactionbar"></style> <style name="theme.mytheme.light.fullscreen" parent="android:theme.holo.light.noactionbar.fullscreen"></style> </resources>
Verschiedene Themes sind nun unter einem gemeinsamen Namen ansprechbar. Verwendung in der AndroidManifest.xml <activity android:theme="@style/theme.mytheme.light.notitlebar...
Colors #33B5E5 #AA66CC #99CC00 #FFBB33 #FF4444 #0099CC #9933CC #669900 #FF8800 #CC0000
Colors res/colors.xml <?xml version="1.0" encoding="utf-8"?> <resources> <color name="light_blue">#33b5e5</color> <color name="dark_blue">#0099cc</color> <color name="light_purple">#aa66cc</color> <color name="dark_purple">#9933cc</color> <color name="light_green">#99cc00</color> <color name="dark_green">#669900</color> <color name="light_orange">#ffbb33</color> <color name="dark_orange">#ff8800</color> <color name="light_red">#ff4444</color> <color name="dark_red">#cc0000</color> </resources>
Build Responsive 302 Redirect to Juhani Lehtimäki http://developer.android.com/training/basics/fragments/fragment-ui.html
Build with Holo Components http://developer.android.com/design/patterns/actionbar.html
Holo Cheat Sheet http://petrnohejl.github.io/android-cheatsheet-for-graphic-designers/
Since we use Holo... Life is good...
OEMS und Themes
WAAAAAAAAA http://www.flickr.com/photos/fspugna/4507352674/
OEMS und Themes
Zusammenfassung Befolgen der Design-Guidlines Verwenden der Standard-Widgets Verwenden der Standard-Patterns Verwenden des Standard-Themes Verwenden der Standard-Farbpalette Verwenden von Responsive Design Techniques Gefahr Gestaltung der App hebt sich womöglich kaum ab Wie differenzieren? Qualität Wir sorgen dafür, dass sich die App gut anfühlt
Was heißt gut anfühlen? klare logische UI Struktur Die App ist responsive und snappy Animationen Grafische Effekte, eigene Widgets (wo es sinnvoll ist)
Android Custom Views http://mindtherobot.com/blog/272/android-custom-ui-making-a-vintage-thermometer/ https://github.com/harism/android_page_curl
Most Simple Custom View public class ExampleView extends View { public ExampleView(Context context, AttributeSet attrs) { super(context, attrs); } @Override protected void ondraw(canvas canvas) { canvas.drawcolor(color.red); } }
Einige wichtige Methoden Touch Events @Override public boolean ontouchevent(motionevent event) Größenabhängige Berechnungen @Override protected void onsizechanged(int w, int h, int oldw, int oldh) Spezielle Anforderungen an die Abmessungen @Override protected void onmeasure(int widthmeasurespec, int heightmeasurespec)
View Drawing Canvas API Formen (Linien, Ellipsen, Paint API Rechtecke etc) Gradienten (Kreis und Linear) Text Effekte (Blur,...) Bitmaps Farbfilter Zeichenmatrix (Position, Vermessen von Text Größe, Drehung) Texteigenschaften Farbe, Muster, Dicke von Formen
keines Paint Beispiel SimplePaintExample
Gradients LinearGradient RadialGradient Shader.TileMode CLAMP, REPEAT, MIRROR
Gradients LinearGradient(float x0, float y0, float x1, float y1, int color0, int color1, Shader.TileMode tile) LinearGradient(float x0, float y0, float x1, float y1, int[] colors, float[] positions, Shader.TileMode tile)
Custom ViewGroups https://developer.android.com/design/patterns/index.html
Custom ViewGroups einfache Möglichkeit um das Rendering von Child Views zu ändern: setstatictransformationsenabled(true); @Override boolean getchildstatictransformation(view child, Transformation t) Statische Transformationen Alpha Wert Über das Matrix-Object rotieren positionieren skalieren "3D Blick" Beispiel: ExampleCustomViewGroup
ListView 3D Custom ViewGroup 3D Effekt mit Canvas API Bitmap Caching MTCRichGraphics
Demo ViewPager3d https://github.com/inovex/viewpager3d 3D mit Canvas API Animation Multi Touch Handling XML-Attribute
Animationen Animationen sollen sinnvoll sein
Animationen
Animation Framework: since 3.0 ObjectAnimator.ofFloat(myView, "alpha", 0f).start() ValueAnimator anim = ValueAnimator.ofFloat(0f, 1f); anim.setduration(500); anim.start(); 302 Redirect to Lars Vogel
Animation Framework: since 3.x PropertyValuesHolder pvhx = PropertyValuesHolder.ofFloat("x", 50f); PropertyValuesHolder pvhy = PropertyValuesHolder.ofFloat("y", 100f); ObjectAnimator.ofPropertyValuesHolder(myView, pvhx, pvyy).start(); //since 3.1 myview.animate().x(50f).y(100f);
2.x? NineOldAndroids Usage The API is exactly the same as the Honeycomb API, just change your imports to use com.nineoldandroids.animation.* http://nineoldandroids.com
ListViewAnimations Mind the View-recycling! inspired by Chet Haase's Demo http://graphics-geek.blogspot.de/2013/02/devbytes-listview-animations.html
ListViewAnimations ab 4.1 -> view.sethastransientstate(true); Alternative: Custom Adapter oder ListViewAnimations-Lib von Niek Haarman https://bitbucket.org/nhaarman/listviewanimations/
Demo https://github.com/renard314/ledview Canvas API Linear Gradients Radial Gradients BitmapShader ColorFilter Animation XML-Attribute Caching
Vermeide Canvas.drawText () Zeilenumbrüche Zeilenabstände Vermessen und Positionieren des Textes Dafür gibt es Hilfsklassen! StaticLayout: Mehrzeiliger Text der sich nicht ändert DynamicLayout: Mehrzeiliger Text der sich ändert BoringLayout: Example: ExampleCanvasText Einzeiliger Text der sich nicht ändert
Tipps und Tricks Bei beliebten Apps abgucken ondraw leichtgewichtig lassen invalide(rect) statt invalide() Bitmap Caching nicht sinnlos malen Advanced: Surface View ondraw über eigenen Thread
Summary Stick with Holo Use defaults unless you're a designer Use the techniques from design.android.com OEM Themes DO suck Add Custom Views / ViewGroups / Animations to differentiate, but do it right
DANKE!