Der Erfolg einer App hängt maßgeblich davon ab, wie sie sich dem Nutzer präsentiert. der Vortrag beleuchtet die Möglichkeiten von Android, außergewöhnliche Custom-Widgets, 3-D-Animationen und grafische Effekte aufzuwerten. Der Vortrag enthält jede Menge Beispielcode, Performancetipps und Best Practices.

1. Supercharge
Your UI

2. Mobile Development
Android
ingress Level 6
dominik-helleberg.de/+
Dominik
Helleberg
Jonas
Gehring
Mobile Development
Android
JavaScript
https://github.com/jjoe64
http://www.jjoe64.com

3. https://play.google.com/store/apps/details?id=com.outlook.Z7
Design is
important

4. 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

5. Stick with Holo
http://developer.android.com/design/index.html

6. Holo is designed by professional
designers and let you create
beautiful apps
https://play.google.com/store/apps/details?id=com.michaelpardo.quotes

7. Holo is designed by professional
designers and let you create
beautiful apps
https://play.google.com/store/apps/details?id=ch.teamtasks.tasks.paid

8. Don‘t customize it...
...unless you know what you‘re
doing
https://play.google.com/store/apps/details?id=sweesoft.prohome

9. How to use Holo
https://developer.android.com/design/building-blocks/index.html

10. Mind the Gap
https://developer.android.com/design/style/metrics-grids.html

11. How to use Holo - Grids
https://developer.android.com/design/style/metrics-grids.html
<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>
res/values/dimens.xml

12. 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)

13. android:
Theme.Black
Das richtige Theme zur Laufzeit automatisch auswählen
res/values/ res/values-v11/ res/values-v14/
android:
Theme.Holo
android:
Theme.Holo
android:
Theme.MyTheme

14. 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>

15. 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>

16. 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>

17. Verschiedene Themes sind nun unter einem gemeinsamen
Namen ansprechbar.
<activity
android:theme="@style/Theme.MyTheme.Light.NoTitleBar“
...
Verwendung in der AndroidManifest.xml

18. #99CC00
Colors
#33B5E5 #AA66CC #FFBB33 #FF4444
#0099CC #9933CC #669900 #FF8800 #CC0000

19. 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>

20. Build Responsive
http://developer.android.com/training/basics/fragments/fragment-ui.html
302 Redirect to Juhani Lehtimäki

21. Build with Holo Components
http://developer.android.com/design/patterns/actionbar.html

22. Holo Cheat Sheet
http://petrnohejl.github.io/Android-Cheatsheet-For-Graphic-Designers/

23. Since we use Holo... Life is good....

24. OEMS und Themes

25. WAAAAAAAAA
http://www.flickr.com/photos/fspugna/4507352674/

26. OEMS und Themes

27. 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

28. 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)

29. Android Custom Views
http://mindtherobot.com/blog/272/android-custom-ui-making-a-vintage-thermometer/
https://github.com/harism/android_page_curl

30. public class ExampleView extends View {
public ExampleView(Context context, AttributeSet attrs) {
super(context, attrs);
}
@Override
protected void onDraw(Canvas canvas) {
canvas.drawColor(Color.RED);
}
}
Most Simple Custom View

31. @Override
public boolean onTouchEvent(MotionEvent event)
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh)
@Override
protected void onMeasure(int widthMeasureSpec, int
heightMeasureSpec)
Größenabhängige Berechnungen
Spezielle Anforderungen an die Abmessungen
Touch Events
Einige wichtige Methoden

32. Canvas API
● Formen (Linien, Ellipsen,
Rechtecke etc)
● Text
● Bitmaps
● Zeichenmatrix (Position,
Größe, Drehung)
Paint API
● Gradienten (Kreis und
Linear)
● Effekte (Blur,...)
● Farbfilter
● Vermessen von Text
● Texteigenschaften
● Farbe, Muster, Dicke
von Formen
View Drawing

33. keines Paint Beispiel
SimplePaintExample

34. Gradients
LinearGradient
RadialGradient
Shader.TileMode
CLAMP, REPEAT, MIRROR

35. 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)

36. Custom ViewGroups
https://developer.android.com/design/patterns/index.html

37. Custom ViewGroups
Statische Transformationen
●
Alpha Wert
●
Über das Matrix-Object
○ rotieren
○ positionieren
○ skalieren
○ "3D Blick"
einfache Möglichkeit um das Rendering von Child Views zu ändern:
setStaticTransformationsEnabled(true);
@Override
boolean getChildStaticTransformation(View child, Transformation t)
Beispiel: ExampleCustomViewGroup

38. ListView 3D
● Custom ViewGroup
● 3D Effekt mit Canvas API
● Bitmap Caching
MTCRichGraphics

39. https://github.com/inovex/ViewPager3D
Demo ViewPager3d
● 3D mit Canvas API
● Animation
● Multi Touch Handling
● XML-Attribute

40. Animationen
Animationen
sollen
sinnvoll
sein

41. Animationen

42. 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

43. 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);

44. 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

45. ListViewAnimations
Mind the View-recycling!
inspired by Chet Haase's Demo
http://graphics-geek.blogspot.de/2013/02/devbytes-listview-animations.html

46. ab 4.1 -> view.setHasTransientState(true);
Alternative:
Custom Adapter
oder
ListViewAnimations-Lib von Niek Haarman
https://bitbucket.org/nhaarman/listviewanimations/
ListViewAnimations

47. Demo
● Canvas API
● Linear Gradients
● Radial Gradients
● BitmapShader
● ColorFilter
● Animation
● XML-Attribute
● Caching
https://github.com/renard314/LEDView

48. 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: Einzeiliger Text der sich nicht ändert
Example: ExampleCanvasText

49. 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

50. 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

51. DANKE!