Unterlage zur Android Vorlesung "Programmierung von Apps" an der Hochschule Karlsruhe. Die Studierenden kennen die grundlegenden Prinzipien, Patterns und Bestandteile eines Android User Interface und verstehen, wie damit effizient eine Benutzeroberfläche erstellt werden kann.

1. Programmierung
von Apps
Android User Interface
Danny Fürniß, 12.11.2012, 1

2. Die Studierenden
kennen die grundlegenden
Prinzipien, Patterns und Bestandteile
eines Android User Interface
und verstehen, wie damit effizient
eine Benutzeroberfläche erstellt
werden kann.
Danny Fürniß, 12.11.2012, 2

3. Danny Fürniß, 12.11.2012, 3
Motivation

4. Danny Fürniß, 12.11.2012, 4 Bildquelle: http://www.theinfochief.com/wp-content/uploads/2010/09/happy-ipad-user.jpg
glücklich!
Mach Deine Benutzer

5. Danny Fürniß, 12.11.2012, 5
5 Sterne

6. Danny Fürniß, 12.11.2012, 6
being featured

7. Danny Fürniß, 12.11.2012, 7 Bildquelle: http://www.kascommissiegids.nl/images/dagobert_duck_geldpakhuis.jpg
More installs, more money!

8. Danny Fürniß, 12.11.2012, 8
Prinzipien

9. Be usable
Be beautiful
Be responsive
Be Android
Danny Fürniß, 12.11.2012, 9

10. Danny Fürniß, 12.11.2012, 10
Concept first!

11. Danny Fürniß, 12.11.2012, 12
ms

12. Danny Fürniß, 12.11.2012, 13
Demo

13. Danny Fürniß, 12.11.2012, 14
Patterns

14. Dashboard
Danny Fürniß, 12.11.2012, 15
Bildquelle: http://www.androiduipatterns.com/p/android-ui-pattern-collection.html

15. Dashboard
Danny Fürniß, 12.11.2012, 16
Bildquelle: http://donstorch.com/2012/09/24/rest-in-peace/

16. Drawer
Danny Fürniß, 12.11.2012, 17
Bildquelle: http://www.androiduipatterns.com/2012/06/emerging-ui-pattern-side-navigation.html

17. Navigation
Danny Fürniß, 12.11.2012, 18
Bildquelle: http://developer.android.com/design/patterns/navigation.html

18. Danny Fürniß, 12.11.2012, 19
Bildquelle: http://developer.android.com/design/patterns/navigation.html

19. Action Bar
Danny Fürniß, 12.11.2012, 20
Bildquelle: http://developer.android.com/design/patterns/actionbar.html

20. Danny Fürniß, 12.11.2012, 21
Bildquelle: http://developer.android.com/design/patterns/actionbar.html

21. Danny Fürniß, 12.11.2012, 22
Bildquelle: http://developer.android.com/design/patterns/actionbar.html

22. Danny Fürniß, 12.11.2012, 23
Bildquelle: http://developer.android.com/design/patterns/actionbar.html

23. Quick Actions
Danny Fürniß, 12.11.2012, 24
Bildquelle:http://www.androiduipatterns.com/p/android-ui-pattern-collection.html

24. Danny Fürniß, 12.11.2012, 25
Views und Layout

25. deklarativ vs. prozedural
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout new LinearLayout()
<TextView new TextView()
android:id="@+id/textView1"
android:text="Dauer in Millisekunden"/>
<EditText new EditText()
android:id="@+id/delayTextView"
android:text="200" >
</EditText>
<Button new Button()
android:id="@+id/startTaskButton"
android:text="Starte LongRunningTask" />
Danny Fürniß, 12.11.2012, 26
</LinearLayout>
XML Java

26. android.view.View
View
Basisklasse aller UI Elemente
Danny Fürniß, 12.11.2012, 27

27. android.view.ViewGroup
Danny Fürniß, 12.11.2012, 28
Basisklasse der Layouts

28. Danny Fürniß, 12.11.2012, 29
FrameLayout

29. Danny Fürniß, 12.11.2012, 30
LinearLayout

30. Danny Fürniß, 12.11.2012, 31
GridLayout

31. Danny Fürniß, 12.11.2012, 32
android.view.ViewStub

32. View Hierarchy
Danny Fürniß, 12.11.2012, 33
Max 10 Ebenen, Max 80 Views je Screen
Demo
Bildquelle: http://developer.android.com/guide/topics/ui/index.html

33. Danny Fürniß, 12.11.2012, 34
Bildquelle: http://android-developers.blogspot.de/2009/03/android-layout-tricks-3-optimize-by.html

