Der Erfolg einer App hängt maßgeblich davon ab, wie sie sich dem Nutzer präsentiert. Wir beleuchten die Möglichkeiten des Android Graphics Frameworks und zeigen, wie Sie Ihre App durch außergewöhnliche Custom-Widgets, 3-D-Animationen und grafische Effekte aufwerten. In dieser Session erwartet Sie jede Menge Beispielcode, Performancetipps sowie Best Practices.

1. Supercharge
Your UI

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

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

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

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. Das richtige Theme zur Laufzeit automatisch auswählen
res/values/ res/values-v11/ res/values-v14/
android: android: android:
Theme.Black Theme.Holo 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.
Verwendung in der AndroidManifest.xml
<activity
android:theme="@style/Theme.MyTheme.Light.NoTitleBar“
...

18. Colors
#33B5E5 #AA66CC #99CC00 #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
302 Redirect to Juhani Lehtimäki
http://developer.android.com/training/basics/fragments/fragment-ui.html

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

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

23. OEMS und Themes

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

25. OEMS und Themes

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

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

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

29. 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);
}
}

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

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

32. keines Paint Beispiel
SimplePaintExample

33. Gradients
Sinnvoll einsetzen
LinearGradient
RadialGradient
Shader.TileMode
CLAMP, REPEAT, MIRROR

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

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

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

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

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

39. Animationen
Animationen
sollen
sinnvoll
sein

40. Animationen

41. Animation Framework:
since 3.0
ObjectAnimator.ofFloat(myView, "alpha", 0f).start()
ValueAnimator anim = ValueAnimator.ofFloat(0f, 1f);
anim.setDuration(500);
anim.start();

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

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

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

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

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

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

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

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

50. DANKE!