This document provides an agenda and overview for a Mobile Monday event on Android. It includes: 1. Introduction and highlights of the Google I/O 2011 conference 2. A discussion on Android UX design 3. An Android developer quickstart The document then covers various topics related to Android development including an introduction to Android devices, how to set up the Android SDK and Eclipse plugin, how to create an Android project, the folder structure of an Android project, AndroidManifest.xml, basic UI elements like buttons and text views, resources, internationalization, logging, and an overview of UI selection widgets.

1. Mobile Monday
Competence Centre
Android
Steven Palmaers - Friedger Müffke - Joris de Sutter
1

2. Agenda
✓ Introduction - Steven (XIOS)
✓ Google I/O 2011 highlights - Friedger (OpenIntents)
✓ Android UX - Joris (Smartphonehelp.be)
✓ Android developer quickstart - Steven
2

3. Introduction - devices
3

4. Introduction - tablets
4

5. Android Platform
5

6. Android
✓ Android is everywhere
✓ Smartphones
✓ Tablets
✓ set-top boxes (Google TV)
✓ car entertainment systems
✓ development boards / embedded systems
✓ ...
✓ Focus: smartphones
✓ relatively small screen
✓ usually no hardware keyboard
6

7. Android platform
7

8. Android platform
✓ core applications (sms, e-mail, calender, maps, browser)
✓ Access to the application framework (applications can use each others
functionality)
✓ Some libraries (C/C++) : SQLite, FreeType
✓ Android runtime
✓ Some core libraries
✓ Every Android applicatie has its own process, with an own instance of the Dalvik
VM (.dex format - NO JVM !!!)
✓ Dalvik VM is register-based
✓ Linux Kernel for security, memory management, proces management,
networking, drivers
✓ abstraction layer between hardware and software stack
8

9. Installation
SDK - ADT plugin - Android platform
9

10. Installation SDK & plug-in
✓ Android SDK (contains some tools)
✓ installation + configuration ADT Eclipse plug-in
✓ Android SDK: http://developer.android.com/sdk/index.html
✓ Download & unzip SDK
✓ [Add the unzip location to your PATH] (if you want to work command-line)
✓ Install the ADT (Android Developer Tools) plugin for Eclipse (update site: https://dl-ssl.google.com/
android/eclipse/)
✓ Restart Eclipse en change the Android preferences (Window / Preferences)
✓ Use the Android SDK and AVD manager to add at least one platform
✓ A physical device is not required to get started !
✓ Details: http://developer.android.com/sdk/installing.html
10

11. Emulator
✓ Simulates one or more Android devices
✓ Development without a device
✓ Test configurations you don't have physically
✓ Configuration: AVD, Android Virtual Device
✓ SDK &AVD manager
✓ First startup takes some time
✓ No need to close the emulator for an updates build
11

12. Visually
12

13. New Android project
✓ Let's create a new android project
✓ File > New > Project
✓ In the folder "Android" choose "Android project"
✓ We need to fill out some values:
✓ Project name: HelloAndroid (name Eclipse project / directory)
✓ Application name: Hello, Android (human readable name, shown on device)
✓ Package name: be.xios.helloandroid (package namespace)
✓ unique per device / application !
✓ Create Activity: HelloAndroid (name of stub class created by ADT plugin, Activity
subclass). Base for an application
✓ Min SDK version (minimal API level needed)
✓ We are now ready !!!
13

14. 14

15. Folder structure
✓ AndroidManifest.xml XML file; describes application and components
✓ bin/ contains the application (after compilation)
✓ libs/ third-party libraries
✓ res/ resources, images, sounds, layout files, ...
✓ src/ contains Java source code
✓ assets/ contains static files
✓ gen/ contains generated source code
✓ build.xml, *.properties
✓ proguard.cfg (code obfuscation)
15

16. What are we going to do?
✓ We will create a "light" mobile monday android application
✓ events
✓ sessions
✓ locations
✓ speakers
✓ check in
✓ share
✓ ..
✓ Download the code from
✓http://bit.ly/izjuXT
16

17. Intermezzo: resources
✓ Some subdirectories /res:
✓ res/drawable: contains images (png, jpeg, ...)
✓ res/layout: xml-based layout specifications
✓ res/menu: xml-based menu specifications
✓ res/raw: raw files, an audioclip, a csv file, ...
✓ res/values: strings, dimensions, ...
✓ res/xml: other general-purpose xml-files
✓ Some have a suffix, e.g. res/drawable-hdpi
✓ Those resources are only used when specific circumstances are valid
17

