Android Application Development: Hands-

On Dr. Jogesh K. Muppala muppala@cse.ust.hk

Wi-Fi Access •  Wi-Fi Access

–  Account Name: aadc201312

AAD: Hands-On (Muppala) Introduction 2

The Android Wave!

AAD: Hands-On (Muppala) Introduction 3

Hello, Android!

Configure the Android SDK •  SDK = Software Development Kit

•  First move to the Eclipse directory D:\eclipse •  Start Eclipse by double clicking it •  Set your workspace to be D:\workspace •  Click Window-> Preferences-> Android, and

choose the SDK location to where you put the Android SDK (must be D:\android-sdk-windows)

AAD: Hands-On (Muppala) Introduction 5

Create an Android AVD •  AVD = Android Virtual

Device (Emulator) •  Create an Android

Virtual Device (AVD): In Eclipse, select Window-> Android SDK and AVD Manager-> Virtual Devices, and click New

•  Here is an example to create a AVD

AAD: Hands-On (Muppala) Introduction 6

Select Your AVD •  After clicking “Create AVD”, you should see available

AVD(s) •  Select AVD and click “Start …”

AAD: Hands-On (Muppala) Introduction 7

Run your AVD •  Run the AVD as below and keep it alive during the lesson •  Every time, you may need around a minute to start the

emulator

AAD: Hands-On (Muppala) Introduction 8

Hello, Android! •  Create a new Android Project. In Eclipse, click File->

New -> Android project. Meaning of the different fields: –  Project Name

•  This is the Eclipse Project name — the name of the directory that will contain the project files. Use “helloandroid”

–  Build Target •  The version of Android platform you wish your application to run.

Since Android applications are forward-compatible, and recall that we have select our AVD version as Android 2.2, you may select any Android version that is not higher than 2.2.

–  Application Name •  This is the human-readable title for your application — the name

that will appear on the Android device. Use Hello Android.

AAD: Hands-On (Muppala) Introduction 9

Hello, Android! –  Package Name

•  This is the package namespace (following the same rules as for packages in the Java programming language) that you want all your source code to reside under. This also sets the package name under which the stub Activity will be generated.

•  Your package name must be unique across all packages installed on the Android system; for this reason, it's important to use a standard domain-style package for your applications. Here we use the ”hkust.cse.HelloAndroid " namespace, which is a namespace reserved for example documentation — when you develop your own applications, you should use a namespace that's appropriate to your organization or entity.

–  Create Activity •  This is the name for the class stub that will be generated by the plugin.

This will be a subclass of Android's Activity class. An Activity is simply a class that can run and do work. It can create a UI if it chooses, but it doesn't need to. As the checkbox suggests, this is optional, but an Activity is almost always used as the basis for an application. Here we use HelloAndroid.

–  Min SDK Version •  This specifies the minimum API Level on which your application can run.

By default this is set to the API Level of the Build Target Platform. As new APIs are added to newer Versions, their API levels increase as well. A Program that uses an API Level of four won't be able to run on a platform that has a lower API Level.

AAD: Hands-On (Muppala) Introduction 10

Hello, Android! •  Now your Android project is ready. In Package

Explorer, click src-> hkust.cse.HelloAndroid. Open HelloAndroid.java –  Notice that the class is based on the Activity class. –  An Activity is a single application entity that is used to

perform actions. An application may have many separate activities, but the user interacts with them one at a time.

–  The onCreate() method will be called by the Android system when your Activity starts — it is where you should perform all initialization and UI setup.

–  An activity is not required to have a user interface, but usually will.

AAD: Hands-On (Muppala) Introduction 11

Hello, Android! •  Construct the UI. Use following code to replace the

default code of onCreate().    public void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        TextView tv = new TextView(this);        tv.setText("Hello, Android");        setContentView(tv);    }

•  Since the class TextView is not accepted by default, you should click on it and select Import ‘TextView’ (android.widget). –  you can also type yourself: import android.widget.TextView; –  Tip: An easy way to add import packages to your project is to

press Ctrl-Shift-O (Cmd-Shift-O, on Mac). This is an Eclipse shortcut that identifies missing packages based on your code and adds them for you.

AAD: Hands-On (Muppala) Introduction 12

Hello, Android! •  An Android user interface is composed of hierarchies of objects

called Views. A View is a drawable object used as an element in your UI layout, such as a button, image, or (in this case) a text label. Each of these objects is a subclass of the View class and the subclass that handles text is TextView.

•  In this change, you create a TextView with the class constructor, which accepts an Android Context instance as its parameter. A Context is a handle to the system; it provides services like resolving resources, obtaining access to databases and preferences, and so on. The Activity class inherits from Context, and because your HelloAndroid class is a subclass of Activity, it is also a Context. So, you can pass this as your Context reference to the TextView.

•  Next, you define the text content with setText(). •  Finally, you pass the TextView to setContentView() in order to

display it as the content for the Activity UI. If your Activity doesn't call this method, then no UI is present and the system will display a blank screen.

•  There it is — "Hello, Android!" in Android! The next step, of course, is to see it running. AAD: Hands-On

(Muppala) Introduction 13

Hello, Android! •  Run the application. Click Run-> Run, and select

Android Application. Eclipse will build the whole project and deploy it to an emulator automatically. You can find your application in Menu.

•  Debug your project. Put a breakpoint for your application by double-clicking on the marker bar next to the source code line. –  After setting a breakpoint, select Run-> Debug, and

