Scribd
Upload
170 views

LAB 2 Hello Toast

This document provides instructions for creating a simple "Hello Toast" mobile application. It describes how to: 1. Add user interface elements like buttons and text views to the app layout using the Layout Editor and XML. 2. Add click handlers to buttons to make the UI interactive and update a text view in response to user input. 3. Display short messages to users using a toast notification when they click buttons. The app will track a click counter and display the total count in a text view when the user clicks one button, and show a toast message when they click another button. Developing this app teaches essential skills for building interactive Android apps with user interfaces.

Uploaded by

Shahira Shahir
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
170 views

LAB 2 Hello Toast

This document provides instructions for creating a simple "Hello Toast" mobile application. It describes how to: 1. Add user interface elements like buttons and text views to the app layout using the Layout Editor and XML. 2. Add click handlers to buttons to make the UI interactive and update a text view in response to user input. 3. Display short messages to users using a toast notification when they click buttons. The app will track a click counter and display the total count in a text view when the user clicks one button, and show a toast message when they click another button. Developing this app teaches essential skills for building interactive Android apps with user interfaces.

Uploaded by

Shahira Shahir
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 24

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.

You might also like