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

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

Android Market 3 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

Android Architecture 4

Tools to Develop Android Apps 5 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.

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

7 Fill in the form as shown

Run 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: Hello Android

10

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

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

18 Layout (Visual design)

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

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" 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:layout_gravity="center"/>

24 AndroidManifest.xml ?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android=" package="org.kids" android:versionCode="1" android:versionName="1.0"> <uses-sdk android:minSdkVersion="8" /> <application <activity android:name=".HelloAndroid" <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 android:layout_weight= "1">

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

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

31 Dimension Unit Measurements Type of MeasurementDescriptionUnit String PixelsActual screen pixelspx InchesPhysical measurementin MillimetersPhysical measurementmm PointsCommon font measurementpt Density-independent pixelsPixels relative to 160dpidp Scale-independent pixelsBest for scalable font displaysp

32 Color Formats Supported in Android FormatDescriptionExample #RGB12-bit color#00F (blue) #ARGB12-bit color with alpha#800F (blue, alpha 50%) #RRGGBB24-bit color#FF00FF (magenta) #AARRGGBB24-bit color with alpha #80FF00FF (magenta, alpha 50%) The following code retrieves a color resource named app_text_color using the getColor() method: int textColor = getResources().getColor(R.color.app_text_color);

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

34 Some common views ImageButton EditText Checkbox RadioButton ToggleButton RatingBar

35 Create Views <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="10dp" /> <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:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Red" /> <RadioButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Blue" /> </RadioGroup>

37 Create Views cont. <CheckBox android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="check it out" /> <ToggleButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:textOn="Vibrate on" android:textOff="Vibrate off"/> <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. //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. 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(); } });

Assignment 5 44 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

46 ListView extends ListActivity public class ListViewExample extends public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setListAdapter(new ArrayAdapter (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. eg setListAdapter(new ArrayAdapter (this, R.layout.list_item, COUNTRIES));

48 Activity Life Cycle

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

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