Scribd
Upload
77 views5 pages

Your Very First Mobile App: Objective

This document provides instructions for creating a simple Android app that allows a user to enter text into an input field and click a button. It describes setting up an Android development environment, creating a new project, designing the app interface with linear layouts and adding an EditText field and button. Later activities modify attributes of the interface and add additional fields below the first set for a graded exercise.

Uploaded by

Criselda Rioflorido
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
77 views5 pages

Your Very First Mobile App: Objective

This document provides instructions for creating a simple Android app that allows a user to enter text into an input field and click a button. It describes setting up an Android development environment, creating a new project, designing the app interface with linear layouts and adding an EditText field and button. Later activities modify attributes of the interface and add additional fields below the first set for a graded exercise.

Uploaded by

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

SH1730

Your Very First Mobile App


Introduction to Mobile Applications Development

Objective:

At the end of the exercise, the students should be able to:

• create a simple Android app using readily available development platforms and environments.

Materials:

▪ 1 PC with pre-installed Microsoft Windows operating system


▪ Android Studio (latest version)
▪ Java Development Kit (JDK 7)

Procedure:

General Instructions:

1. Locate the AndroidStudioProjects folder. It is typically found at C:\Users\UserName. If you


cannot find the folder, ask your instructor or IT facilitator for the folder’s location.
2. Create a folder named LastName_FirstName for your activities (e.g. Reyes_Ranika).

Activity 1: Creating a New Project in Android Studio

1. Launch Android Studio.

01 Laboratory Exercise 2 *Property of STI


Page 1 of 5
SH1730

2. Create a new project by clicking New Project on the Welcome screen.


3. Under Configure your new project, fill in the required fields and click Next. Use the same values
as shown on the image below:

Legend:

• Application name is the app name that appears to users.


• Company Domain provides a qualifier that will be appended to the package name; Android
Studio will remember this qualifier for each new project you create.
• Package name is the fully qualified name for the project (following the same rules as those for
naming packages in the Java programming language). Your package name must be unique
across all packages installed on the Android system. You can edit this value independently
from the application name or the company domain.
• Project location is the directory on your system that holds the project files. Set your folder’s
path as the project location.

4. Under Select the form factors your app will run on, check the box for Phone and Tablet.
5. For Minimum SDK, select API 8: Android 2.2 (Froyo).
6. Leave all of the other options (TV, Wear, and Glass) unchecked and click Next.
7. Under Add an activity to Mobile, select Blank Activity and click Next.
8. Under Customize the Activity, change the Activity Name to MyActivity. The Layout Name
changes to activity_my, and the Title to MyActivity. The Menu Resource Name is menu_my.
9. Click the Finish button to create the project.
Activity 2: Creating an Android Virtual Device (AVD)
1. When using Android Studio to run an app on the emulator, you need to first create an AVD, which
is a device configuration for the Android emulator that allows Android Studio to mimic a specific
device (smartphone, tablet, etc.).
2. Click on Tools – Android – AVD Manager to launch the Android Virtual Device Manager.
3. On the AVD Manager main screen, click Create Virtual Device:

01 Laboratory Exercise 2 *Property of STI


Page 2 of 5
SH1730

4. In the Select Hardware window, select a device configuration (e.g. Nexus 6), then click Next.
5. Select the desired system version for the AVD. Then, click Next.
6. Click Finish.

Activity 3: Running the App


1. After finishing coding or layout work on an app, you may click on Run from Android Studio’s
toolbar.
2. In the Choose Device window, click the Launch emulator radio button.
3. From the Android virtual device pull-down menu, select the emulator you created, and click OK.
4. It can take a few minutes for the emulator to load itself. You may have to unlock the screen. When
you do, your app (My First App) appears on the emulator screen.

Activity 4: Building App User Interface – Linear Layouts


1. From the res/layout directory, open the activity_my.xml file. Note that the BlankActivity template
you chose when you created this project includes the activity_my.xml file with a RelativeLayout
root view and a TextView child view.
2. In the Preview pane, click the Hide icon to close the Preview pane. Note that in Android Studio,
when you open a layout file, you’re first shown the Preview pane. Clicking elements in this pane
opens the WYSIWYG tools in the Design pane.
3. Delete the <TextView> element from the activity_my.xml file.
4. Change the <RelativeLayout> element to <LinearLayout>.
5. Add the android:orientation attribute and set it to "horizontal".
6. Remove the android:padding attributes and the tools:context attribute.

Activity 5: Building App User Interface – Adding a Text Field Control


1. In the activity_my.xml file, within the <LinearLayout> element, define an <EditText> element
with the id attribute set to @+id/edit_message.
2. Define the layout_width and layout_height attributes as wrap_content.
3. Define a hint attribute as a string object named edit_message. The <EditText> element should
read as follows:
res/values/strings.xml

Activity 6: Building App User Interface – Adding String Resources

1. From the res/values directory, open strings.xml.


2. Add a line for a string named "edit_message" with the value, "Enter a message".
3. Add a line for a string named "button_send" with the value, "Send". Take note that you'll create
the button that uses this string in the next section.
4. Remove the line for the "hello_world" string. The result for strings.xml looks like this:
res/values/strings.xml

01 Laboratory Exercise 2 *Property of STI


Page 3 of 5
SH1730

Activity 7: Building App User Interface – Adding Button Controls

1. From the res/layout directory, edit the activity_my.xml file.


2. Within the <LinearLayout> element, define a <Button> element immediately following the
<EditText> element.
3. Set the button's width and height attributes to "wrap_content" so the button is only as big as
necessary to fit the button's text label.
4. Define the button's text label with the android:text attribute; set its value to the button_send string
resource you defined in the previous section. Your <LinearLayout> should look like this:

res/layout/activity_my.xml

This button doesn't need the android:id attribute because it won't be referenced from the activity
code. The layout is designed so that both the EditText and Button widgets are only as big as
necessary to fit their content:

Activity 8: Building App User Interface – Changing Input Box Attributes


1. This activity will allow the input box to fill the length of the device screen. In the activity_my.xml
file, assign the <EditText> element's layout_weight attribute a value of 1.
2. Assign <EditText> element's layout_width attribute a value of 0dp. Your code should look like
this:
res/layout/activity_my.xml

01 Laboratory Exercise 2 *Property of STI


Page 4 of 5
SH1730

To improve the layout efficiency when you specify the weight, you should change the width of the
EditText to zero (0dp). Setting the width to zero improves layout performance because using
"wrap_content" as the width requires the system to calculate a width that is ultimately irrelevant
because the weight value requires another width calculation to fill the remaining space:

3. Run the complete app by clicking Run from the toolbar. Debug if errors occur during runtime.

Graded Exercise:
1. Create a new text field and button located below the existing ones.
2. Do the following steps on the new text field and button:
• Replace LinearLayout with RelativeLayout.
• Set the text fields’ and buttons’ height and weight attributes to “wrap_content”.
• Create id attributes for the buttons.
• Add the necessary layout attributes to correctly position the text fields and buttons.

Example:
android:layout_below="@id/edit_message"
android:layout_toRightOf = “@id/edit_message”

3. Inform your instructor once you are finished with your work.

Scoring Criteria:
• App Interface and Control Layouts – detail (cleanliness, orderliness) of the app layout and its
controls (30 points)
• Error-Free – whether the app runs smoothly or with major errors (errors that break the app’s
operation) or minor errors (20 points)

01 Laboratory Exercise 2 *Property of STI


Page 5 of 5

You might also like