Lab

Programming for Mobile Devices

1
 Lab 1: My First App

Goals
Create basic Android apps using Android Studio.

Understand the basic structure of Android project.

Use XML to create the layout of the Activity.
Get used to using resources in Android apps.

Requirement
Installed full environment to build Android apps on Android Studio

Have some basic knowledge of Android programming.

Guide
1. Step 1: Create Android app from Android Studio.

In the Welcome to Android Studio dialog box, select Start a new Android Studio project to
create a new project.

2
 Figure 1.1: Show how to choose to start Android Studio

Project

Select File → New -> New Project t .

3
Click Next to choose Android version

4
5
 Figure 1.6: The file strings.xml contains the definition of strings

The strings.xml file contains string-related definitions, when programming on Android, it is recommended to
use this file to define strings and in Java programs or the layout will refer to these strings. How to access the

6
declared string in strings.xml is described as shown below

7
2. Step 2: Compile and run the application

Figure 1.8: Application running on emulator

3. Step 3: Modify the app to show message : “ This is the first Android program of me ”.

8
4. Step 4: Config TextView property ( config in file layout xml).

Set properties for TextView in XML layout file

textSize 30dp
textColor #ff5500
textStyle bold
gravity center
shadowColor #e6b121
shadowRadius 1.5
shadowDx first
shadowDy first

