Your SlideShare is downloading. ×
0
Supercharge your Android UI
Supercharge your Android UI
Supercharge your Android UI
Supercharge your Android UI
Supercharge your Android UI
Supercharge your Android UI
Supercharge your Android UI
Supercharge your Android UI
Supercharge your Android UI
Supercharge your Android UI
Supercharge your Android UI
Supercharge your Android UI
Supercharge your Android UI
Supercharge your Android UI
Supercharge your Android UI
Supercharge your Android UI
Supercharge your Android UI
Supercharge your Android UI
Supercharge your Android UI
Supercharge your Android UI
Supercharge your Android UI
Supercharge your Android UI
Supercharge your Android UI
Supercharge your Android UI
Supercharge your Android UI
Supercharge your Android UI
Supercharge your Android UI
Supercharge your Android UI
Supercharge your Android UI
Supercharge your Android UI
Supercharge your Android UI
Supercharge your Android UI
Supercharge your Android UI
Supercharge your Android UI
Supercharge your Android UI
Supercharge your Android UI
Supercharge your Android UI
Supercharge your Android UI
Supercharge your Android UI
Supercharge your Android UI
Supercharge your Android UI
Supercharge your Android UI
Supercharge your Android UI
Supercharge your Android UI
Supercharge your Android UI
Supercharge your Android UI
Supercharge your Android UI
Supercharge your Android UI
Supercharge your Android UI
Supercharge your Android UI
Supercharge your Android UI
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Supercharge your Android UI

281

