0
Android UIs für alle(s)
Konzepte für die adaptive UI-Entwicklung
Andreas Hölzl
Canoo Engineering AG
Thursday, March 14, 13
Agenda
๏ Grundlagen
‣ Auflösungsunabhängigkeit
‣ Multi-Screen-Support
๏ Fragments
‣ phone ∪ tablet
2
๏ Best Practices
‣ De...
Wer bin ich?
3
@andywoodly
Thursday, March 14, 13
Fragmentierung ... Differenzierung ...
4
Eric Schmidt, CES 2012:
“Differentiation is positive, fragmentation is negative.”...
Fragmentierung ... Differenzierung ...
5
http://www.forbes.com/sites/limyunghui/2012/03/27/android-fragmentation-and-condo...
Auflösungsunabhängigkeit
Thursday, March 14, 13
Auflösungsabhängigkeit
7
low density medium density high density
low density high density
Thursday, March 14, 13
Auflösungs un abhängigkeit
8
low density high density
low density medium density high density
Thursday, March 14, 13
Auflösungs un abhängigkeit
9
Bei Grössenangaben immer dp verwenden!
px dp
๏ Ursache der Abhängigkeit: px
๏ Lösung: dp / sp...
๏ [l|m|h|xh]dpi - generalized densities
Auflösungsklassen
10
~120dpi ~160dpi ~240dpi ~320dpi
Auflösung (dpi)
Auflösungskla...
Auflösungsklassen
11
๏ Skalierungsfaktoren
xhdpi launcher icon (nexus 10)
48
38
72
96
144
launcher icon
px
3:4:6:8 Verhält...
12
Auflösungsklassen
/res/drawable ist nur für XML!
Grafiken immer in Ordner mit
Auflösungs-Klassifizierer verwalten
๏ Projek...
Auflösungs un abhängigkeit
13
Resources res = getResources();
DisplayMetrics metrics = res.getDisplayMetrics();
float scal...
14
Auflösungsklassen
๏ Tooling (Eclipse, ADT Plugin 20.0.0+)
Thursday, March 14, 13
15
Auflösungsklassen
๏ Tooling (Eclipse, ADT Plugin 20.0.0+)
Thursday, March 14, 13
16
Auflösungsklassen
๏ Tooling (Eclipse, ADT Plugin 20.0.0+)
Thursday, March 14, 13
17
Auflösungsklassen
๏ Tooling (Android Asset Studio)
Thursday, March 14, 13
18
Auflösungsklassen
๏ Lint
http://tools.android.com/tips/lint-checks
Thursday, March 14, 13
19
Auflösungsklassen
๏ Marktdaten
http://developer.android.com/about/dashboards/index.html
October 1, 2012
Thursday, March...
Multi-Screen-Support
Thursday, March 14, 13
21
http://www.google.de/nexus/
Thursday, March 14, 13
22
Thursday, March 14, 13
23
Screen Sizes
Bildschirmgrösse (inch)
Grössenklasse
2 4 7 10
small normal large xlarge
Thursday, March 14, 13
Multi-Screen-Support
24
Ziel: korrektes Resize-Verhalten
Thursday, March 14, 13
Multi-Screen-Support
25
<LinearLayout android:id="@+id/linearLayout1"
android:layout_height="50dp"
android:layout_width="m...
Multi-Screen-Support
26
๏ korrektes Resizing
‣ geschachtelte LinearLayout vermeiden
‣ RelativeLayout verwenden
LinearLayou...
Multi-Screen-Support
27
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="m...
28
Skalierbare Grafiken
๏ Nine-Patch Images
http://android-ui-utils.googlecode.com/hg/asset-studio/dist/nine-patches.html
...
29
Skalierbare Grafiken
๏ Beispiel Nine-Patch Image - action bar shadow
Versionen für mdpi, hdpi, xhdpi erforderlich
Thurs...
Multi-Screen-Support
30
Ziel: Screen-optimierte Layouts
small
normal
res/layout/my_layout.xml
res/layout-small/my_layout.x...
Multi-Screen-Support
31
res/layout/my_layout.xml             // normal screen size ("default")
res/layout-small/my_layout....
Multi-Screen-Support
32
๏ optimierte Ressourcen
‣ sw<N>dp
‣ w<N>dp, h<N>dp
res/layout/main_activity.xml           # smalle...
33
Screen Sizes - Smallest Width
320dp 480dp 600dp 720dp
res/layout/main_activity.xml           # For phones
res/layout-sw...
34
Multi-Screen-Support - Tooling
Thursday, March 14, 13
Fragments
A fragment a day
keeps the fragmentation at bay!
Thursday, March 14, 13
36
Fragments
Thursday, March 14, 13
37
✔ wiederverwendbare (UI-)Komponente
✔ “Sub-Activity”
✔ eigener Lifecycle
✔ immer an Activity gebunden
✔ lose Kopplung
F...
38
Fragments - Anwendungsprinzip
๏ Fragment
‣ UI-Komponente
๏ Activity-Layout (XML)
‣ verwendet Fragments
๏ Activity-Klass...
39
Fragments - Resourcen-Switch
res/layout/main.xml
res/layout-w600dp/main.xml
<LinearLayout xmlns:android="http://schemas...
40
Fragments - Anwendung
res/layout/main.xml
res/layout-w600dp/main.xml
Activity A
src/
Activity B
Fragment A
Fragment B
I...
41
Fragments - Implementierung
Activity A
src/
Activity B
Fragment A
Fragment B
Activity A
Fragment A
Fragment B
@Override...
42
Fragments - Implementierung II
Activity A
src/
Activity B
Fragment A
Fragment B
Activity A
Fragment A
Fragment B
@Overr...
43
Fragments - Implementierung III programmatisch
FragmentTransaction ftx = getFragmentManager().beginTransaction();
Detai...
44
Fragments/Activity - Kommunikation
notify
listen to
Activity A Fragment A
๏ Listener Pattern
‣ wiederverwertbare Kompon...
Fragments - Lifecycle
45
onAttach()
Activity/Context steht zur Verfügung.
onCreate()
Initialisierung essentieller Komponen...
Fragments
pre 3.0
happy path
Thursday, March 14, 13
๏ pre 3.0 devices
‣ <sdk>/extras/android/support/v4/android-support-v4.jar.
http://developer.android.com/tools/extras/supp...
Support Library + Fragments + Map (pre Maps v2)
48
“Maps + Fragments +
Support package =
headache”
http://nextlevelandroid...
Support Library + MapFragment (Maps v2)
49
<fragment
class="com.google.android.gms.maps.SupportMapFragment"
android:layout...
Support Library + MapFragment + ActionbarSherlock
50
ActionbarSherlock-Erweiterung notwendig
public class SherlockMapFragm...
Nested Fragments
๏ seit November 2012, Version 4.2
51
Unterstützt nur programmatische Verwendung von Fragments
Child Fragm...
Design Pattern
Thursday, March 14, 13
53
Design Pattern
Show / Hide
Ausblenden eines
Fragments, Rück-
Navigation mittels
Up-Action.
Thursday, March 14, 13
54
Design Pattern
Stretch/compress
Fragments passen sich
in der Breite an.
Thursday, March 14, 13
55
Design Pattern
Expand / Collapse
Aktive Komponente
erhält mehr Platz.
Thursday, March 14, 13
56
Design Pattern
Stack
Neuanordnung der
Fragments (v.a. bei
Orientierungswechsel).
Thursday, March 14, 13
57
Design Pattern
“Tabs To Columns”
Tabs / ViewPages werden nebeneinander dargestellt.
https://code.google.com/p/iosched/
...
Tooling
Thursday, March 14, 13
59
Tooling - Eclipse
Multi-configuration editing
RelativeLayout support, spacing defaults
Asset wizard
New activity wizard...
60
Tooling - Monitor, DDMS (screen snapshot)
$ ./tools/monitor
Hilfreich bei dynamischen Layouts/Fragments
Thursday, March...
61
Tooling - Monitor, Hierarchyviewer
$ ./tools/monitor
nur Emulator / developer devices
Thursday, March 14, 13
Summary
Thursday, March 14, 13
63
Cheat Sheet
✔ dp Dimensionen
✔ Auflösungsspezifische Bild-Ressourcen
✔ wrap_content, match_parent
✔ RelativeLayout
✔ Sc...
Ressourcen
Thursday, March 14, 13
65
๏ Official Documentation
‣ Android Design Guide
http://developer.android.com/design/index.html
‣ Supporting Multiple Sc...
66
๏ App Clinic
http://goo.gl/piLXJ
๏ Android Design in Action - Android Developers
http://goo.gl/skOPD
http://goo.gl/JGB4...
67
๏ Google I/O
‣ Schedule app
https://code.google.com/p/iosched/
‣ What's New in Android Developers' Tools
http://www.you...
68
๏ Juhani Lehtimäki
‣ Smashing Android UI
http://www.androiduipatterns.com/
http://eu.wiley.com/WileyCDA/WileyTitle/prod...
69
๏ Apps mit beispielhaftem Design
‣ Google I/O 2012
https://code.google.com/p/iosched/
‣ Gmail
com.google.android.gm
‣ T...
Upcoming SlideShare
Loading in...5
×

