Lecture 4

Android layout

by
Zana Azeez Kakarash

Email: zana.azeez@kti.edu.krd

2021 – 2022

Kurdistan Technical Institute

(www.kti.edu.krd/ku)
CS Department
 Android Layout

Four
 Layout

• Layout is the architecture for the user interface in an Activity.

• Holds all the elements that appear to the user.

• You can declare your layout in two ways:

1. Declare UI elements in XML : Android provides a straightforward XML vocabulary that corresponds to

the View classes and subclasses, such as those for view and layouts.

2. Instantiate layout elements at runtime : Your application can create View and ViewGroup objects

(and manipulate their properties) programmatically(Java code).

Kurdistan Technical Institute 3 Lecturer : Zana Azeez Kakarash

 Declaring Layout

• The most common way to define your layout and express the view is with an XML layout file.

• View objects are leaves in the tree, ViewGroup objects are branches in the tree.

Kurdistan Technical Institute 4 Lecturer : Zana Azeez Kakarash

 Android Layout Types

Kurdistan Technical Institute 5 Lecturer : Zana Azeez Kakarash

Linear Layout

6
 Linear Layout
• In the Linear layout all the elements are displayed in linear.

• all the elements of a linear layout are displayed according to its orientation.

• Android Linear Layout is a view group that aligns all children in either Vertically or Horizontally

Kurdistan Technical Institute 7 Lecturer : Zana Azeez Kakarash

 Example

Kurdistan Technical Institute 8 Lecturer : Zana Azeez Kakarash

Linear Attributes

9
 Linear Layout Attributes

• Following are the important attributes specific to Linear Layout

Kurdistan Technical Institute 10 Lecturer : Zana Azeez Kakarash

 1) Orientation

<LinearLayout

android:layout_width=“match_parent"
android:layout_height="wrap_content"
android:orientation="vertical“ > <!-- Vertical Orientation set -->
</LinearLayout>

<LinearLayout

android:layout_width=“match_parent"
android:layout_height="wrap_content"
android:orientation=“horizontal“ > <!-- Horizontal Orientation set -->
</LinearLayout>

Kurdistan Technical Institute 11 Lecturer : Zana Azeez Kakarash

 Example

• Following will be the content of res/layout/activity_main.xml file :

Kurdistan Technical Institute 12 Lecturer : Zana Azeez Kakarash

 Output

Kurdistan Technical Institute 13 Lecturer : Zana Azeez Kakarash

 2) Width, Height of View

• wrap_content: which means that the view wants to be just big enough to enclose its content.

• match_parent: the view automatically fills to fit its parents’ size

Kurdistan Technical Institute 14 Lecturer : Zana Azeez Kakarash

 3) Padding, Margin

• Padding is the space inside the border, between the border and the actual view’s content

• Margins are the spaces outside the border, between the border and the other elements next to this

view.

Kurdistan Technical Institute 15 Lecturer : Zana Azeez Kakarash

 4) Gravity , Layout_gravity

• android:gravity: is the Inside gravity of the View.

• android:layout_gravity: is the Outside gravity of the View

Kurdistan Technical Institute 16 Lecturer : Zana Azeez Kakarash

 5) Layout weight

• layout_weight specifies how much of the extra space in the layout to be allocated to the View.

Kurdistan Technical Institute 17 Lecturer : Zana Azeez Kakarash

 Important Note
• All of the layout managers can be nested. This means that you can put a Relative Layout or Frame
Layout as a child to Linear Layout.

Kurdistan Technical Institute 18 Lecturer : Zana Azeez Kakarash

 Homework

Project name

Nested layout

Nested layout

Kurdistan Technical Institute 19 Lecturer : Zana Azeez Kakarash

Relative Layout

20
 Relative Layout

• Android Relative Layout enables you to specify how child views are positioned relative to each other.
• It means that child controls, such as ImageView, TextView ,and Button controls, can be placed above,
below, to the left or right, of one another

Kurdistan Technical Institute 21 Lecturer : Zana Azeez Kakarash

Create Relative Layout

22
 1- Define a Relative Layout

1) First, define a relative layout in your XML resource file.

2) Set its height and width attributes to match_parent.

• Your XML resource file should now look something like this:

Kurdistan Technical Institute 23 Lecturer : Zana Azeez Kakarash

 2- Determine Child Controls

1) Next, we determine what child controls we need.

2) In this case, we need seven TextView controls (one for each color).

