Wireless Mobility Wireless Mobility with Androidwith Android

1

Presented by:Ung Yean

MS. Computer ScienceAmerican University, Washington DC, USA

ObjectiveObjective

2

To understand the Android building blocks and learn to develop Android applications.

Android MarketAndroid Market

3

Android devices come in all shapes and sizes. As of late November 2010, the Android OS can be seen poweringthe following types of devices:➤ Smartphones➤ Tablets➤ E-reader devices➤ Netbooks➤ MP4 players➤ Internet TVs

Android ArchitectureAndroid Architecture

4

Tools to Develop Android Tools to Develop Android AppsApps

5

Eclipse IDE: to write code and design UIAndroid SDK include AVD (Android Virtual

Device): to test the applications

ADT (Android Development Tools): The Plug-in includes various wizards for creating and debugging Android projects.

Create the AVDCreate the AVD

6

1. Window/Android SDK and ADV Manager

2. Click new

7

Fill in the form as shown

Run the AVDRun the AVD

8

Select one of the created AVD and click start. This will run the AVD where your App will be run on. (It will take a while for the AVD to load.). You will have the option of scale the display . Screen Size 7 means 70%

9

First Android App: First Android App: Hello Hello AndroidAndroid

10

11

3. Configure the project as shown and click finish.

12

Configure Configure the Application to run the Application to run with the AVDwith the AVD

13

Target Target the Application to the version the Application to the version of the AVDof the AVD

14

Run Run the Application the Application

15

Application output Application output on AVD on AVD

16

Assignment 1Assignment 1

Implement the Hello android application:1.Create and run an AVD2.Create new android project3.Configure the android project to run with the AVD4.Test run the project

17

Android ResourcesAndroid Resources

Graphics

User interface in

Variable’s values

Components of the application

18

Layout Layout (Visual (Visual design)design)

19

