MTC13 Android UIs für alle(s)

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
‣ Design Pattern
๏ Tooling
‣ ADK, Eclipse
๏ Ressourcen
2244 unterschiedliche Geräte - 1 Code-Basis
Ziel: Alles Wichtige in 1h, sonst ...

Wer bin ich?
3
@andywoodly

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-condoms/

Auflösungsunabhängigkeit

Auflösungsabhängigkeit
7
low density medium density high density
low density high density

Auflösungs un abhängigkeit
8
low density high density
low density medium density high density

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

๏ [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

Auflösungsklassen
11
๏ Skalierungsfaktoren
xhdpi launcher icon (nexus 10)
48
38
72
96
144
launcher icon
px
3:4:6:8 Verhältnis

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
?

13
Resources res = getResources();
DisplayMetrics metrics = res.getDisplayMetrics();
float scale = metrics.density;
px
๏ Problem: px -basierte APIs?
๏ Lösung: DisplayMetrics.density

14
Auflösungsklassen
๏ Tooling (Eclipse, ADT Plugin 20.0.0+)

15
Auflösungsklassen

16
Auflösungsklassen

17
Auflösungsklassen
๏ Tooling (Android Asset Studio)

18
Auflösungsklassen
๏ Lint
http://tools.android.com/tips/lint-checks

19
Auflösungsklassen
๏ Marktdaten
http://developer.android.com/about/dashboards/index.html
October 1, 2012

Multi-Screen-Support

21
http://www.google.de/nexus/

23
Screen Sizes
Bildschirmgrösse (inch)
Grössenklasse
2 4 7 10
small normal large xlarge

24
Ziel: korrektes Resize-Verhalten

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_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

26
๏ korrektes Resizing
‣ geschachtelte LinearLayout vermeiden
‣ RelativeLayout verwenden
LinearLayout (vertical)
|- LinearLayout (horizontal)
|- LinearLayout (horizontal)
RelativeLayout

27
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="match_parent">
<TextView
android:id="@+id/textView1"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="Very Long Text" />
<EditText
android:id="@+id/editText1"
android:layout_alignParentTop="true"
android:layout_toRightOf="@+id/textView1" />
<TextView
android:id="@+id/textView2"
android:layout_alignParentLeft="true"
android:layout_below="@+id/editText1"
android:text="Text" />
<EditText
android:id="@+id/editText2"
android:layout_alignLeft="@+id/editText1" >
</EditText>
</RelativeLayout>
๏ RelativeLayout

28
Skalierbare Grafiken
๏ Nine-Patch Images
http://android-ui-utils.googlecode.com/hg/asset-studio/dist/nine-patches.html
<sdk>/tools/draw9patch

29
Skalierbare Grafiken
๏ Beispiel Nine-Patch Image - action bar shadow
Versionen für mdpi, hdpi, xhdpi erforderlich

30
Ziel: Screen-optimierte Layouts
small
normal
res/layout/my_layout.xml
res/layout-small/my_layout.xml

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

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

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

34
Multi-Screen-Support - Tooling

Fragments
A fragment a day
keeps the fragmentation at bay!

36
Fragments

37
✔ wiederverwendbare (UI-)Komponente
✔ “Sub-Activity”
✔ eigener Lifecycle
✔ immer an Activity gebunden
✔ lose Kopplung
Fragments

38
Fragments - Anwendungsprinzip
๏ Fragment
‣ UI-Komponente
๏ Activity-Layout (XML)
‣ verwendet Fragments
๏ Activity-Klasse
‣ Inter-Fragment-Logik
๏ XML-Ressourcen
‣ “Switch”

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_height="match_parent" />
<fragment
android:name="com.example.android.FragmentB"
</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"
</LinearLayout>

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

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

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

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!

44
Fragments/Activity - Kommunikation
notify
listen to
Activity A Fragment A
๏ Listener Pattern
‣ wiederverwertbare Komponenten
‣ lose Kopplung
setter

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.

Fragments
pre 3.0
happy path

๏ 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()

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

Support Library + MapFragment (Maps v2)
49
<fragment
class="com.google.android.gms.maps.SupportMapFragment"
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

Support Library + MapFragment + ActionbarSherlock
50
ActionbarSherlock-Erweiterung notwendig
public class SherlockMapFragment extends SupportMapFragment {}
http://stackoverflow.com/questions/13721929/using-actionbarsherlock-with-the-new-supportmapfragment

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

Design Pattern

53
Design Pattern
Show / Hide
Ausblenden eines
Fragments, Rück-
Navigation mittels
Up-Action.

54
Design Pattern
Stretch/compress
Fragments passen sich
in der Breite an.

55
Design Pattern
Expand / Collapse
Aktive Komponente
erhält mehr Platz.

56
Design Pattern
Stack
Neuanordnung der
Fragments (v.a. bei
Orientierungswechsel).

57
Design Pattern
“Tabs To Columns”
Tabs / ViewPages werden nebeneinander dargestellt.
https://code.google.com/p/iosched/

Tooling

59
Tooling - Eclipse
Multi-configuration editing
RelativeLayout support, spacing defaults
Asset wizard
New activity wizard
Lint integration

60
Tooling - Monitor, DDMS (screen snapshot)
$ ./tools/monitor
Hilfreich bei dynamischen Layouts/Fragments

61
Tooling - Monitor, Hierarchyviewer
$ ./tools/monitor
nur Emulator / developer devices

Summary

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

Ressourcen

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

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

67
๏ Google I/O
‣ Schedule app
‣ 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

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

69
๏ Apps mit beispielhaftem Design
‣ Google I/O 2012
‣ 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

MTC13 Android UIs für alle(s)

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a MTC13 Android UIs für alle(s)

Semelhante a MTC13 Android UIs für alle(s) (20)

Último

Último (20)

MTC13 Android UIs für alle(s)