Download - Supercharge your ui
Supercharge
Your UI
Mobile DevelopmentAndroidHTML5
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
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
Sinnvoll einsetzen
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();
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!