Layout Layout (XML)(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>

20

Layout and ViewLayout and View

Layout group views together Views are components of the user

interface like controls. TextView is a label

21

Views’s PropertiesViews’s Properties

android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/hello"

Defined in values

22

View’s ValuesView’s Values

<?xml version="1.0" encoding="utf-8"?>

<resources>

<string name="hello">HelloAndroid!</string>

<string name="app_name">Hello Android</string>

</resources>

23

Assignment 2Assignment 2

Change the application name to “First Android App”

Change the TextView to “First TextView”Center the text to the middle of the screen, by

changing the TextView properties to the following:

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/hello" android:layout_gravity="center"/>

24

AndroidManifesAndroidManifest.xmlt.xml

?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

package="org.kids"

android:versionCode="1"

android:versionName="1.0">

<uses-sdk android:minSdkVersion="8" />

<application android:icon="@drawable/icon" android:label="@string/app_name">

<activity android:name=".HelloAndroid"

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>

25

Application’s Application’s iconicon

26

Assignment 3: new icon for Assignment 3: new icon for the appthe app

Create a file (my_icon.png 72x72 pixels) and copy it to the res/drawable directory

Change the manifest to point to this file (application icon is this file).

Note: the file format can be png, jpg, or gif (Not recommended)

27

Layouts and Layouts and ViewsViews

LayoutLinear LayoutRelative LayoutTable Layout, etc…Views

TextViewEditTextButton, ImageButtonRadioButton, CheckBoxToggleButton, etc…

28

Linear LayoutLinear Layout

LinearLayout is a ViewGroup that displays child View elements in a linear direction, either vertically or horizontally.

Linear Layout

Linear Layout

Linear Layout

android:layout_weight="1">

android:layout_weight="1">

29

main.xmlmain.xml<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="vertical" android:layout_width="fill_parent"

android:layout_height="fill_parent">

<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>

30

main.xml cont.main.xml cont. <LinearLayout android:orientation="vertical"

android:layout_width="fill_parent" android:layout_height="fill_parent"

android:layout_weight="1">

<TextView android:text="row one" android:textSize="30dip"

android:layout_width="fill_parent" android:layout_height="wrap_content"

android:layout_weight="1"/> <TextView android:text="row two" android:textSize="30dip"

android:layout_width="fill_parent" android:layout_height="wrap_content"

android:layout_weight="1" />

</LinearLayout></LinearLayout>

31

Dimension Unit Measurements

Type of Measurement Description Unit String

Pixels Actual screen pixels px

Inches Physical measurement in

Millimeters Physical measurement mm

Points Common font measurement pt

Density-independent pixels Pixels relative to 160dpi dp

Scale-independent pixels Best for scalable font display sp

32

Color Formats Supported in Color Formats Supported in AndroidAndroid

Format Description Example #RGB 12-bit color #00F (blue) #ARGB 12-bit color with alpha #800F (blue, alpha 50%) #RRGGBB 24-bit color #FF00FF (magenta)

#AARRGGBB 24-bit color with alpha #80FF00FF (magenta, alpha 50%)

The following code retrieves a color resource named app_text_color using thegetColor() method:

int textColor = getResources().getColor(R.color.app_text_color);

Assignment 4Assignment 4

33

Change the layout to show the following output.

34

Some common viewsSome common views

ImageButtonEditTextCheckboxRadioButtonToggleButtonRatingBar

35

Create ViewsCreate Views<Button

        android:id="@+id/button"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:padding="10dp"        android:background="@drawable/android_button" />

<EditText        android:id="@+id/edittext"        android:layout_width="fill_parent"        android:layout_height="wrap_content"/>

36

Create Views cont.Create Views cont.<RadioGroup

      android:layout_width="fill_parent"      android:layout_height="wrap_content"      android:orientation="vertical">      <RadioButton android:id="@+id/radio_red"          android:layout_width="wrap_content"          android:layout_height="wrap_content"          android:text="Red" />      <RadioButton android:id="@+id/radio_blue"          android:layout_width="wrap_content"          android:layout_height="wrap_content"          android:text="Blue" />

</RadioGroup>

37

Create Views cont.Create Views cont.<CheckBox android:id="@+id/checkbox"

        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="check it out" />

<ToggleButton android:id="@+id/togglebutton"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:textOn="Vibrate on"        android:textOff="Vibrate off"/>

<RatingBar android:id="@+id/ratingbar"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:numStars="5"        android:stepSize="1.0"/>

38

Introduction ActivityIntroduction Activityimport android.app.Activity; //hover over

Activity/import Activity import android.os.Bundle;// Defined in AndroidManifest, when the project is created.public class FormExample extends Activity {    /** Called when the activity is first created. */    @Override //added by eclipse    public void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState); //call parent        setContentView(R.layout.main); //show main.xml    }}

39

Event OnClickListenerEvent OnClickListenerpublic class FormExample extends Activity {

    /** Called when the activity is first created. */    @Override    public void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState); //call parent        setContentView(R.layout.main); //show main.xml

Button button = (Button) findViewById(R.id.button);button.setOnClickListener(new OnClickListener() {

    public void onClick(View v) {// Perform action on click        Toast.makeText(FormExample.this, "button is clicked", Toast.LENGTH_SHORT).show();    } // a toast is a small message box that appears briefly on the

}); // screen ( like a message box)    }}

40

Event OnKeyListenerEvent OnKeyListenerfinal EditText edittext = (EditText) findViewById(R.id.edittext);

edittext.setOnKeyListener(new OnKeyListener() {    public boolean onKey(View v, int keyCode, KeyEvent event) {        // If the event is a key-down event on the "enter" button        if (keyCode == KeyEvent.KEYCODE_ENTER)) {          // Perform action on key press          Toast.makeText(FormExample.this, edittext.getText(), Toast.LENGTH_SHORT).show();          return true;        }        return false;    }});

View: view that generates the eventkeyCode: which key is pressedKeyEvent: KeyEvent object, where you can access all the keyboard code

41

Checkbox StatusCheckbox Statusfinal CheckBox checkbox = (CheckBox) findViewById(R.id.checkbox);

checkbox.setOnClickListener(new OnClickListener() {    public void onClick(View v) {        // Checkbox status        if (((CheckBox) v).isChecked()) {            Toast.makeText(FormExample.this, "Selected", Toast.LENGTH_SHORT).show();        } else {            Toast.makeText(FormExample.this, "Not selected", Toast.LENGTH_SHORT).show();        }    }});

42

ToggleButtonToggleButtonfinal ToggleButton togglebutton = (ToggleButton) findViewById(R.id.togglebutton);

togglebutton.setOnClickListener(new OnClickListener() {    public void onClick(View v) {        // Perform action on clicks        if (togglebutton.isChecked()) {            Toast.makeText(FormExample.this, "Checked", Toast.LENGTH_SHORT).show();        } else {            Toast.makeText(FormExample.this, "Not checked", Toast.LENGTH_SHORT).show();        }    }});

43

ChangeListenerChangeListenerfinal RatingBar ratingbar = (RatingBar) findViewById(R.id.ratingbar);

ratingbar.setOnRatingBarChangeListener(new OnRatingBarChangeListener() {    public void onRatingChanged(RatingBar ratingBar, float rating,

boolean fromUser) {        Toast.makeText(FormExample.this, "New Rating: " + rating,

Toast.LENGTH_SHORT).show();    }});

Assignment 5Assignment 5

44

Implement the following views and their events:

45

ListViewListViewListView is a ViewGroup that creates a list of

scrollable items. The list items are automatically inserted to the list using a ListAdapter.

list_item.xml<?xml version="1.0" encoding="utf-8"?>

<TextView xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    android:padding="10dp"    android:textSize="16sp" ></TextView>

46

ListView extends ListView extends ListActivityListActivitypublic class ListViewExample extends ListActivity{@Override

public void onCreate(Bundle savedInstanceState) {  super.onCreate(savedInstanceState);  setListAdapter(new ArrayAdapter<String>(this, R.layout.list_item, COUNTRIES));

ListView lv = getListView();  lv.setOnItemClickListener(new OnItemClickListener() {    public void onItemClick(AdapterView<?> parent, View view,        int position, long id) {      // When clicked, show a toast with the TextView text      Toast.makeText(getApplicationContext(), ((TextView) view).getText(),          Toast.LENGTH_SHORT).show();    }  });

// The list_item is the TextView, where the String array COUNTRIES is adapted to.

 

47

ListView cont.ListView cont.  static final String[] COUNTRIES = new String[] {    "Afghanistan", "Albania", "Algeria", "American Samoa", “Cambodia",      "Christmas Island", "Colombia", "Comoros", "Congo","Dominican Republic", "Greece", "Greenland", "Grenada", "Guadeloupe", "Guam", Marianas", "Yemen", "Yugoslavia", "Zambia", "Zimbabwe"  };

Notes: setListAdapter(ListAdapter) automatically adds a ListView

to fill the entire screen of the ListActivity. This method takes an ArrayAdapter, which manages the array of list items that will be placed into the ListView.

eg setListAdapter(new ArrayAdapter<String>(this, R.layout.list_item, COUNTRIES));

48

Activity Life Activity Life CycleCycle

49

50

public class ExampleActivity extends Activity {    public void onCreate(Bundle savedInstanceState) {// The activity is being created.        super.onCreate(savedInstanceState);     }    protected void onStart() {  // The activity is about to become visible.        super.onStart();     }    protected void onResume() {// The activity has become visible (it is now "resumed").        super.onResume();    }    protected void onPause() {// Another activity is taking focus (this activity is about //to be "paused").        super.onPause()        }    protected void onStop() {// The activity is no longer visible (it is now "stopped")        super.onStop();    }    protected void onDestroy() {// The activity is about to be destroyed.        super.onDestroy();    }}

51

Create Layout and Views by Create Layout and Views by codecode

public class UICodeActivity extends Activity {

/** Called when the activity is first created. */

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

LayoutParams params = new LinearLayout.LayoutParams(

LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT);

// ---create a layout---

LinearLayout layout = new LinearLayout(this);

layout.setOrientation(LinearLayout.VERTICAL);

// ---create a textview---

TextView tv = new TextView(this);

tv.setText("This is a TextView");

tv.setLayoutParams(params);

 

52

Create Layout and Views by Create Layout and Views by codecode

Button btn = new Button(this);

btn.setText("This is a Button");

btn.setLayoutParams(params);

// ---adds the textview---

layout.addView(tv);

// ---adds the button---

layout.addView(btn);

// ---create a layout param for the layout---

LinearLayout.LayoutParams layoutParam = new LinearLayout.LayoutParams(

LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT);

this.addContentView(layout, layoutParam); 

}