Top Banner
The Android GUI Framework Android experience day December 2008 Markus Pilz Peter Wlodarczak
33
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Android

The Android GUI Framework

Android experience dayDecember 2008

Markus PilzPeter Wlodarczak

Page 2: Android

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

Why Android

Android was designed as a platform for software development

Android is open

Android is free

Community support

Tool support

Page 4: Android

Android Platform

Page 5: Android

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

Anatomy II

Activity

View

Service

Content provider

Intent, IntentFilter, IntertReceiver

Page 7: Android

Anatomy III

Storage

Security

Life cycle management

Native calls (not officially)

AIDL

NLS support

Page 8: Android

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

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

A real word example III

Lets see it

Page 11: Android

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

A real word example XII

Store user data

Preferences

Files

Content provider

Database

Network

Page 28: Android

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

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

Trends II

Speech recognition

Accelerometer

Magnetic compass

Location self-awareness

Locating others

Sensing the environment

Page 31: Android

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

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

Thank you for the attention

Questions?

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