34. <?xml version="1.0" encoding="utf‐8"?>
<merge/>
<merge xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/large_text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
Danny Fürniß, 12.11.2012, 35
android:text="@string/button" />
</merge>

35. View properties
layout_height layout_weight
layout_width
gravity
layout_gravity
visibility
Danny Fürniß, 12.11.2012, 36
text id …
Demo

36. Density Independent Pixels
px
dip/dp
Beispiel: Samsung Galaxy S (4 Zoll, 480x800 Pixel) 480 800
Danny Fürniß, 12.11.2012, 37
Baseline: 160dpi (mdpi) 480 800 932,952
c = Screendiagonale in Pixeln
Faktor SGS: 240dpi / 160dpi = 1,5 932,952
Displaygröße in dp: 320dp x 533dp 233,238 240
4
Quelle: http://www.brandbuildercompany.com/blog/2012/03/29/device-independent-pixel-formula-for-mobile-devices/,
Bildquelle: http://developer.android.com/guide/practices/screens_support.html

37. Custom Views
• Nutzung bestehender Views als
Basis für Überschreibung
• Implementierung „from Scratch“ durch
Ableitung von android.view.View
• Compound Views (Kombination
bestehender Views)
Danny Fürniß, 12.11.2012, 38

38. Input Events
onClick() View.OnClickListener
boolean onLongClick() View.OnLongClickListener
boolean onKey() View.OnKeyListener
boolean onTouch() View.OnTouchListener
...
Danny Fürniß, 12.11.2012, 39

39. Danny Fürniß, 12.11.2012, 40
Framework
Input Method
Demo

40. Danny Fürniß, 12.11.2012, 41
Listen und Adapter

41. Danny Fürniß, 12.11.2012, 42
Adapter

42. Danny Fürniß, 12.11.2012, 43
Thanks Romain Guy
ListView

43. Danny Fürniß, 12.11.2012, 44
Thanks Romain Guy

44. Danny Fürniß, 12.11.2012, 45
Thanks Romain Guy

45. Danny Fürniß, 12.11.2012, 46
Thanks Romain Guy

46. Danny Fürniß, 12.11.2012, 47
Thanks Romain Guy

47. ViewHolder Pattern
static class ViewHolder {
TextView name;
ImageView icon;
}
Danny Fürniß, 12.11.2012, 48

48. public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder holder;
if (convertView == null) {
convertView = mInflater.inflate(R.layout.sample, null);
holder = new ViewHolder();
holder.name = (TextView)convertView.findViewById(R.id.text);
holder.icon = (ImageView)convertView.findViewById(R.id.icon);
convertView.setTag(holder);
} else {
holder = (ViewHolder) convertView.getTag();
}
holder.name.setText(myElements.get(id));
Danny Fürniß, 12.11.2012, 49
holder.icon.setImageBitmap( mIcon1 );
return convertView;
}

49. Danny Fürniß, 12.11.2012, 50
Threading

50. Use Strict Mode
public void onCreate() {
if (DEVELOPER_MODE) {
StrictMode.setThreadPolicy(
new StrictMode.ThreadPolicy.Builder()
.detectDiskReads()
.detectDiskWrites()
.detectNetwork()
.penaltyLog()
.build());
StrictMode.setVmPolicy(
new StrictMode.VmPolicy.Builder()
.detectLeakedSqlLiteObjects()
.detectLeakedClosableObjects()
.penaltyLog()
.penaltyDeath()
Danny Fürniß, 12.11.2012, 51
.build());
}
super.onCreate();
}

51. public class LongRunningAsyncTask extends AsyncTask<Params, Progress, Result> {
protected void onPreExecute() {
// Wird im UI-Thread ausgeführt.
}
protected Result doInBackground(Params... params) {
// Wird In einem neuen Background-Thread ausgeführt.
publishProgress(Progress)
return Result;
}
protected void onProgressUpdate(Progress... values) {
// Wird im UI-Thread ausgeführt.
}
protected void onPostExecute(Result result) {
// Wird im UI-Thread ausgeführt.
}
}
Danny Fürniß, 12.11.2012, 52
new LongRunningAsyncTask().execute(Params);
Demo

52. Danny Fürniß, 12.11.2012, 53
Trace View
Demo

53. Danny Fürniß, 12.11.2012, 54
Menus

54. OptionsMenu
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.optionsmenu, menu);
return true;
}
Danny Fürniß, 12.11.2012, 55
Bildquelle: http://developer.android.com/guide/topics/ui/menus.html

55. ContextMenu/Contextual Action Mode
Danny Fürniß, 12.11.2012, 56
Bildquelle: http://developer.android.com/guide/topics/ui/menus.html

56. Danny Fürniß, 12.11.2012, 57
Preferences

