Scribd
Upload
56 views

03-Android Layout

This document provides an overview of Android views, view groups, and layouts. It discusses the different types of Android layout managers including ConstraintLayout, LinearLayout, TableLayout, FrameLayout, RelativeLayout, and GridLayout. It then provides guides on using TableLayout, LinearLayout, and RelativeLayout. The document also includes a detailed guide on using ConstraintLayout, explaining concepts like constraints, margins, opposing constraints, constraint bias, and chains. It concludes with examples of using ScrollView and ImageView in layouts. Exercises are provided to apply the concepts.

Uploaded by

Hoàng Hải
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
56 views

03-Android Layout

This document provides an overview of Android views, view groups, and layouts. It discusses the different types of Android layout managers including ConstraintLayout, LinearLayout, TableLayout, FrameLayout, RelativeLayout, and GridLayout. It then provides guides on using TableLayout, LinearLayout, and RelativeLayout. The document also includes a detailed guide on using ConstraintLayout, explaining concepts like constraints, margins, opposing constraints, constraint bias, and chains. It concludes with examples of using ScrollView and ImageView in layouts. Exercises are provided to apply the concepts.

Uploaded by

Hoàng Hải
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 36

ANDROID PROGRAMMING

LESSON 3

Version 1.0
Agenda

• Understanding Android Views, View Groups and


Layouts
• A Guide to the Android Studio Layout Editor Tool
• A Guide to the Android ConstraintLayout
• An Android Studio Layout Editor ConstraintLayout
Tutorial
Understanding Android Views, View
Groups and Layouts
• Designing for Different Android Devices
• Views and View Groups
- Every item in a user interface is a subclass of the
android.view.View
- A view can also be comprised of multiple other
views Such views are subclassed from the Android
ViewGroup class (android.view.ViewGroup)
Understanding Android Views, View
Groups and Layouts
• Android Layout Managers
– ConstraintLayout
– LinearLayout
– TableLayout
– FrameLayout
– RelativeLayout
– AbsoluteLayout
– GridLayout
– CoordinatorLayout
TableLayout and TableRow
<TableLayout android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<TableRow>
<TextView
android:text="TableLayout Example"
android:background="#c98282"
android:gravity="center"/>
</TableRow>
<TableRow>
<Button android:text="Button 1" />
<Button android:text="Button 2"/>
</TableRow>
<TableRow>
<Button android:text="Button 3" />
<Button android:text="Button 4" />
<Button android:text="Button example" />
</TableRow>
</TableLayout>
• android:stretchColumns="col1, col2 ...“(* for
all)
• android:shrinkColumns="0,1,.." (* for all)
• <Button android:text=“Single row"
/>
• <Button android:text=“Button 0"
android:layout_column="1“/>
• android:layout_span="3"
Exercise (02)
LinearLayout (03)
<LinearLayout
android:orientation="horizontal"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#a6dfdfdf"
android:layout_margin="10dp"
xmlns:android="http://schemas.android.com/apk/res/android" >
<Button
android:background="#dc9e1a"
android:text="B1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:background="#00c853"
android:text="B1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
android:weightSum

• android:weightSum="4"
• layout_weight=“1”
RelativeLayout (04)
Định vị View con bằng liên hệ giữa chúng
với nhau
<TextView
android:id="@+id/view1"
android:text="view1" android:gravity="center"
android:layout_toLeftOf="@id/view3"
android:layout_alignBottom="@id/view3"
android:layout_width="200dp"
android:layout_height="50dp"
android:background="#e8d33636" />
<TextView
android:id="@+id/view2" android:text="view2"
android:layout_alignRight="@id/view1"
android:layout_above="@id/view1"
android:gravity="center"
android:layout_width="50dp" android:layout_height="200dp"
android:background="#e71faf15" />
<TextView
android:id="@+id/view3"
android:layout_centerInParent="true"
android:layout_alignParentRight="true"
android:layout_marginRight="30dp"
android:text="view3" android:gravity="center"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#d4a00f8f" />
Exercise at class
A Guide to the Android
ConstraintLayout
• ConstraintLayout
– Introduced in Android 7
– use of this layout manager is recommended for
most layout requirements.
A Guide to the Android
ConstraintLayout (05)
• How ConstraintLayout Works
· Constraints
· Margins
· Opposing Constraints
· Constraint Bias
· Chains
· Chain Styles
A Guide to the Android
ConstraintLayout
• Constraints
Constraints are essentially sets of rules that dictate the way in
which a widget is aligned and distanced in relation to other
widgets
• Margins
A margin is a form of constraint that specifies a fixed distance

<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="25dp"
android:layout_marginEnd="25dp"
/>
A Guide to the Android
ConstraintLayout
• Opposing Constraints
Two constraints operating along the same axis
on a single widget are referred to as opposing
constraints
• Attribute
Bias (phần trăm của trọng số)
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView 1"
app:layout_constraintLeft_toRightOf="@+id/textView2"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView 2"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@+id/textView1"
app:layout_constraintTop_toTopOf="parent" />
A Guide to the Android
ConstraintLayout
• Constraint Bias
It has now been established that a widget in a
ConstraintLayout can potentially be subject to
opposing constraint connections
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="onClick"
android:text="Test Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.501"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="1.0" />
Chains trong Constraint layout
• Các Chain (chuỗi) cung cấp hành vi giống như
nhóm theo một trục đơn (theo chiều ngang
hoặc chiều dọc
• Để tạo một chain, ta kết nối các View với nhau
theo cả 2 hướng (bi-directional connection)
• Hai hướng ở đây có nghĩa là đuôi của view 1
neo vào đầu của view 2 và đầu của view 2
cũng cần được neo vào đuôi của view 1. ( nếu
không sẽ không tính là chain)
chainStyle của Chain
<Button
android:id="@+id/label_a"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="A"
android:textSize="22sp"
app:layout_constraintEnd_toStartOf="@+id/label_b"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"/>
<Button
android:id="@+id/label_b"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="B"
android:textSize="22sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@id/label_a"/>
Some Widgets (06)
ScrollView, ImageView

• ScrollView (đứng), HorizontalScrollView


(ngang) ta buộc phải cho tất cả những cái
cần cuộn vào trong một LinearLayout có
hướng orientation là đứng hoặc ngang
• Muốn vừa cuộn ngang lại cuộn đứng được
thì ta phải lồng hai loại với nhau.
<HorizontalScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fillViewport="true" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:orientation=“horizontal" >
<ScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fillViewport="true" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<!– Noi dung →
</LinearLayout>
</ScrollView>
</LinearLayout>
</HorizontalScrollView>
(11)
Exercise submitted
on classroom google
Exercise 1 (06)
An Android Studio Layout Editor
ConstraintLayout Tutorial
Exercise 2

Let’s design !
Giao diện đăng ký, đăng nhập tài khoản
Exercise 3
• End of Lesson 3
Thank you!

You might also like