The result is the activity as follows (in this demo I changed the text of the TextView to
"Hello Android":

9
In the textColor and shadowColor declarations we use color constants, such direct usage is sometimes
confusing (when looking at the hexadecimal code, we don't know what color it is), we can do it differently
by creating a file. resource defines the palette. In Android it is allowed to do this by declaring the colors.xml
file as shown below: In this file we define two colors as follows:
<? xml version = "1.0" encoding = "utf-8" ?>
<resources> _ _
< color name = "orange" > #ff5500 </ color >
< color name = "gold" > #e6b121 </ color >
</ resources >
When referencing in layout, use the following syntax
Set properties for TextView in XML layout file
textColor @color/orange
shadowColor @color/gold

10
 5. Step 5: add background image in linearlayout
Import a certain wallpaper into the project

Import hình ảnh vào drawable

Declare the background image for LinearLayout as follows

< LinearLayout xmlns: android = "htt p
://schemas.android.com/apk/res/android" xmlns: tools =
"http://schemas.android.com/tools" android :layout_width=
"match_parent" android :layout_height= "match_parent"
android :background= "@drawable/langco" android
:orientation= "vertical" tools :context=
".FirstAppAndroidActivity" >

11
 Figure 1.13: Application interface after adding wallpaper
6. Add TextView to display content on the right and bottom of the layout, as shown after
To display like that, here we use the layout is RelativeLayout, with this layout, the inner
components will be placed in a relative position relative to the parent and the inner view parts.
in.
The code below is the layout description in main.xml

12
Figure 1.14: The layout uses RelativeLayout.

13
 Figure 1.15: Results when using RelativeLayout.
7. Step 7: Illustrating creating a second activity in this application, this second activity has an
interface that allows the user to enter a name in an EditText and then click the button, the
application will output a small pop-up window. sentence Hello.
▪ Step 7.1: Create a new activity named SecondActivity: Select File -> New -> Activity
->Blank Activity or right-click on the project's src folder and select New ->Activity -
>Blank Activity. In the New Android Activity window declare the Activity class (here,

14
this new Activity class by default inherits Layout, Menu from the class Activity

first, so you can change the layout to be RelativeLayout or LinearLayout directly

in the code of the layout class that has been specified. create)

Figure 1.16: Create a new second activity class in the

application The SecondActivity class is generated with the following
source code:

Figure 1.17: SecondActivity's source code

15
➢ In addition, it is possible to create a new layout file like the one created in the image
above containing the interface description of SecondActivity: this layout is a Relative
form including an EditText and a Button contained inside. This layout file is named
second.xml.
How to create the second.xml file as follows: right-click the layout folder, select New
-> XML -> Layout XML File

Khai báo tên layout

Layout dạng Relative

Figure 1.18: Creating the layout XML file for

SecondActivity The initial second.xml file has the following
description

▪ Step 7.2: add EditText and Button to the second layout as described after
< EditText
android:id = "@+id/EditText01" android:hint
= "Enter full name..."
android:layout_alignParentLeft = "true"
android:layout_width = "fill_parent"
android:layout_height = "wrap_content"
android:layout_toLeftOf = "@ +id/Button01"
>
</ EditText >

< Button
android:id = "@+id/Button01"

16
android:text = "Hello!"
android:layout_width =
"wrap_content" android:layout_height
= "wrap_content"

17
 android:layout_alignParentRight =
"true" android:onClick= "showMe" >
</ Button
>
Explanatio
n:
EditText
android:id = "@+id/EditText01" Declare the id of EditText
android:hint = "Enter first name..." Appears when content is empty
android:layout_alignParentLeft = "true" Left align with parent
android:layout_width = "fill_parent" Fill horizontal size
android:layout_height = "wrap_content" Vertical Wrap
android:layout_toLeftOf = The left side of the view has the id
"@+id/Button01" Button01
Button
android:id = "@+id/Button01" Declare the id of Button
android:text = "Hello!" Button's Caption
android:layout_width = "wrap_content" Wrap content
android:layout_height = "wrap_content" Wrap content
android:layout_alignParentRight = "true" Right margin of parent.
android:onClick= "showMe" Declare the event handler function on
click

18
Switch to Graphical layout to see the layout.

Figure 1.19: Graphical layout of activity SecondActivity

19
▪ Step 7.3: define the button's click event handler function in the activity class
(SecondActivity).

▪ Step 7.4: override the onCreate method of SecondActivity, in the onCreate method
load the layout onto your interface activity.

▪ Step 7.5: Configure in AndroidManifest.xml, declare the new activity and set it to
show the second activity 2.

Figure 1.20: Adding SecondActivity description to

androidmanifest.xml Move the intent-filter tag from activity 1 to the
declaration of the second activity.
20
 Figure 1.21: SecondActivity declaration is displayed when the application runs
▪ Step 7.6: compile and run the application use

Figure 1.22: Application interface with SecondActivity.

21
Extend
1. Rewrite the above application without using XML to describe the interface of activities, but
using Java code to implement presently.

2. Create an activity that looks like after:

Figure 1.23: Activity

interface In which the colors are defined as follows:

<resources> _ _
< color name = "red" > #f00 </ color >
< color name = "orange" > #ffa500 </ color >
< color name = "yellow" > #ffff00 </ color >
< color name = "green" > #0f0 </ color >
< color name = "blue" > #00f </ color >
< color name = "indigo" > #4b0082 </ color >
< color name = "violet" > #ee82ee </ color >
< color name = "back" > #000 </ color >
< color name = "white" > #fff </ color >

22
Phát triển ứng dụng trên thiết bị di động Khoa CNTT

</ resources >

3. Write application use single simple give permission user import enter two number and select one in
the permission maths {+,-
*,/} to perform, the program calculates the result and displays it on the screen.

Figure 1.24: Basic calc . application interface

Instructions: using the Spinner widget (similar to the familiar combobox component), this
Spinner has an entries property that takes a list of strings to be selected, this list of strings is
defined as an array of strings: <string-array> in strings.xml.

1
Phát triển ứng dụng trên thiết bị di động Khoa CNTT

BÀI THỰC HÀNH PHÁT TRIỂN ỨNG

DỤNG TRÊN THIẾT BỊ DI ĐỘNG

2
Phát triển ứng dụng trên thiết bị di động Khoa CNTT

Lab 1: Ứng dụng Android đầu tiên

Mục tiêu
Làm quen với cách thức tạo ứng dụng Android cơ bản dùng Android Studio.
Hiểu cấu trúc cơ bản của Android project.
Dùng XML để tạo layout của Activity.
Quen với việc sử dụng các resource trong ứng dụng Android.

Yêu cầu
Đã cài đặt môi trường đầy đủ để xây dựng ứng dụng Android trên Android Studio.
Có một số kiến thức cơ bản về lập trình Android.

Hướng dẫn
8. Bước 1: Tạo ứng dụng Android từ Android Studio.

Trong hộp thoại Welcome to Android Studio, chọn Start a new Android Studio project để tạo
một project mới.

3
Phát triển ứng dụng trên thiết bị di động Khoa CNTT

Hình 1.1: Minh hoạ cách chọn bắt đầu Android Studio Project

Hộp thoại đặt tên ứng dụng và domain xuất hiện.

Ngoài ra, trong Android Studio chọn File → New , chọn tiếp New Project cũng xuất hiện hộp
thoại sau.

4
Phát triển ứng dụng trên thiết bị di động Khoa CNTT

Hình 1.2: Minh họa cách tạo Android Project

Chọn Next để chọn phiên bản Android

Hình 1.3: Minh họa cách chọn phiên bản Android

5
Phát triển ứng dụng trên thiết bị di động Khoa CNTT

Sau khi đã khai báo các thông tin để tạo mới Android Project thì chọn Finish để hoàn tất.

Android Studio sẽ tạo một project Android có cấu trúc như sau:

Hình 1.4: Toàn bộ Android project ban đầu được Android Studio phát sinh

Ứng dụng này chỉ có duy nhất một thành phần gọi là Activity có tên là FirstAppAndroidActivity,
trong ứng dụng Android, activity là thành phần GUI chứa các widget (tương tự như control trong
windows form). Nói một cách tổng quát ứng dụng nếu có tương tác với người dùng thông qua UI
thì phải có activity, trong ứng dụng Android có thể tạo ra nhiều Activity (giống như tạo nhiều form
trong lập trình desktop).

Trong Activity FirstAppAndroidActivity trên thì có phương thức override onCreate phương thức
này dùng để khởi tạo thành phần UI và các xử lý của activity. Trong phương thức này có gọi hàm
setContentView và truyền vào là id của layout được khai báo trong thư mục res/layout

6
Phát triển ứng dụng trên thiết bị di động Khoa CNTT

Hình 1.5: File XML Layout chứa mô tả giao diện của activity

Giải thích file mô tả layout activity_main.xml của activity:

Bao gồm một LinearLayout, đây là dạng ViewGroup cho phép chứa các View bên trong
và được sắp xếp theo hai dạng: “vertical” hay “horizontal”. Trong layout này LinearLayout
được thiết lập theo phương dọc, giá trị match_parent cho biết layout sẽ chiếm hết kích
thước của thành phần bao chứa nó (full kích thước).

Một TextView là một dạng tương tự như Label trong Windows Form, cho phép hiển thị
nội dung thông tin nào đó, TextView này được thiết lập có kích thước ngang là kích thước
của thành phần bao chứa, và kích thước dài là wrap, vừa đủ hiển thị nội dung. Thuộc tính
android:text thiết lập chuỗi cần hiển thị trên TextView, trong phần này khai báo chuỗi là
@string/hello có ý nghĩa là lấy chuỗi tên hello được khai báo trong phần resource là file
strings.xml, khi đó nội dung (giá trị) của chuỗi hello sẽ hiển thị lên trên TextView.

7
Phát triển ứng dụng trên thiết bị di động Khoa CNTT

Hình 1.6: File strings.xml chứa định nghĩa các chuỗi

File strings.xml chứa các định nghĩa liên quan đến chuỗi, khi lập trình trên Android nên sử dụng
file này để định nghĩa các chuỗi và trong chương trình Java hay phần layout sẽ tham chiếu đến các
chuỗi này. Cách truy xuất chuỗi khai báo trong strings.xml được mô tả như hình dưới

Hình 1.7: Mô tả cách thức tham chiếu đến chuỗi trong java code và XML layout.

8
Phát triển ứng dụng trên thiết bị di động Khoa CNTT

9. Bước 2: Biên dịch và chạy ứng dụng đầu tiên ta được kết quả trên emulator như sau:

Hình 1.8: Ứng dụng khi chạy trên emulator

10. Bước 3: Modify lại chương trình để hiển thị thông báo sau: “Đây là chương trình Android
đầu tiên của tôi”.

Hình 1.9: Ứng dụng sau khi modify lại chuỗi

9
Phát triển ứng dụng trên thiết bị di động Khoa CNTT

11. Bước 4: làm quen với các thuộc tính của TextView, thiết lập các thuộc tính cho TextView
theo bảng sau (thiết lập trong file layout xml).

Thiết lập thuộc tính cho TextView trong file layout XML
textSize 30dp
textColor #ff5500
textStyle bold
gravity center
shadowColor #e6b121
shadowRadius 1.5
shadowDx 1
shadowDy 1

Kết quả được activity như sau (trong demo này đã thay đổi text của TextView là “Hello
Android”:

Hình 1.10: Kết quả sau khi thiết lập các thuộc tính của TextView

10
Phát triển ứng dụng trên thiết bị di động Khoa CNTT

Trong phần khai báo màu của textColor và shadowColor ta dùng hằng số màu, việc dùng trực tiếp
như vậy đôi khi khó hiểu (khi nhìn vào mã hexa không biết màu gì), ta có thể làm cách khác dễ
hiểu hơn bằng cách tạo file resource định nghĩa bảng màu. Trong Android cho phép làm điều này
bằng cách khai báo file colors.xml như hình minh hoạ sau:
Trong file này ta định nghĩa hai màu như sau:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="orange">#ff5500</color>
<color name="gold">#e6b121</color>
</resources>
Khi tham chiếu trong layout thì dùng cú pháp sau
Thiết lập thuộc tính cho TextView trong file layout XML
textColor @color/orange
shadowColor @color/gold

Hình 1.11: Màn hình bổ sung file định nghĩa hằng số màu trong resource

11
Phát triển ứng dụng trên thiết bị di động Khoa CNTT

12. Bước 5: thêm hình nền vào trong linearlayout

Import một hình nền nào đó vào project, (cách thức import đã hướng dẫn trong phần lab về
J2ME)

Import hình ảnh vào drawable

Hình 1.12: Import hình làm ảnh nền vào project

Khai báo hình nền cho LinearLayout như sau
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/langco"
android:orientation="vertical"
tools:context=".FirstAppAndroidActivity">
Kết quả được ứng dụng như sau: (đã đổi nội dung của TextView là “Welcome to Lăng Cô
Beach”

12
Phát triển ứng dụng trên thiết bị di động Khoa CNTT

Hình 1.13: Giao diện của ứng dụng sau khi bổ sung hình nền
13. Bổ sung TextView hiển thị nội dung bên phải, dưới của layout, như hình minh hoạ sau
Để hiển thị được như vậy thì ở đây ta dùng dạng layout là RelativeLayout, với kiểu layout này
thì các thành phần bên trong sẽ được đặt ở vị trí tương đối so với cha và các phần view bên
trong.
Code bên dưới là phần mô tả layout trong main.xml

13
Phát triển ứng dụng trên thiết bị di động Khoa CNTT

Hình 1.14: Phần layout sử dụng RelativeLayout.

14
Phát triển ứng dụng trên thiết bị di động Khoa CNTT

Hình 1.15: Kết quả khi dùng RelativeLayout.

14. Bước 7: Minh hoạ tạo activity thứ 2 trong ứng dụng này, activity thứ 2 này có giao diện cho
phép user nhập vào tên trong một EditText và sau đó kích vào button, ứng dụng sẽ xuất ra một
cửa sổ nhỏ pop-up hiện câu chào.
▪ Bước 7.1: Tạo một một activity mới có tên SecondActivity: Chọn File ->New ->
Activity ->Blank Activity hoặc kích chuột phải vào thư mục src của project chọn New
->Activity ->Blank Acivity. Trong cửa sổ New Android Activity khai báo lớp Activity

15
Phát triển ứng dụng trên thiết bị di động Khoa CNTT

( ở đây lớp Activity mới này mặc định thừa kế Layout, Menu từ lớp Activity

trước, vì vậy bạn có thể thay đổi dạng layout là RelativeLayout hay LinearLayout
trực tiếp trong mã lệnh của lớp layout đã được tạo)

Hình 1.16: Tạo mới lớp activity thứ hai trong ứng dụng
Lớp SecondActivity được phát sinh với source code như sau:

Hình 1.17: Source code của SecondActivity

16
Phát triển ứng dụng trên thiết bị di động Khoa CNTT

➢ Ngoài ra có thể tạo file layout mới giống như đã được tạo ở hình trên chứa phần mô tả
giao diện của SecondActivity: layout này là dạng Relative gồm có một EditText và một
Button chứa bên trong. File layout này có tên là second.xml.
Cách tạo file second.xml như sau: kích chuột phải vào thư mục layout, chọn New ->
XML ->Layout XML File

Khai báo tên layout

Layout dạng Relative

Hình 1.18: Tạo file XML layout cho SecondActivity

File second.xml ban đầu có mô tả như sau

▪ Bước 7.2: bổ sung EditText và Button vào second layout như mô tả sau
<EditText
android:id="@+id/EditText01"
android:hint="Nhập họ tên..."
android:layout_alignParentLeft="true"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="@+id/Button01" >
</EditText>

<Button
android:id="@+id/Button01"
android:text="Xin chào!"
android:layout_width="wrap_content"
android:layout_height="wrap_content"

17
Phát triển ứng dụng trên thiết bị di động Khoa CNTT

android:layout_alignParentRight="true"
android:onClick="showMe" >
</Button>
Giải thích:
EditText
android:id="@+id/EditText01" Khai báo id của EditText
android:hint="Nhập họ tên..." Xuất hiện khi nội dung empty
android:layout_alignParentLeft="true" Canh lề trái với parent
android:layout_width="fill_parent" Fill kích thước ngang
android:layout_height="wrap_content" Wrap dọc
android:layout_toLeftOf="@+id/Button01" Canh bên trái view có id là Button01
Button
android:id="@+id/Button01" Khai báo id của Button
android:text="Xin chào!" Caption của Button
android:layout_width="wrap_content" Wrap nội dung
android:layout_height="wrap_content" Wrap nội dung
android:layout_alignParentRight="true" Canh lề bên phải parent.
android:onClick="showMe" Khai báo hàm xử lý sự kiện khi click

Chuyển qua Graphical layout để xem layout.

Hình 1.19: Graphical layout của activity SecondActivity

18
Phát triển ứng dụng trên thiết bị di động Khoa CNTT

▪ Bước 7.3: định nghĩa hàm xử lý sự kiện click của button trong lớp activity
(SecondActivity).

▪ Bước 7.4: override phương thức onCreate của SecondActivity, trong phương thức
onCreate load layout lên giao diện của activity.

▪ Bước 7.5: Cấu hình trong AndroidManifest.xml, khai báo activity mới và thiết lập để
ứng dụng hiển thị activity thứ 2.

Hình 1.20: Bổ sung mô tả SecondActivity vào androidmanifest.xml

Chuyển thẻ intent-filter từ activity 1 xuống phần khai báo của activity thứ 2.

19
Phát triển ứng dụng trên thiết bị di động Khoa CNTT

Hình 1.21: Khai báo SecondActivity được hiển thị khi ứng dụng chạy
▪ Bước 7.6: biên dịch và chạy ứng dụng

Hình 1.22: Giao diện tương tác của ứng dụng với SecondActivity.

20
Phát triển ứng dụng trên thiết bị di động Khoa CNTT

Mở rộng
4. Viết lại ứng dụng trên không dùng XML để mô tả giao diện của các activity mà dùng code
Java để thực hiện.

5. Tạo một activity có giao diện như sau:

Hình 1.23: Giao diện activity

Trong đó các màu được định nghĩa như sau:

<resources>
<color name="red">#f00</color>
<color name="orange">#ffa500</color>
<color name="yellow">#ffff00</color>
<color name="green">#0f0</color>
<color name="blue">#00f</color>
<color name="indigo">#4b0082</color>
<color name="violet">#ee82ee</color>
<color name="back">#000</color>
<color name="white">#fff</color>

21
Phát triển ứng dụng trên thiết bị di động Khoa CNTT

</resources>

6. Viết ứng dụng đơn giản cho phép user nhập vào hai số và chọn một trong các phép
toán {+,-
*,/} để thực hiện, chương trình tính kết quả và hiển thị lên màn hình.

Hình 1.24: Giao diện ứng dụng basic calc

Hướng dẫn: sử dụng widget Spinner (tương tự như thành phần combobox quen
thuộc), Spinner này có thuộc tính entries lấy danh sách chuỗi để làm mục chọn,
danh sách chuỗi này được định nghĩa là mảng chuỗi: <string-array> trong
strings.xml.

22