The document provides a comprehensive guide on setting up and using the Android SDK with Eclipse, detailing steps to create an Android project, define UI components such as activities, resource files, and various UI elements like text views, buttons, and spinners. Key concepts like the importance of the onCreate() method, resource referencing, and event handling for UI components are also covered. Additionally, it explains how to utilize drawable resources and provides code examples for implementing different interactive features in Android applications.

2.  Galileo 3.5
 Helios 3.6
 Indigo 3.7

4.  Before using eclipse and android SDK, you
need to check that the Android Developer
Tools are set and corresponds to android
SDK is set directory correctly.
 See next slide

8.  Android Virtual Device is now set

9.  Click file – New – Android project.
 Enter the project name.
 Select an Emulator to use
 Enter application name
 Package name – e.g com.emobilis – two
sections*
 Activity name

10.  Naming
 Project Name
 Application Name
 Package Name
 Min SDK
 Target SDK
 Manifest Files
 Resource files
 R file
 Emulator

14. 
Activity





R file
Android API level 8
Resource file
Manifest File

15.  An Activity is an application component that
provides a screen with which users can
interact in order to do something.
 Such as dial the phone, take a photo, send an
email, or view a map.
 Each activity is given a window in which to
draw its user interface.

17.  All activities will implement onCreate(Bundle) to
do their initial setup.
 onCreate() You must implement this method. The
system calls this when creating your activity.
 Within your implementation, you should initialize
the essential components of your activity.
 Most importantly, this is where you must
call setContentView() to define the layout for the
activity's user interface

18. 

/* AUTO-GENERATED FILE. DO NOT MODIFY. This class was automatically generated by the
* aapt tool from the resource data it found. It should not be modified by hand. */


















package cs454.demo;
public final class R {
public static final class attr {
}
public static final class drawable {
public static final int icon=0x7f020000;
}
public static final class id {
public static final int textview=0x7f050000;
}
public static final class layout {
public static final int main=0x7f030000;
}
public static final class string {
public static final int app_name=0x7f040001;
public static final int hello=0x7f040000;
}
}

19.  What is a Resource File?
 A resource file may contain a collection of
icons, xml files for UI design, strings files etc.
 In android, UI design is constructed in xml
files located in res – layout.
 Include drawable – use it for images, icons

20.  Creating a person example

21.  The next xml Files shows a TextView with a
linear layout.
 Linear layout allows a developers to arrange
UI components in a vertical or horizontal
manner.
 A TextView shows text that can be edited –
it’s a label.

22. Note: Interface is designed here

23.  Android Provides several UI components including
 TextViews
 EditText
 TextArea
 RadioButton
 CheckBox
 List
 Buttons
 Tabs
 Menus
 Etc
We look on each UI component individually

24.  Displays text to the user and optionally
allows them to edit it.
 A TextView is a complete text editor,
however the basic component is configured
to not allow editing.
 In order to edit EditText for a subclass that
configures the text view for editing.

29.  Accessing our TextView from the android
code.
 We use the id to do this;
 So, in android we add;
 EditText t = (EditText)findViewById(R.id.txtUser);

31.  Allows you to separate your UI with the code
that is controlling.
 Allows developers arrange the java codes
easily
 Easy understanding of the Java programming
in android

32.  EditText is a thin veneer over TextView that
configures itself to be editable.
<EditText
android:id = "@+id/txtUser"
android:layout_width="100px"
android:layout_height="198dp"
android:gravity="center“
/>

33.  Represents a push-button widget. Push-
buttons can be pressed, or clicked, by the
user to perform an action
<Button
android:id = "@+id/btnRegister"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Register“
/>

35.  Edit Text can also be used to input long text,
recall , text areas.
 This can be done by setting the layout width
and height to defined pixels
<EditText
android:id = "@+id/txtComment"
android:layout_width="200px"
android:layout_height="200px"
android:gravity="center“
/>

36.  Accessing the Edit Text from the android code –
(Our activity)
 We use findViewById method to refer from the R
directory.
EditText tComment = (EditText)findViewById(R.id.txtComment);

37.  A radio button is a two-states button that can
be either checked or unchecked.
 When the radio button is unchecked, the user
can press or click it to check it.
 However, contrary to aCheckBox, a radio
button cannot be unchecked by the user once
checked.

38.  Radio buttons are normally used together in
a RadioGroup.
 When several radio buttons live inside a radio
group, checking one radio button unchecks
all the others.

39. <RadioGroup
android:id="@+id/radNotifications"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<RadioButton
android:text=“Via Phone"
android:id="@+id/RbPhone"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
</RadioButton>

