Build an Android App
in 60 minutes
Yap Wen Jiun @wenjiun
MMU lecturer
GDG KL member
Mobile Developer Day KL 2014

What is Android?

Android is a software stack for mobile devices that
includes


operating system

middleware

key applications

http://www.android.com/
For Developer
http://d.android.com → Design, Develop & Distribute

Source code can be found at http://source.android.com
by @wenjiun
Mobile Developer Day KL 2014

Android Architecture
by @wenjiun
Mobile Developer Day KL 2014

Android Version (API level & size of android.jar)










2.2 Froyo
2.3.3 Gingerbread
3.2 Honeycomb
4.0 Ice Cream Sandwich
4.0.3 Ice Cream Sandwich
4.1 Jelly Bean
4.2 Jelly Bean
4.3 Jelly Bean
4.4 KitKat
5.0 Lollipop
API Level 8
API Level 10
API Level 13
API Level 14
API Level 15
API Level 16
API Level 17
API Level 18
API Level 19
API Level 21
5.2MB
9.5MB
12.8MB
16.9MB
17.2MB
18.3MB
19.0MB
19.4MB
21.8MB
25.8MB
by @wenjiun
Mobile Developer Day KL 2014

http://developer.android.com/about/dashboards/
by @wenjiun
Mobile Developer Day KL 2014

Recommended standard environment
= Android Studio + Android SDK

Android Studio (currently Beta v0.8.14)
http://d.android.com/sdk/installing/studio.html
which requires JDK 7
http://www.oracle.com/technetwork/java/javase/downloads/

Android SDK (included in the download of Android Studio)
http://developer.android.com/sdk/
by @wenjiun
Mobile Developer Day KL 2014

Android Studio

New Android development IDE based on IntelliJ IDEA

Using Gradle build system

Support project with multiple APKs (Android Wear, Google
Glass, Android TV)

Better code completion and refactoring

Built-in support for Google Cloud Platform
by @wenjiun
Mobile Developer Day KL 2014

Android Studio
by @wenjiun
Mobile Developer Day KL 2014

Configure
by @wenjiun
Mobile Developer Day KL 2014

Configure → Settings → Editor → Show quick doc on mouse
move
by @wenjiun
Mobile Developer Day KL 2014

Configure → Settings → Editor → Appearance → Show line
numbers & Show method separators
by @wenjiun
Mobile Developer Day KL 2014

Configure → Settings → Editor → Auto Import → Add
unambiguous imports on the fly
by @wenjiun
Mobile Developer Day KL 2014

Android SDK location

Configure → Project Defaults → Project Structure
by @wenjiun
Mobile Developer Day KL 2014

Android Studio
by @wenjiun
Mobile Developer Day KL 2014

Android SDK

Updated with Android SDK Manager
by @wenjiun
Mobile Developer Day KL 2014

In Android SDK:

Core Libraries (platforms) – android.jar

Add-on Libraries (add-ons) – maps.jar, usb.jar.

Extra Libraries (extras) – android-support-v4.jar, googleplay-services.jar etc.

Documentation (docs)

Sample Codes (samples) – API Demos etc.

Tools (tools, platform-tools)– Android Debug Bridge (adb),
DDMS, draw9patch, ProGuard, SQLite3, HierarchyViewer
etc.

Emulator – Android Virtual Device (AVD)
by @wenjiun
Mobile Developer Day KL 2014

Android Virtual Device (AVD)

Emulator to test Android applications

Created with AVD Manager
by @wenjiun
Mobile Developer Day KL 2014

Android Virtual Device (AVD)

Different Category (Phone, Tablet, Wear, TV)

Different Device Definition (size, resolution, density)

Different System Image

Different Target & API level

Different ABI (CPU architecture)

Intel Atom (x86 & x86_64) – fast emulation with Intel
Hardware Accelerated Execution

RAM, VM heap, Internal Storage & SD Card size

Whether or not to use Host GPU (fast emulation)
by @wenjiun
Mobile Developer Day KL 2014

Faster emulation with Intel x86/x86_64 System Image

Download “Intel x86 Emulator Accelerator (HAXM
Installer)” in Android SDK Manager (inside Extras)

Run the installer in <Android SDK Folder>\extras\
intel\Hardware_Accelerated_Execution_Manager\

Download the latest “Intel x86 Atom/Atom_64 System
Image” e.g. Android 5.0 (API 21)

When create new AVD, select System Image with ABI of
either “x86” or “x86_64”

When the AVD is started, “HAX is working and emulator
runs in fast virt mode” is displayed.
by @wenjiun
Mobile Developer Day KL 2014

Using Hardware Devices
by @wenjiun
Mobile Developer Day KL 2014

New Project... - Hello World
by @wenjiun
Mobile Developer Day KL 2014

Hello World

The default new Android Project

Enter Application Name & Company Domain (e.g.
itrainmalaysia.com) to generate Package name (a unique
identifier)
by @wenjiun
Mobile Developer Day KL 2014

Hello World
by @wenjiun
Mobile Developer Day KL 2014

Hello World

“Phone and Tablet” will be ticked by default

Minimum SDK Version usually lower than latest API to
support older devices such as

API Level 9 (99.3%) but requires Android Support
Library package v7 for ActionBar

API Level 14 (87.9%) is recommended
by @wenjiun
Mobile Developer Day KL 2014

