MMI 2: Mobile HumanComputer Interaction Android
Prof. Dr. Michael Rohs
[email protected] Mobile Interaction Lab, LMU Mnchen
Android Software Stack
Applications Java SDK Activities Views Resources Native Libraries Media OpenGL FreeType Linux Kernel, version 2.6 Device Drivers
Michael Rohs
Animation Telephony Content Providers
OpenGL Camera SQLite
Android Runtime SQLite WebKit Graphics Dalvik VM
Resource Access
Power Management
WS 2011/12 2
MMI 2: Mobile Interaction
Android Characteristics
Activity
Activities are the components of an application Represent a logical unit of user action Typically represented by a screen containing views Can be invoked externally
Declarative UI definition
XML files specify user interface resources Resources (layout definitions, strings, bitmaps) Separation of code and user interface
Teachable
Clear semantics of Java, clear design & concepts, good emulator
Michael Rohs MMI 2: Mobile Interaction WS 2011/12 3
Installing Android
Android Resources
Android developer pages (platform documentation)
http://developer.android.com
Michael Rohs
MMI 2: Mobile Interaction
WS 2011/12
Required Software
Java JDK 6, Standard Edition (not only JRE)
http://java.sun.com/javase/downloads/index.jsp
Eclipse IDE (3.4 or newer)
http://www.eclipse.org/downloads/ Eclipse IDE for Java Developers
Android SDK starter package (depending on your platform)
http://dl.google.com/android/android-sdk_r08-windows.zip http://dl.google.com/android/android-sdk_r08-mac_86.zip http://dl.google.com/android/android-sdk_r08-linux_86.tgz
See also: Quick Steps
http://developer.android.com/sdk/index.html
Michael Rohs
MMI 2: Mobile Interaction
WS 2011/12
Installation
Start Eclipse In Eclipse: Install Android SDK
Menu: Help, Install New Software https://dl-ssl.google.com/android/eclipse/
Point Eclipse to the Android SDK starter package
Menu: Window, preferences, Android, SDK Location /soft/IFI/lang/android-sdk-r10/iX86-unknown-linux
In Eclipse: Android SDK and AVD Manager
Window / Android SDK and AVD Manager New... / Virtual Devices / 2.2 (oder 1.6) mit Google API
Mobile Phone
Anwendungen, Entwicklung: USB-Debugging, ...
Michael Rohs MMI 2: Mobile Interaction WS 2011/12 7
In Eclipse: Install New Software...
Android Plugin https://dl-ssl.google.com/android/eclipse/
Michael Rohs
MMI 2: Mobile Interaction
WS 2011/12
Set Path to Android SDK Starter Package
Michael Rohs
MMI 2: Mobile Interaction
WS 2011/12
Define Android Virtual Device
Michael Rohs
MMI 2: Mobile Interaction
WS 2011/12
10
Hello World
Creating Your First Android Project
File New Project Android Android Project
Michael Rohs
MMI 2: Mobile Interaction
WS 2011/12
12
Uniquely identifies the application!
Michael Rohs
MMI 2: Mobile Interaction
WS 2011/12
13
Michael Rohs
MMI 2: Mobile Interaction
WS 2011/12
14
Michael Rohs
MMI 2: Mobile Interaction
WS 2011/12
15
Michael Rohs
MMI 2: Mobile Interaction
WS 2011/12
16
Michael Rohs
MMI 2: Mobile Interaction
WS 2011/12
17
Exercise: Install Android + Create Hello World
Michael Rohs
MMI 2: Mobile Interaction
WS 2011/12
18
Michael Rohs
MMI 2: Mobile Interaction
WS 2011/12
19
Declarative definition of UIs main.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/hello" /> </LinearLayout>
Michael Rohs
MMI 2: Mobile Interaction
WS 2011/12
20
Separating text strings from source code strings.xml
<?xml version="1.0" encoding="utf-8"?> <resources> <string name="hello">Hello World, MainActivity!</string> <string name="app_name">Hello Android</string> </resources>
Default language in res/values/strings.xml Localized languages in res/values-xx language qualifier
French in res/values-fr/strings.xml Hindi in res/values-hi/strings.xml etc.
Michael Rohs MMI 2: Mobile Interaction WS 2011/12 21
R.java
/* AUTO-GENERATED FILE. DO NOT MODIFY. * * This class was automatically generated by the * aapt tool from the resource data it found. It * should not be modified by hand. */ package de.tuberlin.tlabs; public final class R { public static final class attr { } public static final class drawable { public static final int icon=0x7f020000; } public static final class id { public static final int Button01=0x7f050000; } public static final class layout { public static final int main=0x7f030000; } public static final class string { public static final int Button01=0x7f040002; public static final int app_name=0x7f040001; public static final int hello=0x7f040000; } } Michael Rohs MMI 2: Mobile Interaction WS 2011/12 22
Never ever edit R.java!!!
Michael Rohs
MMI 2: Mobile Interaction
WS 2011/12
23
Michael Rohs
MMI 2: Mobile Interaction
WS 2011/12
24
Declarative Definition of UIs main.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/hello" /> <Button android:text="@string/Button01" android:id="@+id/Button01" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </LinearLayout>
Michael Rohs MMI 2: Mobile Interaction WS 2011/12 25
strings.xml
<?xml version="1.0" encoding="utf-8"?> <resources> <string name="hello">Hello World, MainActivity!</string> <string name="app_name">Hello Android</string> <string name="Button01">Click me now!</string> </resources>
Michael Rohs
MMI 2: Mobile Interaction
WS 2011/12
26
Michael Rohs
MMI 2: Mobile Interaction
WS 2011/12
27
Handling Button Click Events
XML
<Button android:id="@+id/button1" android:text="Basic Button" android:layout_width="wrap_content" android:layout_height="wrap_content" />
Java
public class MainActivity extends Activity implements View.OnClickListener { public void onCreate(Bundle savedInstanceState) { ... Button b = (Button) findViewById(R.id.button1); b.setOnClickListener(this); } private int counter = 0; public void onClick(View v) { Button b = (Button)v; b.setText("counter = " + (++counter)); } }
Michael Rohs MMI 2: Mobile Interaction WS 2011/12 28
Exercise:
Add a button to Hello World
Michael Rohs
MMI 2: Mobile Interaction
WS 2011/12
29
UI from XML resources MainActivity.java
import android.app.Activity; import android.os.Bundle; public class MainActivity extends Activity { public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); } }
Michael Rohs
MMI 2: Mobile Interaction
WS 2011/12
30
UI programmatically defined MainActivity.java
import android.app.Activity; import android.os.Bundle; import android.widget.TextView; public class MainActivity extends Activity { public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); // setContentView(R.layout.main); XML resource <TextView...> TextView tv = new TextView(this); tv.setText("Hello World (TextView)!"); setContentView(tv); Java object } android.widget.TextView }
Michael Rohs MMI 2: Mobile Interaction WS 2011/12 31
Touch Input: MotionEvent
Method View.onTouchEvent(MotionEvent e) Motion event data
x, y, time, action, source, pressure, size
Sources depend on hardware
Mouse, pen, finger, trackball
Actions
ACTION_DOWN ACTION_MOVE ACTION_UP ACTION_CANCEL
Motion history
Sequence of coordinates between events
Michael Rohs MMI 2: Mobile Interaction WS 2011/12 32
Touch Input Painting
public class TouchPaint extends Activity { private MyView myView; protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); myView = new MyView(this); setContentView(myView); } }
Michael Rohs
MMI 2: Mobile Interaction
WS 2011/12
33
Touch Input Painting
public class MyView extends View { private final Paint paint = new Paint(); private int x = 0, y = 0; public MyView(Context c) { super(c); paint.setARGB(255, 255, 255, 255); } protected void onDraw(Canvas c) { c.drawCircle(x, y, 3, paint); } public boolean onTouchEvent(MotionEvent e) { x = (int)e.getX(); y = (int)e.getY(); invalidate(); return true; } }
Michael Rohs MMI 2: Mobile Interaction WS 2011/12 34
Concepts so far
Project directory structure
src, gen, res, AndroidManifest.xml
Resources
Declarative view definitions in XML Localization of string resources Resource identifiers
Touch input
Motion events
Michael Rohs
MMI 2: Mobile Interaction
WS 2011/12
35
