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

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

2
Android Market
Android devices come in all shapes
and sizes. As of late November 2010,
the Android OS can be seen powering...
Android Architecture

4
Tools to Develop Android
Apps
Eclipse IDE: to write code and design UI
Android SDK include AVD (Android Virtual Device):...
Create the AVD
1. Window/Android SDK and ADV Manager
2. Click new

6
Fill in the form as shown

7
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 t...
First Android App:

Android

9

Hello
10
3. Configure the project as
shown and click finish.

11
Configure

12

the Application to run with
the AVD
Target

13

the Application to the version of
the AVD
Run

14

the Application
Application output on
AVD

15
Assignment 1
Implement the Hello android application:
1. Create and run an AVD
2. Create new android project
3. Configure...
Android Resources

h
Grap

User
interface in

ic s

Variable’
s values

Components of
the application

17
Layout (Visual design)

18
Layout (XML)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/a
ndro...
Layout and View
Layout group views together
Views are components of the user interface

like controls. TextView is a lab...
Views’s Properties
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello"
De...
View’s Values
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="hello">HelloAndroid!</string>
<string name=...
Assignment 2
Change the application name to “First Android App”
Change the TextView to “First TextView”
Center the text...
AndroidManifest.x
ml
?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/and...
Application’s
icon

25
Assignment 3: new icon for the
app
Create a file (my_icon.png 72x72 pixels) and copy it to the

res/drawable directory
C...
Layouts and Views
Layout
Linear Layout
Relative Layout
Table Layout, etc…
Views
TextView
EditText
Button, ImageButto...
Linear Layout
LinearLayout is a ViewGroup that displays child View elements
in a linear direction, either vertically or ho...
main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:l...
main.xml cont.
<LinearLayout android:orientation="vertical"
android:layout_width="fill_parent" android:layout_height="fill...
Dimension Unit Measurements
Type of Measurement

Description

Unit String

Pixels

Actual screen pixels

px

Inches

Physi...
Color Formats Supported in
Android
Format
#RGB
#ARGB

Description
12-bit color
12-bit color with alpha

Example
#00F (blue...
Assignment 4
Change the layout to
show the following
output.

33
Some common views
ImageButton
EditText
Checkbox
RadioButton
ToggleButton
RatingBar

34
Create Views
 <Button

        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layou...
Create Views cont.
 <RadioGroup

      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
    ...
Create Views cont.
 <CheckBox android:id="@+id/checkbox"

        android:layout_width="wrap_content"
        android:lay...
Introduction Activity
 import android.app.Activity; //hover over Activity/import Activity

import android.os.Bundle;
// D...
Event OnClickListener
public class FormExample extends Activity {
    /** Called when the activity is first created. */
  ...
Event OnKeyListener
final EditText edittext = (EditText) findViewById(R.id.edittext);
edittext.setOnKeyListener(new OnKeyL...
Checkbox Status
final CheckBox checkbox = (CheckBox) findViewById(R.id.checkbox);
checkbox.setOnClickListener(new OnClickL...
ToggleButton
final ToggleButton togglebutton = (ToggleButton)
findViewById(R.id.togglebutton);
togglebutton.setOnClickList...
ChangeListener
final RatingBar ratingbar = (RatingBar) findViewById(R.id.ratingbar);
ratingbar.setOnRatingBarChangeListene...
Assignment 5
 Implement the following

views and their events:

44
ListView
ListView is a ViewGroup that creates a list of
scrollable items. The list items are automatically
inserted to the...
ListView extends ListActivity
public class ListViewExample extends ListActivity{
@Override
public void onCreate(Bundle sav...
ListView cont.
  static final String[] COUNTRIES = new String[] {
    "Afghanistan", "Albania", "Algeria", "American Samoa...
Activity Life
Cycle

48
49
 public class ExampleActivity extends Activity {

50

    public void onCreate(Bundle savedInstanceState) {// The activit...
Create Layout and Views by
code
public class UICodeActivity extends Activity {
/** Called when the activity is first creat...
Create Layout and Views by
code
Button btn = new Button(this);
btn.setText("This is a Button");
btn.setLayoutParams(params...
Upcoming SlideShare
Loading in...5
×

Android

280

Published on

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
280
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Android"

  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="http://schemas.android.com/apk/res/a 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="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> 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="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> 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 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   } } 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(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 39 }); // screen ( like a message box)
  40. 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;     } 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(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();     }   } }); 41
  42. 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();     }   } }); 42
  43. 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();   } }); 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="http://schemas.android.com/apk/ 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×