Hello World
by @wenjiun
Mobile Developer Day KL 2014

Hello World

Select Blank Activity with Fragment

Single Activity with a Fragment added.

The Fragment has a TextView displaying “Hello world!”
at the top left corner.
by @wenjiun
Mobile Developer Day KL 2014

Hello World
by @wenjiun
Mobile Developer Day KL 2014

Hello World
by @wenjiun
Mobile Developer Day KL 2014

Running “Hello World”

Run 'app' by
by @wenjiun
Mobile Developer Day KL 2014

Running “Hello World”

Choose a running AVD/device or launch a new one
by @wenjiun
Mobile Developer Day KL 2014

Running “Hello World”
by @wenjiun
Mobile Developer Day KL 2014

Project Structure

app/src/main/AndroidManifest.xml: provides essential info

app/src/main/java/: Java source code folder structured according
to package name (.java)

app/src/main/res/: managed resources folder, multiple subfolders
(drawable, layout, values)

app/src/main/assets/: unmanaged assets folder, raw format in
own folder structures

app/build/outputs/apk/: compiled binaries (.apk)

app/build/generated/source/: auto-generated Java source
(R.java)

app/libs/: additional Java libraries folder (.jar)
by @wenjiun
Mobile Developer Day KL 2014

Gradle build file (app/build.gradle)
by @wenjiun
Mobile Developer Day KL 2014
Gradle build file - defaultConfig

applicationId is Package name

minSdkVersion indicates which API level your
application requires and is usually lower than the build
target API level

targetSdkVersion should be set to the latest API Level
to utilize latest features & bug fixes

versionCode is an integer that is important in upgrading
applications published in Android Market, increase the
integer for every upgrade

versionName is just a label
by @wenjiun
Mobile Developer Day KL 2014
Add AppCompat v21 as dependency in Gradle build file for

Material Design in Pre-Lollipop Devices
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
compile "com.android.support:appcompat-v7:21.0.+"
}

Other changes

All Activity extend from ActionBarActivity

All Theme inherit from Theme.AppCompat.*
by @wenjiun
Mobile Developer Day KL 2014

AndroidManifest.xml
by @wenjiun
Mobile Developer Day KL 2014

Using XML-based Layouts

A specification of relationships between widgets (e.g. buttons)
and between widgets and their containers.

The approach to create and attach UI widgets to the Activity.

Stored in app/src/main/res/layout/

Attached in setContentView() in Activity's onCreate()
callback.
by @wenjiun
Mobile Developer Day KL 2014

Examine the xml layout

Locate activity_my.xml in res/layout/

Double click activity_my.xml to open in XML Editor.

Can switch between 'Design' tab and 'Text' tab.

Can select different rendering configuration

Size & density

Orientation

API level

Theme
by @wenjiun
Mobile Developer Day KL 2014

Layout Editor Design view
by @wenjiun
Mobile Developer Day KL 2014

Using XML-based Layouts – ID

UI widget that need to be referenced in the Java source needs an
ID.

For example the ID of a TextView:
android:id=“@+id/textView01”

Double click on a UI widget to assign/modify ID
by @wenjiun
Mobile Developer Day KL 2014

Using XML-based Layouts – ID

Access the identified widgets with findViewById() in Java source
code.
For example:
TextView textView01 = (TextView) findViewById(R.id.textView01);
cast to TextView
findViewById returns View
by @wenjiun
Mobile Developer Day KL 2014

Using android:id

Autocomplete (automatic or triggered via Ctrl+Space)
by @wenjiun
Mobile Developer Day KL 2014

Using android:id

Create a variable from an expression with Ctrl+Alt+V
by @wenjiun
Mobile Developer Day KL 2014

Using android:id

Change View to TextView

android.widget.TextView should be imported automatically

Press Alt+Enter then select Cast to 'android.widget.TextView'
by @wenjiun
Mobile Developer Day KL 2014

Using android:id

Run the application and you can see how the Java source code can set
the text of a particular TextView using ID.
public class MainActivity extends Activity {
TextView textView01;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
textView01 = (TextView)findViewById(R.id.textView01);
textView01.setText(new Date().toString());
}
}
by @wenjiun
Mobile Developer Day KL 2014

UI Widgets

Basic elements of Android GUI toolkit, listed in the
“Palette”, at the left side in Graphical Layout editor
by @wenjiun
Mobile Developer Day KL 2014

UI Widgets

TextView, Button,
CheckBox, ImageView,
ImageButton etc. under
“Widgets”
by @wenjiun
Mobile Developer Day KL 2014

Handling UI Widgets' Events

Using Event Listeners interface such as OnClickListener(),
OnCheckChangeListener()

Register Event Listeners to UI Widgets or Activity using
methods such as setOnClickListener()

Event Listeners include callback methods such onClick() for
OnClickListener()
by @wenjiun
Mobile Developer Day KL 2014

Adding interaction with an anonymous button click event
listener.
public class MainActivity extends Activity {
Button button01;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
View rootView = inflater.inflate(R.layout.fragment_main,
container, false);
button01 = (Button)rootView.findViewById(R.id.Button01);
button01.setText(new Date().toString());
button01.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
button01.setText(new Date().toString());
}
});
return rootView;
}
}
by @wenjiun