Bài 3: Thiết kế giao diện android

13/09/2021

THIẾT KẾ
GIAO DIỆN
N G U Y Ễ N

C H Í

H I Ế U

1

N g u y ễ n
C h í
H i ế u

2

2


13/09/2021

N g u y ễ n
C h í
H i ế u

Các khái niệm cơ bản
Một số điều khiển phổ biến

NỘI DUNG

Bố cục giao diện
Quy tắc thiết kế giao diện
2 0 2 1

3

2021

4

3

N g u y ễ n
C h í
H i ế u

CÁC KHÁI NIỆM CƠ BẢN

4


13/09/2021

ĐƠN VỊ ĐO
• inch (Inches), mm (Millimeters)
• Kích thước của màn hình thiết bị.

• pt (Points)
• 1pt=1/72 inch

• px (Pixels): số điểm ảnh.
• Thiết bị có độ phân giải càng cao thì số điểm ảnh nhiều.
• Dùng để đo kích thước ảnh.
N g u y ễ n

C h í

2 0 2 1

H i ế u

5

5

N g u y ễ n
C h í
H i ế u

ĐƠN VỊ ĐO
• dp (Densityi n d e p e n d e n t P i x e ls )
• Đơn vị đo chiều
d à i v ậ t lý ( 1 6 0 d p
= 1 i n ch ) .
• Google thường
dùng đo màn
hình thiết bị.
• Mộ t d p c ó t h ể
chứa 1 hay nhiều

px

N g u y ễ n

6

C h í

H i ế u

2 0 2 1

6


13/09/2021

N g u y ễ n
C h í
H i ế u

ĐƠN VỊ ĐO

• dpi (Dots Per Inch)
• Số điểm trong 1inch (160dp) của màn hình
thiết bị.

N g u y ễ n

C h í

2 0 2 1

H i ế u

7

7

N g u y ễ n
C h í
H i ế u

𝑝𝑥 =

𝑑𝑝 ∗ 𝑑𝑝𝑖
160

• Ví dụ 1. Cho màn hình loại xxhdpi và kích thước 1080 x 1920
px. Cho biết kích thước màn hình theo dp?

ĐƠN VỊ ĐO
N g u y ễ n

8

C h í

H i ế u

2 0 2 1

8


13/09/2021

ĐƠN VỊ ĐO
• sp (Scale-independent
Pixels)
• Mơ tả kích thước font
chữ.

N g u y ễ n

C h í

H i ế u

2 0 2 1

9

2 0 2 1

1 0

9

N g u y ễ n

C h í
H i ế u

CÁC KHÁI NIỆM CƠ
BẢN

N g u y ễ n

10

C h í

H i ế u

• T ấ t c ả g i a o d i ệ n t ro n g
An d r o i d đ ư ợ c x â y d ự n g t ừ
c á c V i e w v à Vi e w G ro u p .


13/09/2021

VIEW/WIDGET
• View là đối tượng được vẽ trên màn hình ứng dụng
và có thể tương tác với người dùng qua các sự kiện:
click, touch, keydown, …
• TextView,
• EditText,
• Button,
• ListView,
•…

N g u y ễ n

C h í

H i ế u

2 0 2 1

1 1

2 0 2 1

1 2

11

VIEW
• Hai cách khai báo view
1. Khai báo tĩnh: viết mã trong *.xml hay kéo thả
trực tiếp.

android:layout_width="match_content"
android:layout_height="wrap_content"
android:text="Hi All!"/>
N g u y ễ n

12

C h í

H i ế u


13/09/2021

VIEW
• Hai cách khai báo view
2. Khai báo động: *.java

TextView textView = new TextView(this);
textView.setLayoutParams(new ViewGroup.LayoutParams(
ViewGroup.LayoutParams.MATCH_PARENT,
ViewGroup.LayoutParams.WRAP_CONTENT));
textView.setText("Hi All!");
layoutMain.addView(textView);
N g u y ễ n

C h í

H i ế u

2 0 2 1

1 3

13

VIEW
• Properties: chiều rộng, chiều dài, màu sắc, …

• Listeners: xử lý các sự kiện (click, touch, keydown, …) khi
người dùng tương tác với view.
• Focus: chọn một view nổi bật hơn các view khác hay có dấu
nháy chuẩn bị nhập dữ liệu.
• Visibility: hiển thị/ẩn view.
N g u y ễ n

14

C h í

H i ế u

2 0 2 1

1 4


13/09/2021

VIEW
• Property
• Là một cặp khóa-giá trị (key-value).
• Trong *.xml, mỗi thuộc tính bắt đầu bởi namespace
android.

android:layout_width="match_content"
android:layout_height="wrap_content“
android:text_size="20sp"
android:text="Hello World!"

N g u y ễ n

C h í

H i ế u

2 0 2 1

1 5

2 0 2 1

1 6

15

VIEWGROUP
• Tập hợp của các View hay ViewGroup khác.
• Được tổ chức theo cây phân cấp.
• ViewGroup: LinearLayout, RelativeLayout, …

