LAB 2
MOBILE APPLICATION
WHAT YOU WILL LEARN
You will learn:
How to create interactive user interfaces in the Layout Editor, in XML,
and programmatically.
WHAT YOU WILL DO
In this practical, you will:
Create an app and add user interface elements such as buttons in the Layout Editor.
Edit the app's layout in XML.
Add a button to the app. Use a string resource for the label.
Implement a click handler method for the button to display a message on the
screen when the user clicks.
Change the click handler method to change the message shown on the screen.
APP OVERVIEW
"Hello Toast" app will consist of two buttons
and one text view.
When you click on the first button, it will
display a short message, or toast, on the screen.
Clicking on the second button will increase a
click counter; the total count of mouse clicks
will be displayed in the text view.
TASK 1. CREATE A NEW "HELLO TOAST" PROJECT
Start Android Studio and create a new project with the following parameters:
TASK 2: ADD VIEWS TO "HELLO TOAST" IN THE LAYOUT EDITOR
In this task, you will create and configure a user interface for the "Hello Toast" app by
arranging view UI components on the screen.
Why: Every app should start with the user experience, even if the initial
implementation is very basic.
Views used for Hello Toast are:
TextView - A view that displays text.
Button - A button with a label that is usually associated with a click handler.
LinearLayout - A view that acts as a container to arrange other view. This type of
view extends the ViewGroup class and is also called a view group. LinearLayout is a
basic view group that arranges its collection of views in a horizontal or vertical row.
2.2 CHANGE THE VIEW GROUP TO A LINEARLAYOUT
A vertical linear layout is one of the most common layouts. It is simple, fast, and always a good
starting point. Change the view group to a vertical, LinearLayout as follows:
In the Component Tree pane (7 in the previous screenshot), find the top or root view directly below
the Device Screen.
Click the Text tab (8) to switch to the code view of the layout.
In the second line of the code, change the root view group to LinearLayout. The second line of code
now looks something like this:
<LinearLayout xmlns:android=http://schemas.android.com/apk/res/android
From the menu bar, select: Code > Reformat Code…
2.3 ADD VIEWS TO THE LINEAR LAYOUT IN THE LAYOUT EDITOR
In this task you will delete the current TextView (for practice),
and add a new TextView and two buttons to the LinearLayout as shown
in the UI sketch for this task. Refer to the UI diagram above, if necessary.
To change the layout to be vertical, add the following code inside
LinearLayout, below android:layout_height
android:orientation="vertical"
ADD AN ONCLICK PROPERTY TO A BUTTON
A click handler is a method that is invoked when the user clicks on a user interface element. In Android, you can
specify the name of the click handler method for each view in the XML layout file with the
android:onClick
1. Open res/layout/activity_main.xml.
2. Add the following property to the button_toast button.
android:onClick="showToast“
3. Add the following attribute to the button_count button
android:onClick="countUp"
4. Inside of activity_main.xml, place your mouse cursor over each of these method names.
5. Press Alt-Enter (Option-Enter on the Mac), and select Create onClick event handler.
6. Choose the MainActivity and click OK.
ADD IN MAINACTIVITY.JAVA
public void countUp(View view)
{
// What happens when user clicks on the button_count Button goes here. }
public void showToast(View view)
{ // What happens when user clicks on the button_toast Button goes here. }
SHOW A TOAST WHEN THE TOAST BUTTON IS CLICKED
public void showToast(View view)
{ // Create a toast show it.
Toast toast = Toast.makeText(this, R.string.toast_message,
Toast.LENGTH_LONG);
toast.show(); }
INCREASE THE COUNT IN THE TEXT VIEW WHEN THE COUNT
BUTTON IS CLICKED
To display the current count in the text view:
Keep track of the count as it changes.
Send the updated count to the text view to display it on the user
interface.
Class definition and initializing count variable:
in onCreate():
CountUp Method:
CREATE A VIRTUAL DEVICE
Use emulators to test app on different versions of Android and form factors.
Tools > Android > AVD Manager or:
16
CONFIGURE VIRTUAL DEVICE
1. Choose hardware 2. Select Android Version
3. Finalize
17
RUN ON A VIRTUAL DEVICE
18
RUN ON A PHYSICAL DEVICE
1. Turn on Developer Options:
a. Settings > About phone
b. Tap Build number seven times
2. Turn on USB Debugging
a. Settings > Developer Options > USB Debugging
3. Connect phone to computer with cable
Windows/Linux additional setup:
● Using Hardware Devices
Windows drivers:
● OEM USB Drivers
19
GET FEEDBACK AS YOUR APP RUNS
As the app runs, Android Monitor logcat shows information
You can add logging statements to your app that will show up in logcat.
20
LOGGING
import android.util.Log;
// Use class name as tag
private static final String TAG =
MainActivity.class.getSimpleName();
// Show message in Android Monitor, logcat pane
// Log.<log-level>(TAG, "Message");
Log.d(TAG, “Creating the URI…”);
21
ANDROID MONITOR > LOGCAT PANE
1. Log statements in code.
2. logcat pane shows system and logging messages
Set filters to see what's important to you
Search using tags
22
SUMMARY
In this chapter, you:
Added UI elements to an app in the Layout Editor and using XML.
Made the UI interactive with buttons. and click listeners
Add click listeners that update a text view in response to user input.
Displayed information to users using a toast.
LET PLAY CODING CHALLENGE
Create a scoring app for your favorite team sport. Make the
background an image that represents that sport. Create buttons
to count the scores for each team.