Kurdistan Technical Institute 24 Lecturer : Zana Azeez Kakarash

 3- Define attributes
1) Red TextView
<TextView
android:text="RED"
android:id="@+id/TextView01"
android:layout_height="wrap_content"
android:background="#f00"
android:gravity="center"
android:textColor="#000"
android:layout_width="wrap_content"
android:padding="25dp"></TextView>
Kurdistan Technical Institute
2) Orange TextView
TextView
android:text="ORANGE"
android:layout_height="wrap_content"
android:background="#ffa500"
android:gravity="center"
android:textColor="#000"
android:id="@+id/TextView02"
android:layout_width="wrap_content"
android:layout_centerHorizontal="true"
android:padding="25dp"></TextView>
25 Lecturer : Zana Azeez Kakarash
 3- Define attributes
3) TextView
<TextView
android:text="YELLOW"
android:layout_height="wrap_content"
android:background="#ffff00"
android:gravity="center"
android:textColor="#000"
android:id="@+id/TextView03"
android:layout_width="wrap_content"
android:layout_alignParentRight="true"
android:padding="25dp"></TextView>
Kurdistan Technical Institute
4) Green TextView
<TextView
android:text="GREEN"
android:layout_height="wrap_content"
android:background="#0f0"
android:gravity="center"
android:textColor="#000"
android:id="@+id/TextView04"
android:layout_width="wrap_content"
android:layout_toLeftOf="@+id/TextView05"
android:padding="25dp"
android:layout_centerVertical="true"></TextView>
26 Lecturer : Zana Azeez Kakarash
 3- Define attributes
5) Blue TextView
<TextView
android:text="BLUE"
android:layout_height="wrap_content"
android:background="#00f"
android:gravity="center"
android:textColor="#fff"
android:id="@+id/TextView05"
android:layout_width="wrap_content"
android:layout_centerInParent="true"
android:layout_margin="10dp"
android:padding="25dp"></TextView>
Kurdistan Technical Institute
6) Purple TextView
<TextView
android:text="INDIGO"
android:layout_height="wrap_content"
android:gravity="center"
android:textColor="#fff"
android:id="@+id/TextView06"
android:layout_width="wrap_content"
android:layout_toRightOf="@+id/TextView05"
android:background="#4b0082"
android:padding="25dp"
android:layout_centerVertical="true"></TextView>
27 Lecturer : Zana Azeez Kakarash
Relative Layout attributes

28
 1) Center relative to Parent View

1. android:layout_centerHorizontal="true"
This places the view horizontally in the center of the parent.

2. android:layout_centerVertical="true“
This places the view vertically in the center of the parent.

3. android:layout_centerInParent="true“
This attribute will place the view in the center of the parent.

Kurdistan Technical Institute 29 Lecturer : Zana Azeez Kakarash

 2) Align by the parent view

1. android:layout_alignParentTop="true“
If you write this attribute for a View, then that view will stick to the top of its parent.

2. android:layout_alignParentBottom="true“
If you write this attribute for a View, then that view will stick to the bottom of its parent.

3. android:layout_alignParentLeft="true“
If you write this attribute for a View, then that view will stick to the left of its parent.

4. android:layout_alignParentRight="true“
If you write this attribute for a View, then that view will stick to the right of its parent.

Kurdistan Technical Institute 30 Lecturer : Zana Azeez Kakarash

 Example

Kurdistan Technical Institute 31 Lecturer : Zana Azeez Kakarash

 3) Place new View relative to existing View

Kurdistan Technical Institute 32 Lecturer : Zana Azeez Kakarash

 Example

Kurdistan Technical Institute 33 Lecturer : Zana Azeez Kakarash

 4) Align new View relative to existing View

Kurdistan Technical Institute 34 Lecturer : Zana Azeez Kakarash

 Example

Kurdistan Technical Institute 35 Lecturer : Zana Azeez Kakarash

 Exercise

Kurdistan Technical Institute 36 Lecturer : Zana Azeez Kakarash

Example on Relative Layout

37
 Example

Kurdistan Technical Institute 38 Lecturer : Zana Azeez Kakarash

 Output

Kurdistan Technical Institute 39 Lecturer : Zana Azeez Kakarash

 Homework

Kurdistan Technical Institute 40 Lecturer : Zana Azeez Kakarash

Thanks!
Any questions ?
You can find me at
◉ zana.azeez@kti.edu.krd
◉ zana.azeez.k@gmail.com

41