N g u y ễ n

16

C h í

H i ế u

13/09/2021

VIEWGROUP
ViewGroup

View

N g u y ễ n

C h í

H i ế u

ViewGroup

View

View

View

View

2 0 2 1

1 7

17

N g u y ễ n

C h í
H i ế u

MỘT SỐ VIEW PHỔ
BIẾN

2021

18

1 8


13/09/2021

MỘT SỐ VIEW PHỔ BIẾN
• View
• TextView
• EditText
• SearchView
• Button
• Switch/ToogleButton
•…
N g u y ễ n

C h í

H i ế u

2 0 2 1

1 9

2 0 2 1

2 0

19

MỘT SỐ VIEW PHỔ BIẾN

N g u y ễ n

20

C h í

H i ế u


13/09/2021

MỘT SỐ VIEW PHỔ BIẾN

N g u y ễ n

C h í

H i ế u

2 0 2 1

2 1

21

TRUY XUẤT VIEW TỪ MÃ NGUỒN
• Bước 1. Trong *.xml, mỗi View phải khai báo

thuộc tính id để có thể truy xuất từ mã nguồn.
• Bước 2. Trong *.java, gọi phương thức

findViewById() để truy xuất view.

N g u y ễ n

22

C h í

H i ế u

2 0 2 1

2 2


13/09/2021

TRUY XUẤT VIEW TỪ MÃ NGUỒN

<!—activity_main.xml-->

LinearLayout

<LinearLayout ...>
android:id="@+id/textMessage"/>
TextView
android:id="@+id/buttonShow"/>
id:textMessage
</LinearLayout>

Button
id:buttonShow

// MainActivity.java
public class MainActivity
extends AppCompatActivity {
@Override
protected void onCreate(…) {

// ...
setContentView(R.layout.activity_main);
}
}
N g u y ễ n

C h í

H i ế u

2 0 2 1

2 3

2 0 2 1

2 4

23

TRUY XUẤT VIEW TỪ MÃ NGUỒN
<!—activity_main.xml-->
<LinearLayout ...>
android:id="@+id/textMessage"/>
android:id="@+id/buttonShow"/>
</LinearLayout>

LinearLayout

TextView

Button

id:textMessage

id:buttonShow

// MainActivity.java
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(…) {

// ...
setContentView(R.layout.activity_main);
TextView textMessage = (TextView) findViewById(
R.id.textMessage);
Button buttonShow = (Button) findViewById(
R.id.buttonShow);
N g u y ễ n

}

24

}

C h í

H i ế u


13/09/2021

TRUY XUẤT VIEW TỪ MÃ NGUỒN
android:id="@+id/textMessage"

android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Hello World!"/>
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
TextView textMessage = (TextView) findViewById(
R.id.textMessage);
textMessage.setText("Hi All!");
}
N g u y ễ n

C h í

H i ế u

2 0 2 1

2 5

25

XỬ LÝ SỰ KIỆN CỦA VIEW
• View cung cấp một tập hợp nhiều interface lồng nhau.
• Các interface này được gọi là event listener (đối tượng
theo dõi sự kiện khi người dùng tương tác với View).
• Event listener chứa một số phương thức sau
• onClick()
• onLongClick()
• onTouch()

• …

N g u y ễ n

26

C h í

H i ế u

2 0 2 1

2 6


13/09/2021

ĐĂNG KÝ EVENT LISTENER ONCLICK()
• Cách 1: Chỉ định trực tiếp sự kiện onClick.
• Trong *.xml, khai báo thuộc tính onClick
android:id="@+id/buttonShow"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Show"
android:onClick="buttonShowClick"/>

• Trong *.java, thêm vào phương thức tương ứng.
public void buttonShowClick(View view) {
}

N g u y ễ n

C h í

H i ế u

2 0 2 1

2 7

2 0 2 1

2 8

27

ĐĂNG KÝ EVENT LISTENER ONCLICK()
• Cách 2: Khai báo và khởi tạo một View.OnClickListener.
private Button buttonShow;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
buttonShow = (Button) findViewById(R.id.buttonShow);
buttonShow.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
}
});
}

N g u y ễ n

28

C h í

H i ế u


13/09/2021

ĐĂNG KÝ EVENT LISTENER ONCLICK()
• Cách 2: Khai báo và khởi tạo một View.OnClickListener.
private Button buttonShow;
private View.OnClickListener mButtonShowListener =
new View.OnClickListener() {
@Override
public void onClick(View view) {
}
};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
buttonShow = (Button) findViewById(R.id.buttonShow);
buttonShow.setOnClickListener(mButtonShowListener);
}
N g u y ễ n

C h í

H i ế u

2 0 2 1

2 9

2 0 2 1

3 0

29

ĐĂNG KÝ EVENT LISTENER ONCLICK()
• Cách 3: Thực thi phương thức callback của onClick()
public class MainActivity extends AppCompatActivity
implements View.OnClickListener {
private Button buttonShow;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
buttonShow = (Button) findViewById(R.id.buttonShow);
buttonShow.setOnClickListener(this);
}
@Override
public void onClick(View view) {
N g u y ễ n

30

}