40. <RadioButton
android:text=“Via Email"
android:id="@+id/rdEmail"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
</RadioButton>
</RadioGroup>

42.  Accessing the Radio Buttons from the android
code – (Our activity)
 We use findViewById method to refer from the R
directory.
RadioButton tComment =
(RadioButton)findViewById(R.id.rdPhone);
//second Radio
RadioButton tComment =
(RadioButton)findViewById(R.id.rdEmail);

43.  Quickview
 A toast is a message that appears on the
surface of the screen for a moment, but it
does not take focus (or pause the current
activity).
 so it cannot accept user input
 You can customize the toast layout to include
images

44.  A toast notification is a message that pops up
on the surface of the window.
 It only fills the amount of space required for
the message and the user's current activity
remains visible and interactive.
 The notification automatically fades in and
out, and does not accept interaction events.
 The screenshot below shows an example
toast notification from the Alarm application.

46. Toast.makeText(Hello.this, "Selected",
Toast.LENGTH_SHORT).show();

47.  Add android:onClick attribute on the radio
buttons in your xml file.
 <RadioButton

android:id="@+id/radio_red"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Red"
android:onClick="onRadioButtonClicked"/>

48.  Include this method in your activity – Note this
method shares the same name with on Click
attribute in your xml.
//on click event in radio Buttons
public void onRadioButtonClicked(View v)
{
// Perform action on clicks
RadioButton rb = (RadioButton) v;
Toast.makeText(Hello.this, rb.getText(),
Toast.LENGTH_SHORT).show();
}

49.  A checkbox is a specific type of two-states
button that can be either checked or
unchecked.
 A example usage of a checkbox inside your
xml would be the following.

50. Include this in your xml
<CheckBox
android:id="@+id/checkbox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="check it out“
android:onClick="onCheckboxClicked"
>
Note: onClick attribute

51.  Include this in your activity
public void onCheckboxClicked(View v) {
// Perform action on clicks, depending on whether it's now checked
if (((CheckBox) v).isChecked()) {
Toast.makeText(Hello.this, "Selected",
Toast.LENGTH_SHORT).show();
} else {
Toast.makeText(Hello.this, "Not selected",
Toast.LENGTH_SHORT).show();
}
}

52.  ListView is a ViewGroup that creates a list of
scrollable items.
 The list items are automatically inserted to
the list using a ListAdapter.

53.  Open the Counties.java and make the class
extend ListActivity (instead of Activity):
 public class Counties extends ListActivity {
}

54. @Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setListAdapter(new ArrayAdapter<String>(this, R.layout.login,
COUNTIES));
ListView lv = getListView();
lv.setTextFilterEnabled(true);
}

55. //Include this string array after the onCreate
method
static final String[] COUNTIES = new String[]
{
“Nairobi", “Kakamega", “Kisii", “Nakuru",
“Laikipia",“Bungoma", “Eldoret", “Kwale“
};

56.  Notice that this does not load a layout file for
the Activity .
 which you usually do with setContentView(int)).
 Instead, setListAdapter(ListAdapter) automatic
ally 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.

57.  Spinner is a widget similar to a drop-down list
for selecting items.
 Mostly used where a user needs to select an
item from a list.

58.  Create an xml file in the res/layout/ and insert
the following xml codes.
 Note Spinner's android:prompt attribute
reference a string resource - string resource
is located in res/values.

60.  Open strings.xml – located in
res/values/strinng.xml
 Add this line

62. 
The android.R.layout.simple_spinner_item ID references a
layout for the standard spinner appearance, defined by the
platform.

Then setDropDownViewResource(int) is called to define the
appearance for each item when the widget is
opened(simple_spinner_dropdown_item is another standard
layout defined by the platform).

Finally, the ArrayAdapter is set to associate all of its items
with the Spinner by calling setAdapter(T).

63.  Android offers a custom 2D graphics library
for drawing shapes and images.
 The android.graphics.drawable package is
where you'll find the common classes used
for drawing in two-dimensions.
 A Drawable is a general abstraction for
"something that can be drawn.

64.  Creating from resource images
 A simple way to add graphics to your
application is by referencing an image file
from your project resources.
 Supported file types are PNG (preferred), JPG
(acceptable) and GIF (discouraged).
 This technique would obviously be preferred for
application icons, logos, or other graphics such as
those used in a game

65.  To use an image resource, just add your file to
the res/drawable/ directory of your project.
 From there, you can reference it from your
code or your XML layout.
 Either way, it is referred using a resource ID,
which is the file name without the file type
extension (E.g., my_image.png is referenced
as my_image).

67.  Image View is a widget that allows placement
of an image in a window