Published on

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 …

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.

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
281
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. SuperchargeYour UI
  • 2. Mobile DevelopmentAndroidingress Level 6dominik-helleberg.de/+DominikHellebergJonasGehringMobile DevelopmentAndroidJavaScripthttps://github.com/jjoe64http://www.jjoe64.com
  • 3. https://play.google.com/store/apps/details?id=com.outlook.Z7Design isimportant
  • 4. This is what happens when you let developers create UIhttp://www.codinghorror.com/blog/2006/11/this-is-what-happens-when-you-let-developers-create-ui.html
  • 5. Stick with Holohttp://developer.android.com/design/index.html
  • 6. Holo is designed by professionaldesigners and let you createbeautiful appshttps://play.google.com/store/apps/details?id=com.michaelpardo.quotes
  • 7. Holo is designed by professionaldesigners and let you createbeautiful appshttps://play.google.com/store/apps/details?id=ch.teamtasks.tasks.paid
  • 8. Don‘t customize it......unless you know what you‘redoinghttps://play.google.com/store/apps/details?id=sweesoft.prohome
  • 9. How to use Holohttps://developer.android.com/design/building-blocks/index.html
  • 10. Mind the Gaphttps://developer.android.com/design/style/metrics-grids.html
  • 11. How to use Holo - Gridshttps://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 OEMVorschlag● Ab Api Level 11 Theme.Holo verwenden (hell: Holo.Light)● Frühere Api Level verwenden Theme.Black. (hell: Theme)
  • 13. android:Theme.BlackDas richtige Theme zur Laufzeit automatisch auswählenres/values/ res/values-v11/ res/values-v14/android:Theme.Holoandroid:Theme.Holoandroid:Theme.MyTheme
  • 14. Das richtige Theme zur Laufzeit automatisch auswählenres/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 Sandwichres/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 gemeinsamenNamen ansprechbar.<activityandroid:theme="@style/Theme.MyTheme.Light.NoTitleBar“...Verwendung in der AndroidManifest.xml
  • 18. #99CC00Colors#33B5E5 #AA66CC #FFBB33 #FF4444#0099CC #9933CC #669900 #FF8800 #CC0000
  • 19. Colorsres/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 Responsivehttp://developer.android.com/training/basics/fragments/fragment-ui.html302 Redirect to Juhani Lehtimäki
  • 21. Build with Holo Componentshttp://developer.android.com/design/patterns/actionbar.html
  • 22. Holo Cheat Sheethttp://petrnohejl.github.io/Android-Cheatsheet-For-Graphic-Designers/
  • 23. Since we use Holo... Life is good....
  • 24. OEMS und Themes
  • 25. WAAAAAAAAAhttp://www.flickr.com/photos/fspugna/4507352674/
  • 26. OEMS und Themes
  • 27. ZusammenfassungBefolgen der Design-Guidlines● Verwenden der Standard-Widgets● Verwenden der Standard-Patterns● Verwenden des Standard-Themes● Verwenden der Standard-Farbpalette● Verwenden von Responsive Design TechniquesGefahr● Gestaltung der App hebt sich womöglich kaum abWie 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 essinnvoll ist)
  • 29. Android Custom Viewshttp://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);}@Overrideprotected void onDraw(Canvas canvas) {canvas.drawColor(Color.RED);}}Most Simple Custom View
  • 31. @Overridepublic boolean onTouchEvent(MotionEvent event)@Overrideprotected void onSizeChanged(int w, int h, int oldw, int oldh)@Overrideprotected void onMeasure(int widthMeasureSpec, intheightMeasureSpec)Größenabhängige BerechnungenSpezielle Anforderungen an die AbmessungenTouch EventsEinige wichtige Methoden
  • 32. Canvas API● Formen (Linien, Ellipsen,Rechtecke etc)● Text● Bitmaps● Zeichenmatrix (Position,Größe, Drehung)Paint API● Gradienten (Kreis undLinear)● Effekte (Blur,...)● Farbfilter● Vermessen von Text● Texteigenschaften● Farbe, Muster, Dickevon FormenView Drawing
  • 33. keines Paint BeispielSimplePaintExample
  • 34. GradientsLinearGradientRadialGradientShader.TileModeCLAMP, REPEAT, MIRROR
  • 35. GradientsLinearGradient(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 ViewGroupshttps://developer.android.com/design/patterns/index.html
  • 37. Custom ViewGroupsStatische 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
  • 38. ListView 3D● Custom ViewGroup● 3D Effekt mit Canvas API● Bitmap CachingMTCRichGraphics
  • 39. https://github.com/inovex/ViewPager3DDemo ViewPager3d● 3D mit Canvas API● Animation● Multi Touch Handling● XML-Attribute
  • 40. AnimationenAnimationensollensinnvollsein
  • 41. Animationen
  • 42. Animation Framework:since 3.0ObjectAnimator.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.xPropertyValuesHolder pvhX =PropertyValuesHolder.ofFloat("x", 50f);PropertyValuesHolder pvhY =PropertyValuesHolder.ofFloat("y", 100f);ObjectAnimator.ofPropertyValuesHolder(myView,pvhX, pvyY).start();//since 3.1myView.animate().x(50f).y(100f);
  • 44. 2.x ? NineOldAndroidsUsageThe API is exactly the same as the Honeycomb API, just changeyour imports to use com.nineoldandroids.animation.*http://nineoldandroids.com
  • 45. ListViewAnimationsMind the View-recycling!inspired by Chet Haases Demohttp://graphics-geek.blogspot.de/2013/02/devbytes-listview-animations.html
  • 46. ab 4.1 -> view.setHasTransientState(true);Alternative:Custom AdapteroderListViewAnimations-Lib von Niek Haarmanhttps://bitbucket.org/nhaarman/listviewanimations/ListViewAnimations
  • 47. Demo● Canvas API● Linear Gradients● Radial Gradients● BitmapShader● ColorFilter● Animation● XML-Attribute● Cachinghttps://github.com/renard314/LEDView
  • 48. Vermeide Canvas.drawText ()● Zeilenumbrüche● Zeilenabstände● Vermessen und Positionieren des TextesDafür gibt es Hilfsklassen!StaticLayout: Mehrzeiliger Text der sich nicht ändertDynamicLayout: Mehrzeiliger Text der sich ändertBoringLayout: Einzeiliger Text der sich nicht ändertExample: 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. SummaryStick with HoloUse defaults unless youre a designerUse the techniques from design.android.comOEM Themes DO suckAdd Custom Views / ViewGroups / Animationsto differentiate, but do it right
  • 51. DANKE!

×