android bootcamp tanzania:understanding ui in_android

Galileo 3.5Helios 3.6 Indigo 3.7

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

Android Virtual Device is now set

Click file – New – Android project.

Enter the project name.Select an Emulator to useEnter application namePackage name – e.g com.emobilis –

two sections*Activity name

NamingProject NameApplication NamePackage Name

Min SDKTarget SDK Manifest FilesResource filesR fileEmulator

Activity R file Android API

level 8

Resource file

Manifest File

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.

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

/* 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; } }

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

Creating a person example

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.

Note: Interface is designed here

Android Provides several UI components including

TextViews EditText TextArea RadioButton CheckBox List Buttons Tabs Menus EtcWe look on each UI component individually

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.

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

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

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

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

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

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

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.

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.

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

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

</RadioGroup>

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 RadioRadioButton tComment =

(RadioButton)findViewById(R.id.rdEmail);

QuickviewA 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 inputYou can customize the toast layout

to include images

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.

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

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

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 Buttonspublic void onRadioButtonClicked(View v) { // Perform action on clicks RadioButton rb = (RadioButton) v; Toast.makeText(Hello.this, rb.getText(),

Toast.LENGTH_SHORT).show(); }

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.

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

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

ListView is a ViewGroup that creates a list of scrollable items.

The list items are automatically inserted to the list using a ListAdapter.

Open the Counties.java and make the class extend ListActivity (instead of Activity):

public class Counties extends ListActivity {

}

@Overridepublic void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState);

setListAdapter(new ArrayAdapter<String>(this, R.layout.login, COUNTIES));

ListView lv = getListView(); lv.setTextFilterEnabled(true);}

//Include this string array after the onCreate method

static final String[] COUNTIES = new String[]

{ “Nairobi", “Kakamega", “Kisii",

“Nakuru", “Laikipia",“Bungoma", “Eldoret", “Kwale“

};

Notice that this does not load a layout file for the Activity . which you usually do

with setContentView(int)). Instead, setListAdapter(ListAdapter) au

tomatically 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. 

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.

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.

Open strings.xml – located in res/values/strinng.xml

Add this line

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

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.

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

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

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