Chapter 2

The Android User Interface

ObjectivesIn this chapter, you learn to:Develop a user interface using the TextView, ImageView, and Button controlsCreate an Android project that includes a Button eventSelect a Linear of Relative layout for the user interfaceCreate multiple Android ActivitiesAdd activities to the Android Manifest fileAdd a Java class file

ObjectivesWrite code using the onCreate methodDisplay content using the setContentView commandOpen a second screen using a Button event handlerUse an OnClickListener to detect user interactionLaunch a second screen using a startActivity methodCorrect errors in Java codeRun the completed app in the emulator

Designing an Android AppDesigning apps is like constructing a building

The Big PictureFollow these steps:

Create the user interface for every screenCreate an Activity for every screenUpdate the Android Manifest fileCode each Java class with objects and actions

Using the Android User Interface The interface is a window on the screen of any mobile deviceThe layout is designed with XML code

Special Android-formatted XML code is extremely compact

Linear Layouts and Relative LayoutsA Linear Layout organizes layout components in a vertical column or horizontal row

Objects are placed directly below each other Can be switched from vertical to horizontal orientationLinear layout is the default layout

Using the Android User Interface (cont’d)

Using the Android User Interface (cont’d)

A Relative Layout organizes layout components in relation to each other

Provides more flexibility in positioning than Linear layoutsMust be changed from the linear default

Using the Android User Interface (cont’d)

Using the Android User Interface (cont’d)

Android Text PropertiesText Property – changes the text written in the controlText Size Property- can be adjusted in inches, millimeters, pixels, density-independent pixels, and scaled-independent pixels

Using the Android User Interface (cont’d)

Using the Android User Interface (cont’d)

Adding a File to the Resources FolderBefore you can use images, they must be placed in the resources folderRes folder contains three subfolders

All folder names begin with drawablehdpi (resources for high-density screens)mdpi (resources for medium-density screens)ldpi (resources for low-density screens)

Android supports three graphic formats.png (preferred), .jpg (acceptable), .gif(discouraged)

Using the Android User Interface (cont’d)

Adding an ImageView ControlAn ImageView control displays icons or graphics on the Android screen

Adding a Button ControlThere are three types of Buttons

Button (buttons that perform a function)ToggleButton (buttons that can be on or off)ImageButton (buttons that have a picture on them)

Using the Android User Interface (cont’d)

Planning a ProgramGather and analyze program requirementsDesign the user interfaceDesign the program processing objectsCode the programTest the program

Creating ActivitiesEach screen is considered an activity

Constructed using XML layout files and a Java classCreating an XML Layout file

All layout files are placed in the res/layout directoryAdding a Class File

A class describes a group of objects and serves as a blueprint, or template, for creating those objects

An object is a specific, concrete instance of a class When you create an object, you instantiate it; meaning you

define one particular variation of the object

Creating Activities (continued)

The Android Manifest FileThe Android Manifest file contains:

the name of the Java applicationa listing of each activitypermissions needed to access other Android functions (like accessing the Internet)the minimum level of the Android APL

Adding an Activity to the Android Manifest When applications have more than one activity, the Manifest must have an intent to navigate among multiple activities

The Android Manifest File (continued)

Coding the Java Activity A method is a set of Java statements that can be included

inside a Java class Methods perform specific tasks

Coding an onCreate Method

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);} Note the use of Curly braces { that begin and end the method

code and the use of the semi-colon ; SetContentView(R.layout.main); is added to display the screen

Coding the Java Activity (continued)

Displaying the User Interface

Coding the Java Activity (continued)

Coding the Java Activity (continued)

Creating a Button Event HandlerAn event handler is part of a program coded to respond to a specific eventTapping the button is called a click eventJava code must contain the following sections

Class property to hold a reference to the Button objectonClickListener() method to await the button click actiononClick() method to respond to the click event

Code Syntax:Button b=(Button)findViewById(R.id.btnRecipe);

Coding the Java Activity (continued)

When you import the Button type as an Android widget, the button package becomes available throughout the appAn import statement makes more Java functions available to your appA stub is a code placeholder module

b.setOnClickListener(new OnClickListener() {public void onClick(View v) {// TODO Auto-generated method stub}});

Coding the Java Activity (continued)

Coding a Button Event Handler

Coding the Java Activity (continued)

Correcting Errors in Code

Coding the Java Activity (continued)

Saving and Running the ApplicationTesting the App automatically saves itThe Save All button will save the projectSelect Android Application from the dialog window the first time an app runs

SummaryLinear layouts arrange screen components in a vertical column or horizontal row Relative layouts arrange components freely on the screenText Property and TextSize property are used when creating text To display graphics (pictures and icons), use the ImageView controlAn Activity is when the app makes contact with the user and is a core component of the app

Summary (continued)Each screen in your app is an ActivityEvery app has an Android Manifest file containing the name if the app and a list of each activityWhen an app has more than one activity, it must have an intent so the app can navigate among multiple activitiesA method is a set of Java statements included in a Java classThe onCreate method initializes an Activity

Summary (continued)The setContentView command displays the content on the screenTapping or clicking a button invokes the event listener and runs the code in that buttonUse the startActivity() method to start an Activity in an app that has multiple ActivitiesThe intent contains a context - initiating Activity class is making the request - and the name of the Activity Red error icons and red curly lines indicate errors