Android gui framework

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

description

A keynote on GUI Framework of Android

Transcript of Android gui framework

Page 1: Android gui framework

The Android GUI Framework

Android experience dayDecember 2008

Markus PilzPeter Wlodarczak

Page 2: Android gui framework

Agenda

1. Introduction1. Introduction

2. Anatomy 2. Anatomy

3. A real word example 3. A real word example

4. Life cycle 4. Life cycle

5. Trends 5. Trends

6. Findings 6. Findings

Page 3: Android gui framework

Why Android

Android was designed as a platform for software development

Android is open

Android is free

Community support

Tool support

Page 4: Android gui framework

Android Platform

Page 5: Android gui framework

Anatomy I

Android is Linux based

GUI is fully written in Java

Java 1.5 support

Widget toolkit

XML based GUI

Single Touch screen

Page 6: Android gui framework

Anatomy II

Activity

View

Service

Content provider

Intent, IntentFilter, IntertReceiver

Page 7: Android gui framework

Anatomy III

Storage

Security

Life cycle management

Native calls (not officially)

AIDL

NLS support

Page 8: Android gui framework

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

Page 9: Android gui framework

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

Page 10: Android gui framework

A real word example III

Lets see it

Page 11: Android gui framework

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

Page 12: Android gui framework

A real word example V

<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.greenliff.translator"> <application android:icon="@drawable/logo"> <activity android:label="@string/settings" android:name="Settings"> <intent-filter> <action android:name="android.intent.action.MAIN" /> </intent-filter> </activity> <activity android:label="@string/app_name" android:name="Translate"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> <activity android:label="@string/ocr" android:name="OCR"> <intent-filter> <action android:name="android.intent.action.MAIN" /> </intent-filter> </activity> </application></manifest>

The AndroidManifest.xml

Page 13: Android gui framework

A real word example V

<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.greenliff.translator"> <application android:icon="@drawable/logo"> <activity android:label="@string/settings" android:name="Settings"> <intent-filter> <action android:name="android.intent.action.MAIN" /> </intent-filter> </activity> <activity android:label="@string/app_name" android:name="Translate"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> <activity android:label="@string/ocr" android:name="OCR"> <intent-filter> <action android:name="android.intent.action.MAIN" /> </intent-filter> </activity> </application></manifest>

The AndroidManifest.xml

Activity

Page 14: Android gui framework

A real word example V

<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.greenliff.translator"> <application android:icon="@drawable/logo"> <activity android:label="@string/settings" android:name="Settings"> <intent-filter> <action android:name="android.intent.action.MAIN" /> </intent-filter> </activity> <activity android:label="@string/app_name" android:name="Translate"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> <activity android:label="@string/ocr" android:name="OCR"> <intent-filter> <action android:name="android.intent.action.MAIN" /> </intent-filter> </activity> </application></manifest>

The AndroidManifest.xml

Activity Launch

Page 15: Android gui framework

A real word example VI

The AndroidManifest.xml

Used for security

Give other Activities access

Define permissions, e. g. <uses-permission android:name="android.permission.RECEIVE_SMS" />

Page 16: Android gui framework

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

Page 17: Android gui framework

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

Page 18: Android gui framework

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

Page 19: Android gui framework

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("[email protected]"); rearrange(mEnge); } } });....

A code snipped of the Translate Activity

Page 20: Android gui framework

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("[email protected]"); rearrange(mEnge); } } });....

A code snipped of the Translate Activity

Set layout

Page 21: Android gui framework

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("[email protected]"); rearrange(mEnge); } } });....

A code snipped of the Translate Activity

Set layoutFind elements

Page 22: Android gui framework

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("[email protected]"); rearrange(mEnge); } } });....

A code snipped of the Translate Activity

Set layoutFind elements

Add behavior

Page 23: Android gui framework

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

Page 24: Android gui framework

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

Page 25: Android gui framework

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

Page 26: Android gui framework

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

Page 27: Android gui framework

A real word example XII

Store user data

Preferences

Files

Content provider

Database

Network

Page 28: Android gui framework

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

Page 29: Android gui framework

Trends I

Eyes-free user interfaces

Other user interfaces like tones, vibrant alarm, sensors, actuators

Leverage hearing and touch

Camera input

Ubiquitous computing technologies

Page 30: Android gui framework

Trends II

Speech recognition

Accelerometer

Magnetic compass

Location self-awareness

Locating others

Sensing the environment

Page 31: Android gui framework

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

Page 32: Android gui framework

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%

Page 33: Android gui framework

Thank you for the attention

Questions?

Find out more at:http://code.google.com/android