18. Other resources
✓ Dimensions
✓ <resources>
<dimen name="thin">10dip</dimen>
<dimen name="fat">1in</dimen>
</resources>
✓ @dimen/thin
✓ dip = density independent pixels (important - use these, not px)
✓ Colors
✓ 4 styles
✓ #RGB or #ARGB
✓ #RRGGBB or #AARRGGBB (A == Alpha)
✓ <resources><color name="yellow_orange">#FFD555</color></resources>
✓ @color/yellow_orange
18

19. Other resources
✓ Arrays
✓ List of strings
✓ <resources>
<string-array name="cities">
<item>Eindhoven</item>
<item>Maastricht</item>
<item>Antwerpen</item>
<item>Hasselt</item>
</string>
</resources>
✓ Java: Resources.getStringArray(R.array.cities);
19

20. I18N
✓ Normally, when using only 1 language
✓ strings are put in /res/values/strings.xml
✓ English / Spanish
✓ res/values-en/strings.xml and res/values-es/strings.xml
✓ choice is based on device settings
✓ Better:
✓ default language (e.g. English)
✓ res/values/strings.xml
✓ other languages (such as Spanish)
✓ res/values-es/strings.xml
20

21. AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="be.mobilemonday"
android:versionCode="1"
android:versionName="1.0">
<uses-sdk android:minSdkVersion="9" />
<application android:icon="@drawable/icon" android:label="@string/app_name">
<activity android:name=".Hello"
android:label="@string/app_name">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
21

22. AndroidManifest.xml
✓ Android project route; source of your application
✓ What is inside yout application?
✓ Activities
✓ Services
✓ Which activity / activities should be in the launch menu of your device?
✓ root: <manifest> element
✓ attributes use the android namespace !
✓ a package is given, a dot (.) can be used to designate the default package
✓ unique package per application / device
✓ versionCode & versionName are used for updates
✓ name can be a string value, code must be an integer
22

23. AndroidManifest.xml
✓ <application> children are an important part
✓ Inside <application> is now 1 <activity> element
✓ android:name designates the class used for implementing this activity
✓ android:label is the name of the activity
✓ <intent-filter> describes under which circumstances these activity is displayed
✓ android.intent.category.LAUNCHER
✓ android.intent.action.MAIN (main intent)
✓ an application typically consists of several activities
✓ splash, main screen, about, settings, ...
✓ all activities have to be listed in the manifest file !!!
23

24. Code
✓ In the package explorer, there is a src folder
✓ Underneath is a package, be.mobilemonday.helloandroid
✓ This contains HelloAndroid.java
✓ Notice that the names match with the values given when creating the project
✓ The code can be found on the next slide
✓ This class is an Activity subclass
✓ An Activity is an entity used in an application to execute actions. An application contains
typically > 1 Activity
✓ The onCreate() method is called by the Android system when the Activity starts. It is used
for initialisation and user interface setup
✓ Let's code !
24

25. Code snippet
package be.mobilemonday.helloandroid;
import android.app.Activity;
import android.os.Bundle;
public class HelloAndroid extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}
}
25

26. Let's change the code...
✓ Lets replace some code
TextView tv = new TextView(this);
tv.setText("Hello, Android");
setContentView(tv);
✓ An Android user interface consists of Views
✓ A View can be an image, a button, a label, ...
✓ In this case, we create a TextView, with the class constructor, taking a Context as parameter.
✓ A Context is a handle to the system, and enables access to database, user preferences, resources, ...
✓ Activity is a subclass of Context so this can be used to pass
✓ The text is set by calling setText()
✓ Finally, we set the TextView as being the content of the current Activity, using setContentView()
26

27. User Interface
27

28. Button
28

29. TextView
29

30. EditText
30

31. Style
31

32. ListView
32