MTC13 Android UIs für alle(s)

1,603

Published on

Slide to my MobileTechCon 2013 talk in Munich on Android multi-screen support, see http://nextlevelandroid.com/?p=252

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

  • Be the first to like this

No Downloads
Views
Total Views
1,603
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "MTC13 Android UIs für alle(s)"

  1. 1. Android UIs für alle(s) Konzepte für die adaptive UI-Entwicklung Andreas Hölzl Canoo Engineering AG Thursday, March 14, 13
  2. 2. Agenda ๏ Grundlagen ‣ Auflösungsunabhängigkeit ‣ Multi-Screen-Support ๏ Fragments ‣ phone ∪ tablet 2 ๏ Best Practices ‣ Design Pattern ๏ Tooling ‣ ADK, Eclipse ๏ Ressourcen 2244 unterschiedliche Geräte - 1 Code-Basis Ziel: Alles Wichtige in 1h, sonst ... Thursday, March 14, 13
  3. 3. Wer bin ich? 3 @andywoodly Thursday, March 14, 13
  4. 4. Fragmentierung ... Differenzierung ... 4 Eric Schmidt, CES 2012: “Differentiation is positive, fragmentation is negative.” Thursday, March 14, 13
  5. 5. Fragmentierung ... Differenzierung ... 5 http://www.forbes.com/sites/limyunghui/2012/03/27/android-fragmentation-and-condoms/ Thursday, March 14, 13
  6. 6. Auflösungsunabhängigkeit Thursday, March 14, 13
  7. 7. Auflösungsabhängigkeit 7 low density medium density high density low density high density Thursday, March 14, 13
  8. 8. Auflösungs un abhängigkeit 8 low density high density low density medium density high density Thursday, March 14, 13
  9. 9. Auflösungs un abhängigkeit 9 Bei Grössenangaben immer dp verwenden! px dp ๏ Ursache der Abhängigkeit: px ๏ Lösung: dp / sp (devices independent pixel) ... sp für Textgrössen Thursday, March 14, 13
  10. 10. ๏ [l|m|h|xh]dpi - generalized densities Auflösungsklassen 10 ~120dpi ~160dpi ~240dpi ~320dpi Auflösung (dpi) Auflösungsklasse 100 200 300 ldpi mdpi hdpi xhdpi tvdpi xxhdpi Thursday, March 14, 13
  11. 11. Auflösungsklassen 11 ๏ Skalierungsfaktoren xhdpi launcher icon (nexus 10) 48 38 72 96 144 launcher icon px 3:4:6:8 Verhältnis Thursday, March 14, 13
  12. 12. 12 Auflösungsklassen /res/drawable ist nur für XML! Grafiken immer in Ordner mit Auflösungs-Klassifizierer verwalten ๏ Projekt-Ressourcen drawable-120dpi drawable-160dpi drawable-240dpi drawable-320dpi drawable-480dpi ? Thursday, March 14, 13
  13. 13. Auflösungs un abhängigkeit 13 Resources res = getResources(); DisplayMetrics metrics = res.getDisplayMetrics(); float scale = metrics.density; px ๏ Problem: px -basierte APIs? ๏ Lösung: DisplayMetrics.density Thursday, March 14, 13
  14. 14. 14 Auflösungsklassen ๏ Tooling (Eclipse, ADT Plugin 20.0.0+) Thursday, March 14, 13
  15. 15. 15 Auflösungsklassen ๏ Tooling (Eclipse, ADT Plugin 20.0.0+) Thursday, March 14, 13
  16. 16. 16 Auflösungsklassen ๏ Tooling (Eclipse, ADT Plugin 20.0.0+) Thursday, March 14, 13
  17. 17. 17 Auflösungsklassen ๏ Tooling (Android Asset Studio) Thursday, March 14, 13
  18. 18. 18 Auflösungsklassen ๏ Lint http://tools.android.com/tips/lint-checks Thursday, March 14, 13
  19. 19. 19 Auflösungsklassen ๏ Marktdaten http://developer.android.com/about/dashboards/index.html October 1, 2012 Thursday, March 14, 13
  20. 20. Multi-Screen-Support Thursday, March 14, 13
  21. 21. 21 http://www.google.de/nexus/ Thursday, March 14, 13
  22. 22. 22 Thursday, March 14, 13
  23. 23. 23 Screen Sizes Bildschirmgrösse (inch) Grössenklasse 2 4 7 10 small normal large xlarge Thursday, March 14, 13
  24. 24. Multi-Screen-Support 24 Ziel: korrektes Resize-Verhalten Thursday, March 14, 13
  25. 25. Multi-Screen-Support 25 <LinearLayout android:id="@+id/linearLayout1" android:layout_height="50dp" android:layout_width="match_parent" android:gravity="center"> <ImageView android:id="@+id/imageView1" android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_weight="0" android:paddingRight="30dp" android:layout_gravity="left" android:src="@drawable/logo" /> <View android:id="@+id/view1" android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_weight="1" /> <Button android:id="@+id/categorybutton" android:background="@drawable/button_bg" android:layout_height="match_parent" android:layout_width="120dp" android:layout_weight="0" /> </LinearLayout> ๏ korrektes Resizing ‣ fixe Dimensionsangaben nur wo sinnvoll ‣ match_parent verwenden ‣ wrap_content verwenden Thursday, March 14, 13
  26. 26. Multi-Screen-Support 26 ๏ korrektes Resizing ‣ geschachtelte LinearLayout vermeiden ‣ RelativeLayout verwenden LinearLayout (vertical) |- LinearLayout (horizontal) |- LinearLayout (horizontal) RelativeLayout Thursday, March 14, 13
  27. 27. Multi-Screen-Support 27 <RelativeLayout 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:layout_alignParentLeft="true" android:layout_alignParentTop="true" android:text="Very Long Text" /> <EditText android:id="@+id/editText1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:layout_toRightOf="@+id/textView1" /> <TextView android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_below="@+id/editText1" android:text="Text" /> <EditText android:id="@+id/editText2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignLeft="@+id/editText1" > </EditText> </RelativeLayout> ๏ RelativeLayout Thursday, March 14, 13
  28. 28. 28 Skalierbare Grafiken ๏ Nine-Patch Images http://android-ui-utils.googlecode.com/hg/asset-studio/dist/nine-patches.html <sdk>/tools/draw9patch Thursday, March 14, 13
  29. 29. 29 Skalierbare Grafiken ๏ Beispiel Nine-Patch Image - action bar shadow Versionen für mdpi, hdpi, xhdpi erforderlich Thursday, March 14, 13
  30. 30. Multi-Screen-Support 30 Ziel: Screen-optimierte Layouts small normal res/layout/my_layout.xml res/layout-small/my_layout.xml Thursday, March 14, 13
  31. 31. Multi-Screen-Support 31 res/layout/my_layout.xml             // normal screen size ("default") res/layout-small/my_layout.xml       // small screen size res/layout-large/my_layout.xml       // large screen size res/layout-xlarge/my_layout.xml      // extra large screen size res/layout-xlarge-land/my_layout.xml // extra large in landscape orientation ๏ optimierte Ressourcen ‣ screen size qualifier (small, normal, large, xlarge) ‣ orientation qualifier (port, land) ‣ locale, etc. qualifier @Deprecated Thursday, March 14, 13
  32. 32. Multi-Screen-Support 32 ๏ optimierte Ressourcen ‣ sw<N>dp ‣ w<N>dp, h<N>dp res/layout/main_activity.xml           # smaller than 600dp available width res/layout-sw600dp/main_activity.xml   # For 7” tablets (600dp wide and bigger) res/layout-sw720dp/main_activity.xml   # For 10” tablets (720dp wide and bigger) seit 3.2 res/layout/main_activity.xml         # smaller than 600dp available width res/layout-w600dp/main_activity.xml   # any screen with >=600dp available Die allermeisten Tablets verwenden >=3.2 res/layout/main_activity.xml           # For phones res/layout-xlarge/main_activity.xml    # For pre-3.2 tablets res/layout-sw600dp/main_activity.xml   # For 3.2 and up tablets Thursday, March 14, 13
  33. 33. 33 Screen Sizes - Smallest Width 320dp 480dp 600dp 720dp res/layout/main_activity.xml           # For phones res/layout-sw600dp/main_activity.xml   # For tablet res/layout-sw720dp/main_activity.xml   # For 10” tablets res/layout-w600dp/main_activity.xml   # Multi-pane when enough width Best practice Thursday, March 14, 13
  34. 34. 34 Multi-Screen-Support - Tooling Thursday, March 14, 13
  35. 35. Fragments A fragment a day keeps the fragmentation at bay! Thursday, March 14, 13
  36. 36. 36 Fragments Thursday, March 14, 13
  37. 37. 37 ✔ wiederverwendbare (UI-)Komponente ✔ “Sub-Activity” ✔ eigener Lifecycle ✔ immer an Activity gebunden ✔ lose Kopplung Fragments Thursday, March 14, 13
  38. 38. 38 Fragments - Anwendungsprinzip ๏ Fragment ‣ UI-Komponente ๏ Activity-Layout (XML) ‣ verwendet Fragments ๏ Activity-Klasse ‣ Inter-Fragment-Logik ๏ XML-Ressourcen ‣ “Switch” Thursday, March 14, 13
  39. 39. 39 Fragments - Resourcen-Switch res/layout/main.xml res/layout-w600dp/main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="horizontal" > <fragment android:name="com.example.android.FragmentA" android:layout_width="0dp" android:layout_weight="1" android:layout_height="match_parent" /> <fragment android:name="com.example.android.FragmentB" android:layout_width="0dp" android:layout_weight="2" android:layout_height="match_parent" /> </LinearLayout> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="horizontal" > <fragment android:name="com.example.android.FragmentA" android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout> Thursday, March 14, 13
  40. 40. 40 Fragments - Anwendung res/layout/main.xml res/layout-w600dp/main.xml Activity A src/ Activity B Fragment A Fragment B Intent: Activity B Activity A event Update Fragment B Fragment B sichtbar? Ja Nein Activity A Fragment A Fragment B Thursday, March 14, 13
  41. 41. 41 Fragments - Implementierung Activity A src/ Activity B Fragment A Fragment B Activity A Fragment A Fragment B @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); // find our fragments mFragmentA = (FragmentA) getFragmentManager().findFragmentById(R.id.fragment_a); mFragmentB = (FragmentB) getFragmentManager().findFragmentById(R.id.fragment_b); // Determine whether we are in single-pane or dual-pane mIsDualPane = mFragmentB != null; } ActivityA.java @Override public void onItemSelected(int index) { if (mIsDualPane) { // display it on the article fragment mFragmentB.displayStuff(...); } else { // use separate activity Intent i = new Intent(this, ActivityB.class); i.putExtra("stuff", ...); startActivity(i); } } Thursday, March 14, 13
  42. 42. 42 Fragments - Implementierung II Activity A src/ Activity B Fragment A Fragment B Activity A Fragment A Fragment B @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); ... // Determine whether we are in single-pane or dual-pane mIsDualPane = getResources().getBoolean(R.bool.has_two_panes) } ActivityA.java Alternativer Layout-Switch <resources> <bool name="has_two_panes">false</bool> </resources> <resources> <bool name="has_two_panes">true</bool> </resources> res/values/layouts.xml res/values-w600dp/layouts.xml Thursday, March 14, 13
  43. 43. 43 Fragments - Implementierung III programmatisch FragmentTransaction ftx = getFragmentManager().beginTransaction(); DetailFragment fragment = new DetailFragment(); ftx.add(R.id.fragment_container, fragment); ftx.setTransition(FragmentTransaction.TRANSIT_FRAGMENT_FADE); ftx.addToBackStack(null); ftx.commit(); add(), remove(), replace(), show(), hide() kein remove(), replace() auf XML-deklarierten Fragments! Thursday, March 14, 13
  44. 44. 44 Fragments/Activity - Kommunikation notify listen to Activity A Fragment A ๏ Listener Pattern ‣ wiederverwertbare Komponenten ‣ lose Kopplung setter Thursday, March 14, 13
  45. 45. Fragments - Lifecycle 45 onAttach() Activity/Context steht zur Verfügung. onCreate() Initialisierung essentieller Komponenten, welcher während paused, stopped, resumed beibehalten werden sollen. onCreateView() Initialisierung der Fragment-(Main)View (LayoutInflater). onPause() Speicherung aller Zustände, die über die aktuelle Session persistiert werden sollen. Thursday, March 14, 13
  46. 46. Fragments pre 3.0 happy path Thursday, March 14, 13
  47. 47. ๏ pre 3.0 devices ‣ <sdk>/extras/android/support/v4/android-support-v4.jar. http://developer.android.com/tools/extras/support-library.html Support Library 47 • FragmentActivity • Fragment • FragmentManager • FragmentTransaction • ListFragment • DialogFragment FragmentActivity.getSupportFragmentManager() Thursday, March 14, 13
  48. 48. Support Library + Fragments + Map (pre Maps v2) 48 “Maps + Fragments + Support package = headache” http://nextlevelandroid.com/?p=114 public class MapFragment extends LocalActivityManagerFragment { private TabHost mTabHost; @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.map_fragment, container, false); mTabHost = (TabHost) view.findViewById(android.R.id.tabhost); mTabHost.setup(getLocalActivityManager()); TabSpec tab = mTabHost.newTabSpec("map") .setIndicator("map") .setContent(new Intent(getActivity(), MyMapActivity.class)); mTabHost.addTab(tab); /* * hack!!! * view hierarchy is: * PhomeWindow$DecorView$.../FrameLayout/LinearLayout/MapView * findViewById() does not work directly on tab content view */ mMapView = (MyMapView) mTabHost.getTabContentView().getChildAt(0).findViewById(R.id.mapview); ... return view; } public class LocalActivityManagerFragment extends Fragment { private static final String KEY_STATE_BUNDLE = "localActivityManagerState"; private LocalActivityManager mLocalActivityManager; protected LocalActivityManager getLocalActivityManager() { return mLocalActivityManager; } ... } Problem: MapView ⇔ MapActivity Thursday, March 14, 13
  49. 49. Support Library + MapFragment (Maps v2) 49 <fragment class="com.google.android.gms.maps.SupportMapFragment" android:layout_width="match_parent" android:layout_height="match_parent"/> Installation über Google Play Services SDK Google Maps Android API v2 The Google Maps Android API v2 Utopia http://android.cyrilmottier.com/?p=855 Thursday, March 14, 13
  50. 50. Support Library + MapFragment + ActionbarSherlock 50 ActionbarSherlock-Erweiterung notwendig public class SherlockMapFragment extends SupportMapFragment {} http://stackoverflow.com/questions/13721929/using-actionbarsherlock-with-the-new-supportmapfragment Thursday, March 14, 13
  51. 51. Nested Fragments ๏ seit November 2012, Version 4.2 51 Unterstützt nur programmatische Verwendung von Fragments Child Fragment: getChildFragmentManager() Asynchrone Initialisierung notwendig (Bsp.: Fragment mit ViewPager mit Fragments) private class SetAdapterTask extends AsyncTask<Void,Void,Void>{ protected Void doInBackground(Void... params) { return null; } @Override protected void onPostExecute(Void result) { mViewPager.setAdapter(mPagerAdapter); mViewPager.setCurrentItem(mSelectedTab); mViewPager.setOffscreenPageLimit(3); } } ViewPagerFragment Thursday, March 14, 13
  52. 52. Design Pattern Thursday, March 14, 13
  53. 53. 53 Design Pattern Show / Hide Ausblenden eines Fragments, Rück- Navigation mittels Up-Action. Thursday, March 14, 13
  54. 54. 54 Design Pattern Stretch/compress Fragments passen sich in der Breite an. Thursday, March 14, 13
  55. 55. 55 Design Pattern Expand / Collapse Aktive Komponente erhält mehr Platz. Thursday, March 14, 13
  56. 56. 56 Design Pattern Stack Neuanordnung der Fragments (v.a. bei Orientierungswechsel). Thursday, March 14, 13
  57. 57. 57 Design Pattern “Tabs To Columns” Tabs / ViewPages werden nebeneinander dargestellt. https://code.google.com/p/iosched/ Thursday, March 14, 13
  58. 58. Tooling Thursday, March 14, 13
  59. 59. 59 Tooling - Eclipse Multi-configuration editing RelativeLayout support, spacing defaults Asset wizard New activity wizard Lint integration Thursday, March 14, 13
  60. 60. 60 Tooling - Monitor, DDMS (screen snapshot) $ ./tools/monitor Hilfreich bei dynamischen Layouts/Fragments Thursday, March 14, 13
  61. 61. 61 Tooling - Monitor, Hierarchyviewer $ ./tools/monitor nur Emulator / developer devices Thursday, March 14, 13
  62. 62. Summary Thursday, March 14, 13
  63. 63. 63 Cheat Sheet ✔ dp Dimensionen ✔ Auflösungsspezifische Bild-Ressourcen ✔ wrap_content, match_parent ✔ RelativeLayout ✔ Screen-optimierte Layouts ✔ Wiederverwendung durch Fragments ✔ Tooling Support nutzen - Lint ✔ Design Pattern beachten ✔ an guten Apps orientieren ✔ Dokumentation / Style Guide lesen Thursday, March 14, 13
  64. 64. Ressourcen Thursday, March 14, 13
  65. 65. 65 ๏ Official Documentation ‣ Android Design Guide http://developer.android.com/design/index.html ‣ Supporting Multiple Screens http://developer.android.com/guide/practices/screens_support.html ‣ New tools for managing screen sizes http://android-developers.blogspot.de/2011/07/new-tools-for-managing-screen-sizes.html ‣ Designing for Multiple Screens http://developer.android.com/training/multiscreen/index.html ‣ Multi-pane Layouts http://developer.android.com/design/patterns/multi-pane-layouts.html ‣ Building a Dynamic UI with Fragments http://developer.android.com/training/basics/fragments/index.html ‣ Android Lint Tool http://tools.android.com/tips/lint http://developer.android.com/tools/help/lint.html http://developer.android.com/tools/debugging/improving-w-lint.html Ressourcen I Thursday, March 14, 13
  66. 66. 66 ๏ App Clinic http://goo.gl/piLXJ ๏ Android Design in Action - Android Developers http://goo.gl/skOPD http://goo.gl/JGB4e ๏ Android Asset Studio http://android-ui-utils.googlecode.com/hg/asset-studio/dist/index.html Ressourcen II Thursday, March 14, 13
  67. 67. 67 ๏ Google I/O ‣ Schedule app https://code.google.com/p/iosched/ ‣ What's New in Android Developers' Tools http://www.youtube.com/watch?v=Erd2k6EKxCQ ‣ Multi-Versioning Android User Interfaces http://www.youtube.com/watch?v=amZM8oZBgfk ‣ Designing and Implementing Android UIs for Phones and Tablets http://www.youtube.com/watch?v=WGIU2JX1U5Y Ressourcen III Thursday, March 14, 13
  68. 68. 68 ๏ Juhani Lehtimäki ‣ Smashing Android UI http://www.androiduipatterns.com/ http://eu.wiley.com/WileyCDA/WileyTitle/productCd-1118387287,descCd-buy.html ๏ Others ‣ Cyrill Mottier http://android.cyrilmottier.com ‣ Android 4 - UI Design - Lars Röwekamp http://www.openknowledge.de/publikationen/vortraege/mtc-2012/android-4-ui-design.html ‣ Flexibles UI-Design - Lars Röwekamp http://it-republik.de/jaxenter/artikel/Flexibles-UI-Design-4770.html ‣ Deep dive into responsive mobile design - Kirill Grouchnikov http://www.pushing-pixels.org/2011/11/08/deep-dive-into-responsive-mobile-design- part-1.html Ressourcen IV Thursday, March 14, 13
  69. 69. 69 ๏ Apps mit beispielhaftem Design ‣ Google I/O 2012 https://code.google.com/p/iosched/ ‣ Gmail com.google.android.gm ‣ TED com.ted.android ‣ Evernote com.evernote ‣ Flipboard flipboard.app ‣ Pulse com.alphonso.pulse Ressourcen V ‣ Prixing fr.epicdream.beamy ‣ Pattrn org.lucasr.pattrn ‣ Glimmr com.bourke.glimmr ‣ The Verge com.verge.android Thursday, March 14, 13
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×