57. Preferences
• PreferenceActivity / PreferenceFragment
• PreferenceScreen
• PreferenceCategory
• CheckBoxPreference
• EditTextPreference
• ListPreference
• MultiSelectListPreference
…
Danny Fürniß, 12.11.2012, 58
•
Demo

58. PreferenceScreen
<PreferenceScreen
xmlns:android="http://schemas.android.com/apk/res/android"
android:key="first_preferencescreen">
<CheckBoxPreference
android:key="wifi enabled"
android:title="WiFi" />
<PreferenceScreen
android:key="second_preferencescreen"
android:title="WiFi settings">
<CheckBoxPreference
android:key="prefer wifi"
android:title="Prefer WiFi" />
...
Danny Fürniß, 12.11.2012, 59
</PreferenceScreen>
</PreferenceScreen>

59. Danny Fürniß, 12.11.2012, 60
Eye Candy

60. Danny Fürniß, 12.11.2012, 61
Styles and Themes

61. Danny Fürniß, 12.11.2012, 62
Styles and Themes

62. Drawable Resources
• 2D Graphics
• Erstellt aus Bilddateien
• Erstellt aus XML-Ressourcen
Danny Fürniß, 12.11.2012, 63

63. BitmapDrawable
/res/drawable
(.png empfohlen, .jpg, .gif)
Danny Fürniß, 12.11.2012, 64

64. NinePatchDrawable
Danny Fürniß, 12.11.2012, 65
<Dateiname>.9.png
Beispiel: MyButton.9.png

65. Layer-List
(LayerDrawable)
<?xml version="1.0" encoding="utf-8"?>
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:drawable="@[package:]drawable/drawable_resource"
android:id="@[+][package:]id/resource_name"
android:top="dimension"
android:right="dimension"
android:bottom="dimension"
android:left="dimension" />
</layer-list>
Danny Fürniß, 12.11.2012, 66

66. Suchlauf von oben nach unten (default State sollte ganz unten stehen)
State-List
(StateListDrawable)
<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android"
android:constantSize=["true" | "false"]
android:dither=["true" | "false"]
android:variablePadding=["true" | "false"] >
<item
android:drawable="@[package:]drawable/drawable_resource"
android:state_pressed=["true" | "false"]
android:state_focused=["true" | "false"]
android:state_hovered=["true" | "false"]
android:state_selected=["true" | "false"]
android:state_checkable=["true" | "false"]
Danny Fürniß, 12.11.2012, 67
android:state_checked=["true" | "false"]
android:state_enabled=["true" | "false"]
android:state_activated=["true" | "false"]
android:state_window_focused=["true" | "false"] />
</selector>

67. Level-List
(LevelListDrawable)
<?xml version="1.0" encoding="utf-8"?>
<level-list
xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:drawable="@drawable/drawable_resource"
android:maxLevel="integer"
android:minLevel="integer" />
</level-list>
Danny Fürniß, 12.11.2012, 68

68. TransitionDrawable
<?xml version="1.0" encoding="utf-8"?>
<transition
xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:drawable="@[package:]drawable/drawable_resource"
android:id="@[+][package:]id/resource_name"
android:top="dimension"
android:right="dimension"
android:bottom="dimension"
android:left="dimension" />
</transition>
Danny Fürniß, 12.11.2012, 69

69. ShapeDrawable 1/2
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape=["rectangle" | "oval" | "line" | "ring"] >
<corners
android:radius="integer"
android:topLeftRadius="integer"
android:topRightRadius="integer"
android:bottomLeftRadius="integer"
android:bottomRightRadius="integer" />
<gradient
android:angle="integer"
android:centerX="integer"
android:centerY="integer"
android:centerColor="integer"
Danny Fürniß, 12.11.2012, 70
android:endColor="color"
android:gradientRadius="integer"
android:startColor="color"
android:type=["linear" | "radial" | "sweep"]
android:useLevel=["true" | "false"] />

70. ShapeDrawable 2/2
<padding
android:left="integer"
android:top="integer"
android:right="integer"
android:bottom="integer" />
<size
android:width="integer"
android:height="integer" />
<solid
android:color="color" />
<stroke
android:width="integer"
android:color="color"
Danny Fürniß, 12.11.2012, 71
android:dashWidth="integer"
android:dashGap="integer" />
</shape>

71. Animation Resources
• Property Animation (any object)
• Tween Animation (views only)
• Drawable Animation
Danny Fürniß, 12.11.2012, 72

72. Danny Fürniß, 12.11.2012, 73
Color und alpha kanal

73. Portions of this presentation
are modifications based on
work created and shared by
Google and used according
to terms described in
the Creative Commons 3.0
Attribution License.
Danny Fürniß, 12.11.2012, 74