supercharge your android ui

Supercharge

Your UI

Mobile DevelopmentAndroidingress Level 6

dominik-helleberg.de/+

Dominik Helleberg

JonasGehring

Mobile DevelopmentAndroid

JavaScript

https://github.com/jjoe64http://www.jjoe64.com

https://play.google.com/store/apps/details?id=com.outlook.Z7

Design is important

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

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

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)

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

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>

</resources>

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.

<activity android:theme="@style/Theme.MyTheme.Light.NoTitleBar“...

Verwendung in der AndroidManifest.xml

#99CC00

Colors

#33B5E5 #AA66CC #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

http://developer.android.com/training/basics/fragments/fragment-ui.html

302 Redirect to Juhani Lehtimäki

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

public class ExampleView extends View {

public ExampleView(Context context, AttributeSet attrs) {super(context, attrs);

}

@Overrideprotected void onDraw(Canvas canvas) {

canvas.drawColor(Color.RED);}

}

Most Simple Custom View

@Overridepublic boolean onTouchEvent(MotionEvent event)

@Overrideprotected void onSizeChanged(int w, int h, int oldw, int oldh)

@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)

Größenabhängige Berechnungen

Spezielle Anforderungen an die Abmessungen

Touch Events

Einige wichtige Methoden

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

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

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

@Overrideboolean getChildStaticTransformation(View child, Transformation t)

Beispiel: ExampleCustomViewGroup

ListView 3D

● Custom ViewGroup

● 3D Effekt mit Canvas API

● Bitmap Caching

MTCRichGraphics

MTCRichGraphics

https://github.com/inovex/ViewPager3D

Demo ViewPager3d

● 3D mit Canvas API

● Animation

● Multi Touch Handling

● XML-Attribute

Animationen

Animationen

sollen

sinnvollsein

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

ab 4.1 -> view.setHasTransientState(true);

Alternative:

Custom Adapter

oder

ListViewAnimations-Lib von Niek Haarman

https://bitbucket.org/nhaarman/listviewanimations/

ListViewAnimations

Demo

● Canvas API

● Linear Gradients

● Radial Gradients

● BitmapShader

● ColorFilter

● Animation

● XML-Attribute

● Caching

https://github.com/renard314/LEDView

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

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!