Chapter 2: Simplify! The Android User Interfaceweb.cerritos.edu/pnguyen/SitePages/cis288/lecturenotes/ch02.pdf · Designing an Android App • Designing apps is like constructing

Chapter 2: Simplify! The Android User Interface

Objectives In this chapter, you learn to: • Develop a user interface using the TextView,

ImageView, and Button controls • Create an Android project that includes a Button

event • Select a Linear of Relative layout for the user

interface • Create multiple Android Activities • Add activities to the Android Manifest file • Add a Java class file

2 Android Boot Camp for Developers using Java

Objectives (continued)

• Write code using the onCreate method • Display content using the setContentView

command • Open a second screen using a Button event

handler • Use an OnClickListener to detect user interaction • Launch a second screen using a startActivity

method • Correct errors in Java code • Run the completed app in the emulator


Designing an Android App

• Designing apps is like constructing a building • The Big Picture

– Follow these steps: • Create the user interface for every screen • Create an Activity for every screen • Update the Android Manifest file • Code each Java class with objects and actions


Using the Android User Interface – The interface is a window on the screen of any

mobile device – The layout is designed with XML code

• Special Android-formatted XML code is extremely compact

• Linear Layouts and Relative Layouts – A 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 orientation • Linear layout is the default layout


Using the Android User Interface (cont’d)


Figure 2-5 Linear layout with a vertical orientation (default)


– A Relative Layout organizes layout components in relation to each other

• Provides more flexibility in positioning than Linear layouts

• Must be changed from the linear default




Figure 2-6 Linear layout with a horizontal orientation


• Android Text Properties – Text Property – changes the text written in the

control – Text Size Property- can be adjusted in inches,

millimeters, pixels, density-independent pixels, and scaled-independent pixels


Table 2-1 Measurements used for the Text size property



Figure 2-10 Updated text Property


• Adding a File to the Resources Folder – Before you can use images, they must be placed in

the resources folder – Res folder contains three subfolders

• All folder names begin with drawable – hdpi (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)



• Adding an ImageView Control – An ImageView control displays icons or graphics on

the Android screen • Adding a Button Control

• There 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)



• Planning a Program – Gather and analyze program requirements – Design the user interface – Design the program processing objects – Code the program – Test the program


Creating Activities • Each screen is considered an activity

– Constructed using XML layout files and a Java class • Creating an XML Layout file

– All layout files are placed in the res/layout directory • Adding 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)


Figure 2-17 Creating the Recipe class

The Android Manifest File – The Android Manifest file contains:

• the name of the Java application • a listing of each activity • permissions 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)


Figure 2-22 Adding the Recipe Activity

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


Figure 2-24 Main.java code



Figure 2-25 onCreate methods

Figure 2-26 Inserting the onCreate method


• Creating a Button Event Handler – An event handler is part of a program coded to

respond to a specific event – Tapping the button is called a click event – Java code must contain the following sections

• Class property to hold a reference to the Button object • onClickListener() method to await the button click

action • onClick() method to respond to the click event

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



– When you import the Button type as an Android widget, the button package becomes available throughout the app

– An import statement makes more Java functions available to your app

– A stub is a code placeholder module b.setOnClickListener(new OnClickListener() {

public void onClick(View v) {

// TODO Auto-generated method stub

}

});



• Coding a Button Event Handler


Figure 2-30 Complete Code


• Correcting Errors in Code


Figure 2-31 Syntax Error


• Saving and Running the Application – Testing the App automatically saves it – The Save All button will save the project – Select Android Application from the dialog window

the first time an app runs


Summary

• Linear layouts arrange screen components in a vertical column or horizontal row

• Relative layouts arrange components freely on the screen

• Text Property and TextSize property are used when creating text

• To display graphics (pictures and icons), use the ImageView control

• An 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 Activity • Every app has an Android Manifest file containing

the name if the app and a list of each activity • When an app has more than one activity, it must

have an intent so the app can navigate among multiple activities

• A method is a set of Java statements included in a Java class

• The onCreate method initializes an Activity


Summary (continued)

• The setContentView command displays the content on the screen

• Tapping or clicking a button invokes the event listener and runs the code in that button

• Use the startActivity() method to start an Activity in an app that has multiple Activities

• The 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 28 Android Boot Camp for Developers using Java

Documents

Chapter 2: Simplify! The Android User Interfaceweb.cerritos.edu/pnguyen/SitePages/cis288/lecturenotes/ch02.pdf · Designing an Android App • Designing apps is like constructing