Wireless Mobility with Android

1. Wireless Mobility with Android Presented by: Ung Yean MS. Computer Science American University, Washington DC, USA

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

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

4. Android Architecture

5. Tools to Develop Android Apps • Eclipse IDE: to write code and design UI • Android 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.

6. Create the AVD • Window/Android SDK and ADV Manager • Click new

7. Fill in the form as shown

8. Run the AVD 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: Hello Android

11. 3. Configure the project as shown and click finish.

12. Configure the Application to run with the AVD

13. Target the Application to the version of the AVD

14. Run the Application

15. Application output on AVD

16. Assignment 1 • Implement the Hello android application: • Create and run an AVD • Create new android project • Configure the android project to run with the AVD • Test run the project

17. Android Resources Graphics User interface in Variable’s values Components of the application

18. Layout (Visual design)

19. Layout (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 View • Layout group views together • Views are components of the user interface like controls. TextView is a label

21. Views’s Properties android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/hello" Defined in values

22. View’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 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. AndroidManifest.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 icon

26. Assignment 3: new icon for the 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 Views Layout • Linear Layout • Relative Layout • Table Layout, etc… Views • TextView • EditText • Button, ImageButton • RadioButton, CheckBox • ToggleButton, etc…

28. Linear Layout LinearLayout is a ViewGroup that displays child View elements in a linear direction, either vertically or horizontally. Linear Layout Linear Layout android:layout_weight="1"> Linear Layout android:layout_weight="1">

29. main.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. <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

32. Color Formats Supported in Android The following code retrieves a color resource named app_text_color using the getColor() method: int textColor = getResources().getColor(R.color.app_text_color);

33. Assignment 4 Change the layout to show the following output.

34. Some common views • ImageButton • EditText • Checkbox • RadioButton • ToggleButton • RatingBar

35. Create 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. • <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. • <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 Activity • import 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 OnClickListener public 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 OnKeyListener final 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 event keyCode: which key is pressed KeyEvent: KeyEvent object, where you can access all the keyboard code

41. Checkbox Status final 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. ToggleButton final 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. ChangeListener final 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();    }});

44. Assignment 5 • Implement the following views and their events:

45. ListView ListView 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 ListActivity public class ListViewExample extends ListActivity{ @Overridepublic 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.   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. egsetListAdapter(new ArrayAdapter<String>(this, R.layout.list_item, COUNTRIES));

48. Activity Life Cycle

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();    }}