1. The Android GUI Framework Android experience day December 2008 Markus Pilz Peter Wlodarczak

2. Agenda 1. Introduction 2. Anatomy 3. A real word example 4. Life cycle 5. Trends 6. Findings

3. Why Android  Android was designed as a platform for software development  Android is open  Android is free  Community support  Tool support

4. Android Platform

5. Anatomy I  Android is Linux based  GUI is fully written in Java  Java 1.5 support  Widget toolkit  XML based GUI  Single Touch screen

6. Anatomy II  Activity  View  Service  Content provider  Intent, IntentFilter, IntertReceiver

7. Anatomy III  Storage  Security  Life cycle management  Native calls (not officially)‏  AIDL  NLS support

8. A real word example I  A translator for Android  You cannot read anything  If you are in a country where no one understands your language  No additional device needed  You have your mobile phone always with you

9. A real word example II  Uses the Google translator  Can be extended with new languages  Adaptive GUI  Uses XMPP for data transmission  GUI fully defined in XML

10. A real word example III Lets see it

11. A real word example IV  Used Eclipse for development  Uses persistence of user data  Uses touch screen and keyboard input  ANT script and make for build

12. A real word example V <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.greenliff.translator"> The AndroidManifest.xml

13. A real word example V <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.greenliff.translator"> The AndroidManifest.xml Activity

14. A real word example V <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.greenliff.translator"> The AndroidManifest.xml Activity Launch

15. A real word example VI The AndroidManifest.xml  Used for security  Give other Activities access  Define permissions, e. g.

16. A real word example VII <ScrollView xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="wrap_content" android:scrollbars="vertical"> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/linLayout" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="wrap_content"> <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="@drawable/blue" android:text="@string/translate_to_1"/> <EditText android:id="@+id/toTranslate" android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="@android:drawable/editbox_background" android:layout_below="@id/linLayout“ android:hint="Type here..." />..... An XML snipped of the main Activity Text reference

17. A real word example VII <ScrollView xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="wrap_content" android:scrollbars="vertical"> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/linLayout" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="wrap_content"> <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="@drawable/blue" android:text="@string/translate_to_1"/> <EditText android:id="@+id/toTranslate" android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="@android:drawable/editbox_background" android:layout_below="@id/linLayout“ android:hint="Type here..." />..... An XML snipped of the main Activity Text reference Id

18. A real word example VIII  Could also be developed purely in Java  Not all the attributes can be defined in XML  XML cannot be debugged