33. User Interface
✓ An android XML-file has a simple structure, a tree of XML elements
✓ In our case: 1 TextView, with 5 attributes:
✓ xmlns:android (XML namespace)
✓ android:id (unique identifier for this element; can be used in other XML-files or in the code)
✓ android:layout_width (how much of the available width is used; a constant (fill_parent or
wrap_content or a value, such as 40dp)
✓ android:layout_height (height)
✓ android:text (text of a button / TextView - hard-coded or reference to string resource)
✓ Should be placed in res/layout
33

34. User Interface
✓ String resources, placed in res/values:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="hello">Hello World, HelloAndroid!</string>
<string name="app_name">Hello, Android</string>
</resources>
34

35. User Interface: R klasse
✓ R.java is an auto-generated file (located in gen - generated)
package be.mobilemonday.helloandroid;
✓ Example: public final class R {
public static final class attr {
}
public static final class drawable {
public static final int icon=0x7f020000;
}
public static final class layout {
public static final int main=0x7f030000;
}
public static final class string {
public static final int app_name=0x7f040001;
public static final int hello=0x7f040000;
}
}
✓ Index of resources in your project
✓ Code completion in Eclipse IDE
✓ Auto-updated when adding / modifying resources
✓ NEVER EVER change this file yourself!
35

36. Logging
✓ Log class
✓ Log.v() ==> VERBOSE
✓ Log.d() ==> DEBUG
✓ Log.i() ==> INFO
✓ Log.w() ==> WARN
✓ Log.e() ==> ERROR
✓ Example: Log.w("MyFirstActivity", "connection lost...");
36

37. Intermezzo: ADT + DDMS
✓ Android Developer Tools
✓ Plugin for Eclipse IDE
✓ Project wizards for Android project
✓ Integration with Eclipse IDE (Run, ...)
✓ Tooltips
✓ Drag & Drop UI editor
37

38. Intermezzo: ADT + DDMS
✓ DDMS
✓ Perspective in Eclipse
✓ LogCat, simulate sms messages, location, ...
✓ Log.i(...)
✓ System.out.println("Hello") ==> LogCat ( INFO level, tag System.out)
✓ Application crashes ==> stack trace ends up in LogCat (runtime exceptions, ...)
38

39. UI elements
Widgets en views:
✓ Layouts:
✓ Date Picker / Time Picker
✓ Linear Layout
✓ Forms (EditText, CheckBox, ...)
✓ Relative Layout
✓ Spinner
✓ Table Layout
✓ Auto Complete
✓ Tab Layout
✓ Web View
✓ List View
✓ Gallery
✓ Google Map View
39

40. UI - Linear Layout
✓ ViewGroup to group child Views horizontally / vertically
✓ attributes for setting properties
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1">
<TextView
android:text="red"
android:gravity="center_horizontal"
android:background="#aa0000"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"/>
<TextView
android:text="green"
android:gravity="center_horizontal"
android:background="#00aa00"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"/>
</LinearLayout>
40

41. User Interface
✓ TextView label, user can't change the value
✓ Most important attribute: text
✓ Other attributes: layout_width, textColor, ...
✓ Button
✓ click event
✓ OnClickListener (use setOnClickListener())
✓ or set the onclick attribute in layout xml (since version 1.6), such as
android:onClick="click"
✓ public void click(View v) { ... }
✓ Images: ImageView (~ TextView) / ImageButton (~ Button)
41

42. User Interface
✓ EditText: text field
✓ Attributes:
✓ android:autoText : spelling check
✓ android:capitalize
✓ android:digits : only digits
✓ android:singleLine : 1 line or multiline?
✓ Auto completion is possible with AutoCompleteTextView
42

43. User Interface - selection
✓ Easiest to use adapter: ArrayAdapter
✓ Java array / List instance
✓ In the example at the bottom
✓ (1) application context (typically this)
✓ (2) resource ID for the view to be used (here we use a built-in format)
✓ (3) array / list of items
✓ toString() is called to convert each item to a TextView; so if you use this method,
override the toString() method
String[] items = {"this", "is","a","test"};
new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, items);
43

44. User Interface - selection
✓ Classic listbox in Android: ListView
✓ Use setAdapter() to set the values to be shown
✓ Use setOnItemClickListener() to know when an item is selected
✓ It is also possible to use a specific Activity subclass, ListActivity
✓ ListView in Activity: setAdapter(...)
✓ ListActivity: setListAdapter(...)
44

45. BEDROID
✓ Look for #bedroid on Twitter
✓ Next meeting: 30th June
✓ Location: TBD
45