supercharge your android ui

51
Supercharge Your UI

Upload: inovex-gmbh

Post on 09-May-2015

277 views

Category:

Technology


1 download

DESCRIPTION

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.

TRANSCRIPT

Page 1: Supercharge your Android UI

Supercharge

Your UI

Page 2: Supercharge your Android UI

Mobile DevelopmentAndroidingress Level 6

dominik-helleberg.de/+

Dominik Helleberg

JonasGehring

Mobile DevelopmentAndroid

JavaScript

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

Page 3: Supercharge your Android UI

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

Design is important

Page 4: Supercharge your Android UI

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

Page 5: Supercharge your Android UI

Stick with Holo

http://developer.android.com/design/index.html

Page 6: Supercharge your Android UI

Holo is designed by professional designers and let you create beautiful apps

https://play.google.com/store/apps/details?id=com.michaelpardo.quotes

Page 7: Supercharge your Android UI

Holo is designed by professional designers and let you create beautiful apps

https://play.google.com/store/apps/details?id=ch.teamtasks.tasks.paid

Page 8: Supercharge your Android UI

Don‘t customize it......unless you know what you‘re doing

https://play.google.com/store/apps/details?id=sweesoft.prohome

Page 9: Supercharge your Android UI

How to use Holo

https://developer.android.com/design/building-blocks/index.html

Page 10: Supercharge your Android UI

Mind the Gap

https://developer.android.com/design/style/metrics-grids.html

Page 11: Supercharge your Android UI

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

Page 12: Supercharge your Android UI

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)

Page 13: Supercharge your Android UI

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

Page 14: Supercharge your Android UI

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>

Page 15: Supercharge your Android UI

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>

Page 16: Supercharge your Android UI

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>

Page 17: Supercharge your Android UI

Verschiedene Themes sind nun unter einem gemeinsamen Namen ansprechbar.

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

Verwendung in der AndroidManifest.xml

Page 18: Supercharge your Android UI

#99CC00

Colors

#33B5E5 #AA66CC #FFBB33 #FF4444

#0099CC #9933CC #669900 #FF8800 #CC0000

Page 19: Supercharge your Android UI

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>

Page 20: Supercharge your Android UI

Build Responsive

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

302 Redirect to Juhani Lehtimäki

Page 21: Supercharge your Android UI

Build with Holo Components

http://developer.android.com/design/patterns/actionbar.html

Page 22: Supercharge your Android UI

Holo Cheat Sheet

http://petrnohejl.github.io/Android-Cheatsheet-For-Graphic-Designers/

Page 23: Supercharge your Android UI

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

Page 24: Supercharge your Android UI

OEMS und Themes

Page 25: Supercharge your Android UI

WAAAAAAAAA

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

Page 26: Supercharge your Android UI

OEMS und Themes

Page 27: Supercharge your Android UI

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

Page 28: Supercharge your Android UI

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)

Page 29: Supercharge your Android UI

Android Custom Views

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

Page 30: Supercharge your Android UI

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

Page 31: Supercharge your Android UI

@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

Page 32: Supercharge your Android UI

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

Page 33: Supercharge your Android UI

keines Paint Beispiel

SimplePaintExample

Page 34: Supercharge your Android UI

Gradients

LinearGradient

RadialGradient

Shader.TileMode

CLAMP, REPEAT, MIRROR

Page 35: Supercharge your Android UI

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)

Page 36: Supercharge your Android UI

Custom ViewGroups

https://developer.android.com/design/patterns/index.html

Page 37: Supercharge your Android UI

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

Page 38: Supercharge your Android UI

ListView 3D

● Custom ViewGroup

● 3D Effekt mit Canvas API

● Bitmap Caching

MTCRichGraphics

MTCRichGraphics

Page 39: Supercharge your Android UI

https://github.com/inovex/ViewPager3D

Demo ViewPager3d

● 3D mit Canvas API

● Animation

● Multi Touch Handling

● XML-Attribute

Page 40: Supercharge your Android UI

Animationen

Animationen

sollen

sinnvollsein

Page 41: Supercharge your Android UI

Animationen

Page 42: Supercharge your Android UI

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

Page 43: Supercharge your Android UI

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

Page 44: Supercharge your Android UI

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

Page 45: Supercharge your Android UI

ListViewAnimations

Mind the View-recycling!

inspired by Chet Haase's Demo

http://graphics-geek.blogspot.de/2013/02/devbytes-listview-animations.html

Page 46: Supercharge your Android UI

ab 4.1 -> view.setHasTransientState(true);

Alternative:

Custom Adapter

oder

ListViewAnimations-Lib von Niek Haarman

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

ListViewAnimations

Page 47: Supercharge your Android UI

Demo

● Canvas API

● Linear Gradients

● Radial Gradients

● BitmapShader

● ColorFilter

● Animation

● XML-Attribute

● Caching

https://github.com/renard314/LEDView

Page 48: Supercharge your Android UI

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

Page 49: Supercharge your Android UI

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

Page 50: Supercharge your Android UI

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

Page 51: Supercharge your Android UI

DANKE!