C h í

H i ế u


13/09/2021

N g u y ễ n

C h í

H i ế u

N g u y ễ n

C h í

H i ế u

32

2021

3 1

31

BỐ CỤC GIAO D IỆN

2021

3 2


13/09/2021

3. BỐ CỤC GIAO DIỆN
• FrameLayout
• LinearLayout
• RelativeLayout
• GridLayout
N g u y ễ n

C h í

H i ế u

2 0 2 1

3 3

2 0 2 1

3 4

33

BỐ CỤC GIAO DIỆN

N g u y ễ n

34

C h í

H i ế u


13/09/2021

N g u y ễ n
C h í
H i ế u

FRAMELAYOUT
• Mặc định, các view thêm vào
được đặt chồng lên nhau
tại vị trí top-left.
• Thường được dùng cho
Fragment.

2 0 2 1

3 5

2 0 2 1

3 6

35

N g u y ễ n
C h í
H i ế u

FRAMELAYOUT
• Thuộc tính layout_gravity dùng
xác định vị trí View con:
• center,
• left,
• right,
• top,
• bottom,
• …
N g u y ễ n

36

C h í

H i ế u


13/09/2021

LINEARLAYOUT
• Bố cục các View con

1

2

3
1

theo cấu trúc ngăn
xếp

2

• Chiều ngang
(horizontal)

3

• Chiều dọc (vertical)
N g u y ễ n

C h í

2 0 2 1

H i ế u

3 7

37

N g u y ễ n
C h í
H i ế u

LINEARLAYOUT

• Một s ố th uộc tín h
L in ear Lay o u t
• orien ta ti o n : h oriz on t a l ,
v er tica l
• l ayout _w id th,
l ayout _he ig h t
• …
• Một s ố th uộc tín h x ác địn h
v ị tr í Vie w con:
• l ayout _gr av i ty
• l ayout _w eig h t

N g u y ễ n

38

C h í

H i ế u

2 0 2 1

3 8

13/09/2021

N g u y ễ n
C h í
H i ế u

RELATIVELAYOUT
• Một V ie w con được x ác địn h theo
m ối liên h ệ v ới các Vie w kh ác h ay
thàn h ph ần ch a của n ó thơn g qua id.
• Một s ố th uộc tín h x ác địn h View
con :
• l ayout _ ab ov e , lay out_b el o w
• l ayout _ al ig n L ef t,
l ayout _ al ig n P a re n tL ef t, …
• …

N g u y ễ n

C h í

H i ế u

2 0 2 1

3 9

2 0 2 1

4 0

39

GRIDLAYOUT
• Một số thuộc tính GirdLayout
0,0

• rowCount, columnCount

• Một số thuộc tính xác định
View con:

1,1

2,1

• layout_row, layout_column
• rowSpan, columnSpan

N g u y ễ n

40

C h í

H i ế u

13/09/2021

2
1

1

0,0

1

2
N g u y ễ n

C h í

2

3

H i ế u

1,0

1,1

1,2

2 0 2 1

4 1

2021

4 2

41

N g u y ễ n
C h í
H i ế u

ĐỊNH NGHĨA STYLE
42


13/09/2021

N g u y ễ n

C h í

H i ế u

2 0 2 1

4 3

2 0 2 1

4 4

43

DRAWABLE\VALUES

N g u y ễ n

44

C h í

H i ế u


13/09/2021

QUY TẮC THIẾT KẾ
GIAO DIỆN

N g u y ễ n

C h í

H i ế u

2 0 2 1

4 5

45

MATERIAL DESIGN (ANDROID)
• Phong cách thiết kế được Google giới thiệu vào

năm 2014.
• Giao diện phẳng, đơn giản.
• Sử dụng màu sắc làm nổi bật giao diện, thường có màu

chính (primary), màu phụ (accent).
• Giữa các view có nhiều khoảng trắng.
• Hiệu ứng chuyển động tự nhiên.
N g u y ễ n

46

C h í

H i ế u

2 0 2 1

4 6


13/09/2021

UI & UX
• Color
• Khai báo trong tập tin

res/values/color.xml
<color name="colorPrimary">
#3F51B5
</color>
<color name="colorPrimaryDark">
#303F9F
</color>
<color name="colorAccent">
#FF4081
</color>
N g u y ễ n

C h í

H i ế u

2 0 2 1

4 7

2021

4 8

47

N g u y ễ n
C h í

UI & UX

H i ế u

48


13/09/2021

UI & UX

• Icon
N g u y ễ n

C h í

H i ế u

2 0 2 1

4 9

2 0 2 1

5 0

49

N g u y ễ n
C h í
H i ế u

UI & UX
• Typography
• Hai font chữ chuẩn của
Android:
• Roboto
• Noto
• Noto được sử dụng để
hiển thị những ngơn ngữ
mà Roboto không hỗ trợ.

N g u y ễ n

50

C h í

H i ế u