19. A real word example IX @Override public void onCreate(Bundle icicle) { super.onCreate(icicle); Window wp = getWindow(); mContext = wp.getContext(); setTheme(android.R.style.Theme_Light); setContentView(R.layout.main); mLayout = (LinearLayout) this.findViewById(R.id.linLayout); mToTranslate = (EditText) this.findViewById(R.id.toTranslate); setShowLanguages(); mEnge = (LinearLayout) this.findViewById(R.id.enge); LANGUAGE_LAYOUT[0] = mEnge; de2en = (Button) this.findViewById(R.id.de2en); de2en.setOnClickListener(new View.OnClickListener() { public void onClick(View view) { if(!connect()) { notLoggedInAlert(); } else { doConnect("de2en@bot.talk.google.com"); rearrange(mEnge); } });.... A code snipped of the Translate Activity

20. A real word example IX @Override public void onCreate(Bundle icicle) { super.onCreate(icicle); Window wp = getWindow(); mContext = wp.getContext(); setTheme(android.R.style.Theme_Light); setContentView(R.layout.main); mLayout = (LinearLayout) this.findViewById(R.id.linLayout); mToTranslate = (EditText) this.findViewById(R.id.toTranslate); setShowLanguages(); mEnge = (LinearLayout) this.findViewById(R.id.enge); LANGUAGE_LAYOUT[0] = mEnge; de2en = (Button) this.findViewById(R.id.de2en); de2en.setOnClickListener(new View.OnClickListener() { public void onClick(View view) { if(!connect()) { notLoggedInAlert(); } else { doConnect("de2en@bot.talk.google.com"); rearrange(mEnge); } });.... A code snipped of the Translate Activity Set layout

21. A real word example IX @Override public void onCreate(Bundle icicle) { super.onCreate(icicle); Window wp = getWindow(); mContext = wp.getContext(); setTheme(android.R.style.Theme_Light); setContentView(R.layout.main); mLayout = (LinearLayout) this.findViewById(R.id.linLayout); mToTranslate = (EditText) this.findViewById(R.id.toTranslate); setShowLanguages(); mEnge = (LinearLayout) this.findViewById(R.id.enge); LANGUAGE_LAYOUT[0] = mEnge; de2en = (Button) this.findViewById(R.id.de2en); de2en.setOnClickListener(new View.OnClickListener() { public void onClick(View view) { if(!connect()) { notLoggedInAlert(); } else { doConnect("de2en@bot.talk.google.com"); rearrange(mEnge); } });.... A code snipped of the Translate Activity Set layout Find elements

22. A real word example IX @Override public void onCreate(Bundle icicle) { super.onCreate(icicle); Window wp = getWindow(); mContext = wp.getContext(); setTheme(android.R.style.Theme_Light); setContentView(R.layout.main); mLayout = (LinearLayout) this.findViewById(R.id.linLayout); mToTranslate = (EditText) this.findViewById(R.id.toTranslate); setShowLanguages(); mEnge = (LinearLayout) this.findViewById(R.id.enge); LANGUAGE_LAYOUT[0] = mEnge; de2en = (Button) this.findViewById(R.id.de2en); de2en.setOnClickListener(new View.OnClickListener() { public void onClick(View view) { if(!connect()) { notLoggedInAlert(); } else { doConnect("de2en@bot.talk.google.com"); rearrange(mEnge); } });.... A code snipped of the Translate Activity Set layout Find elements Add behavior

23. A real word example X @Override public boolean onOptionsItemSelected(Menu.Item item) { switch (item.getId()) { case 0: showLogin(); break; case 1: Intent intent = new Intent(Translate.this, Settings.class); intent.putExtras(mShownLanguages); startSubActivity(intent, SETTINGS); break; } // switch return true; } Call an other Activity

24. A real word example X @Override public boolean onOptionsItemSelected(Menu.Item item) { switch (item.getId()) { case 0: showLogin(); break; case 1: Intent intent = new Intent(Translate.this, Settings.class); intent.putExtras(mShownLanguages); startSubActivity(intent, SETTINGS); break; } // switch return true; } Call an other Activity Start an Activity

25. A real word example X @Override public boolean onOptionsItemSelected(Menu.Item item) { switch (item.getId()) { case 0: showLogin(); break; case 1: Intent intent = new Intent(Translate.this, Settings.class); intent.putExtras(mShownLanguages); startSubActivity(intent, SETTINGS); break; } // switch return true; } Call an other Activity Start an Activity Pass data to new Activity

26. A real word example XI @Override protected void onPause() { super.onPause(); SharedPreferences.Editor ed = mPrefs.edit(); for(int i = 0; i < SUPPORTED_LANGUAGES.length; i++) { ed.putBoolean(SUPPORTED_LANGUAGES[i], mShownLanguages.getBoolean(SUPPORTED_LANGUAGES[i])); } ed.commit(); } Store user data Persistent store

27. A real word example XII Store user data  Preferences  Files  Content provider  Database  Network

28. Life cycle  Life cycle not directly controlled by application  Controll through onCreate(), onPause(), onStop()... methods  Android has different types of processes, visible processes, service processes, background processes...  System can kill an application to free up memory  Services can be used for long-lived background processes

29. Trends I  Eyes-free user interfaces  Other user interfaces like tones, vibrant alarm, sensors, actuators  Leverage hearing and touch  Camera input Ubiquitous computing technologies

30. Trends II  Speech recognition  Accelerometer  Magnetic compass  Location self-awareness Locating others Sensing the environment

31. Findings  Android uses proven technology like Java, XML and Linux  There is an initial learning effort  Android doesn‘t have many of the limitations other mobile platforms have  It offers a rich API for application development  Trend towards eyes-free user interfaces

32. Some figures  Q4 2007 more than 3 billion mobile subscribers (world population 6.7 billion)‏  1.14 billion handsets delivered in 2007 (computers 271.2 million)‏  118 million where smart phones  Currently more than 30 mobile platforms  Symbian leads with 65% share, ahead of Microsoft on 12%, RIM on 11%, Apple on 7%, and Linux at 5%

33. Thank you for the attention Questions? Find out more at: http://code.google.com/android