Eclipse will restart your emulator. But this time it will suspend when it reaches the breakpoint you set. You can then step through the code in Eclipse's Debug Perspective, just as you would for any other application.

AAD: Hands-On (Muppala) Introduction 14

Hello, Android! •  Upgrade the UI to an XML Layout. This is an easier

way to apply your modification to the UI to different applications. –  In the Eclipse Package Explorer, select /res/layout/

main.xml •  This xml layout file can be used by the application to

construct user interfaces –  Modify the contents of the file to the following:

<?xml version="1.0" encoding="utf-8"?> <TextView xmlns:android="http://schemas.android.com/apk/res/android"   android:id="@+id/textview"   android:layout_width="fill_parent"   android:layout_height="fill_parent"   android:text="@string/hello"/> AAD: Hands-On

(Muppala) Introduction 15

Hello, Android! •  Now modify your HelloWorld.java file. Replace the

content of onCreate() with following code:     public void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.main);     }

•  Compared to the previous code, the importing of android.widget.Textview is not needed, and instead of passing setContentView() a View object, you give it a reference to the layout resource. The resource is identified as R.layout.main, which is actually a compiled object representation of the layout defined in /res/layout/main.xml.

•  Now you can run the application again, and see that the title of the application and the text has been changed.

AAD: Hands-On (Muppala) Introduction 16

Hello, Android! •  Open /res/values/strings.xml

–  you can see the values of the two strings: hello and app_name defined there.

•  Replace the string value of hello with “Hello, <Your Neighbor’s name>!”

•  Now you can run the application again, and see that the application now prints the new hello string!

AAD: Hands-On (Muppala) Introduction 17

Get Familiar with Eclipse

AAD: Hands-On (Muppala) Introduction 18

Get Ready with Your Eclipse •  As Eclipse is not only designed for Android

development, there might have some slight difference –  You should choose the Java code editing environment by

selecting Window > Open Perspective > Java –  If you cannot see the Java icon, you click Other... to look

for the Java code editing environment

•  We can divide it into 5 components: menu bar, tool bar, navigation area, editor area and debug area

AAD: Hands-On (Muppala) Introduction 19

5 Components in Eclipse

AAD: Hands-On (Muppala) Introduction 20

Menu Bar •  Eclipse menu bar contains familiar functions like

file and editing operations •  The File menu contains menu items for Import and

Export, which are used to import project files into the Workspace, and export them out again

•  In the Run menu, you will find commands related to running and debugging application code, and launching external tools such as Android emulator

•  In the Help menu, you can search helps and check for updates of Eclipse software and plugin by selecting Help > Check for Updates ...

AAD: Hands-On (Muppala) Introduction 21

Toolbar

AAD: Hands-On (Muppala) Introduction 22

•  One important feature of toolbar is to provide you with a quick access of Android SDK Manager in the Android SDK and AVD Manager group

•  If you have installed Android development tools for Eclipse, on the left side of the toolbar you should see an Android SDK and AVD manager grouping

•  You can click these buttons to update and install SDK and virtual devices.

Navigation Area •  Navigation area usually

consists of three views, Package Explorer, Outline and Task List if you choose to use Java perspective

•  Let’s talk about the first two

•  Package Explorer helps to find all information for the project, for example, source code, compile sources, libraries, manifest, intent-filters, uses-permissions

AAD: Hands-On (Muppala) Introduction 23

Navigation Area - Package Explorer (1/2) •  The first folder is named by the project name. It

includes the 6 subfolders. They are src, gen, Android Library, assets, bin and res. –  “src” stores the code which developers write; –  “gen” stores the generated Java files by the system; –  “Android Library” contains a file named android.jar which

is the Android library class file; –  “assets” stores the source code or files which are not Java

classes and later retrieved as raw byte stream; –  “bin” stores the binary and executable files which is

generated by compiler

AAD: Hands-On (Muppala) Introduction 24

Navigation Area - Package Explorer (2/2)

–  “res” stores all the resources used by your Android application. For example, the drawable folder contains a png image file that is used as the icon for your application. The layout folder contains an XML file used to represent the user interface of your Android application. The values folder contains an XML file used to store a list of string constants.

–  AndroidManifest.xml file is an application configuration file that contains detailed information about your application, such as the number of activi- ties you have in your application, the types of permissions your application needs, the version information of your application, and so on.

AAD: Hands-On (Muppala) Introduction 25

Navigation Area - Outline View

•  The Outline view displays an outline of a structured file that is currently open in the editor area, and lists structural elements

•  It also provides the descriptions of all the small buttons in the Outline view

AAD: Hands-On (Muppala) Introduction 26

Editor Area

•  Editor area provides two types of user interface, a “smart” code sheet and a graphical layout builder.

•  Smart code sheet is a text editor area for writing the source code of application

•  Eclipse provides a graphical layout editor to create the layout of user interface by drag and drop interface creation and live preview for your new application

AAD: Hands-On (Muppala) Introduction 27

Editor Area – Smart Code Sheet •  The “smart” sheet includes many functions, for

example, showing hints of arguments

AAD: Hands-On (Muppala) Introduction 28

Editor Area – Graphical Layout Editor •  It will be visible via a tab at the bottom of the code

editor window when you open your xml file (res/layout)

AAD: Hands-On (Muppala) Introduction 29

Debug Area

•  Debug area usually provides information about warnings, errors, logs and specifications

•  The above is an example of showing Java errors in the Problems tab

AAD: Hands-On (Muppala) Introduction 30