Published on

Published in: Technology, Art & Photos
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide


  1. 1. Wireless Mobility with Android Presented by: Ung Yean MS. Computer Science American University, Washington DC, USA 1
  2. 2. Objective To understand the Android building blocks and learn to develop Android applications. 2
  3. 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 3
  4. 4. Android Architecture 4
  5. 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. 5
  6. 6. Create the AVD 1. Window/Android SDK and ADV Manager 2. Click new 6
  7. 7. Fill in the form as shown 7
  8. 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% 8
  9. 9. First Android App: Android 9 Hello
  10. 10. 10
  11. 11. 3. Configure the project as shown and click finish. 11
  12. 12. Configure 12 the Application to run with the AVD
  13. 13. Target 13 the Application to the version of the AVD
  14. 14. Run 14 the Application
  15. 15. Application output on AVD 15
  16. 16. Assignment 1 Implement the Hello android application: 1. Create and run an AVD 2. Create new android project 3. Configure the android project to run with the AVD 4. Test run the project 16
  17. 17. Android Resources h Grap User interface in ic s Variable’ s values Components of the application 17
  18. 18. Layout (Visual design) 18
  19. 19. Layout (XML) <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" ndroid" 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> 19
  20. 20. Layout and View Layout group views together Views are components of the user interface like controls. TextView is a label 20
  21. 21. Views’s Properties android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/hello" Defined in values 21
  22. 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> 22
  23. 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"/> 23
  24. 24. AndroidManifest.x ml ?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="" package="" 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> 24
  25. 25. Application’s icon 25
  26. 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) 26
  27. 27. Layouts and Views Layout Linear Layout Relative Layout Table Layout, etc… Views TextView EditText Button, ImageButton RadioButton, CheckBox ToggleButton, etc… 27
  28. 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"> 28
  29. 29. main.xml <LinearLayout xmlns: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> 29
  30. 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> 30</LinearLayout>
  31. 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 31
  32. 32. Color Formats Supported in Android Format #RGB #ARGB Description 12-bit color 12-bit color with alpha Example #00F (blue) #800F (blue, alpha 50%) #RRGGBB 24-bit color #FF00FF (magenta) #80FF00FF (magenta, alpha 50%) #AARRGGBB 24-bit color with alpha The following code retrieves a color resource named app_text_color using the getColor() method: int textColor = getResources().getColor(R.color.app_text_color); 32
  33. 33. Assignment 4 Change the layout to show the following output. 33
  34. 34. Some common views ImageButton EditText Checkbox RadioButton ToggleButton RatingBar 34
  35. 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"/> 35
  36. 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> 36
  37. 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"/> 37
  38. 38. Introduction Activity  import; //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   } } 38
  39. 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(; 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 39 }); // screen ( like a message box)
  40. 40. Event OnKeyListener final EditText edittext = (EditText) findViewById(; 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;     } View: view that generates the event         return false; keyCode: which key is pressed   } }); KeyEvent: KeyEvent object, where you can access all the keyboard code 40
  41. 41. Checkbox Status final CheckBox checkbox = (CheckBox) findViewById(; 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();     }   } }); 41
  42. 42. ToggleButton final ToggleButton togglebutton = (ToggleButton) findViewById(; 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();     }   } }); 42
  43. 43. ChangeListener final RatingBar ratingbar = (RatingBar) findViewById(; ratingbar.setOnRatingBarChangeListener(new OnRatingBarChangeListener() {     public void onRatingChanged(RatingBar ratingBar, float rating, boolean fromUser) {         Toast.makeText(FormExample.this, "New Rating: " + rating, Toast.LENGTH_SHORT).show();   } }); 43
  44. 44. Assignment 5  Implement the following views and their events: 44
  45. 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=" res/android"     android:layout_width="fill_parent"     android:layout_height="fill_parent"     android:padding="10dp"     android:textSize="16sp" > 45 </TextView>
  46. 46. ListView extends ListActivity public 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(); 46     }   });
  47. 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. eg setListAdapter(new ArrayAdapter<String>(this, R.layout.list_item, COUNTRIES)); 47
  48. 48. Activity Life Cycle 48
  49. 49. 49
  50. 50.  public class ExampleActivity extends Activity { 50     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. 51. Create Layout and Views by code 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);   51
  52. 52. Create Layout and Views by code 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);  } 52