UNIVERSITATEA TEHNICĂ “GH.

ASACHI” DIN IAŞI

FACULTATEA DE ELECTRONICĂ, TELECOMUNICAŢII ŞI TEHNOLOGIA INFORMAŢIEI

Layouts

2021
 Layouts
Contents
FACULTATEA DE ELECTRONICĂ, TELECOMUNICAŢII ŞI TEHNOLOGIA INFORMAŢIEI

1. Introduction
2. Adding a Layout XML
UNIVERSITATEA TEHNICĂ “GH. ASACHI” DIN IAŞI

3. LinearLayout
4. RelativeLayout
5. ConstraintLayout
6. TableLayout
7. GridLayout
 Layouts
Introduction
➢ The UI consists of a hierarchy of objects called views — every element of the screen is a View.
FACULTATEA DE ELECTRONICĂ, TELECOMUNICAŢII ŞI TEHNOLOGIA INFORMAŢIEI

➢ The View class represents the basic building block for all UI components, and the base class for

classes that provide interactive UI components such as buttons, checkboxes, and text entry fields.

➢ A View has a location, expressed as a pair of left and top coordinates, and two dimensions,
UNIVERSITATEA TEHNICĂ “GH. ASACHI” DIN IAŞI

expressed as a width and a height. The unit for location and dimensions is the density-independent

pixel (dp).

Examples of View subclasses:

- TextView for displaying text

- EditText to enable the user to enter and edit text

- Button and other clickable elements (such as RadioButton, CheckBox, and Spinner)

- ScrollView and RecyclerView to display scrollable items

- ImageView for displaying images

- ConstraintLayout and LinearLayout for containing other views and positioning them.
 Layouts
Introduction
❖The UI in Android is represented by a Layout on which it's possible to add different UI
FACULTATEA DE ELECTRONICĂ, TELECOMUNICAŢII ŞI TEHNOLOGIA INFORMAŢIEI

elements, like Buttons, or even another Layout. A layout describes the appearance of the

screen.
UNIVERSITATEA TEHNICĂ “GH. ASACHI” DIN IAŞI

❖A Layout, and its UI elements, can be defined in an XML file and stored in /res/layout/

folder inside the project, and then accessed in code by R.layout.layoutfile_w/o_extension.

❖The UI can also be dynamically created, by code, but it's recommended to define it in

an XML, in order to separate the UI elements from the application's logic.

❖There are many types of Layouts defined in Android. Examples:

– ConstraintLayout(default when creating an empty Activity)
– RelativeLayout
– LinearLayout
– FrameLayout
– TableLayout
 Layouts
Introduction
❖A Layout is an object of type ViewGroup, while UI elements, like Buttons, EditBoxes,
FACULTATEA DE ELECTRONICĂ, TELECOMUNICAŢII ŞI TEHNOLOGIA INFORMAŢIEI

are objects of type View, so Layout is a hierarchy of objects of type ViewGroup and/or

View, like in below picture:

UNIVERSITATEA TEHNICĂ “GH. ASACHI” DIN IAŞI

ViewGroup

ViewGroup View View

View View
 Layouts
Adding a Layout XML
❖A layout XML can be added to the project in Android Studio by right-click on res/layout
FACULTATEA DE ELECTRONICĂ, TELECOMUNICAŢII ŞI TEHNOLOGIA INFORMAŢIEI

folder and selecting New->Layout resource file. In root element it shall be specified the

layout type.
UNIVERSITATEA TEHNICĂ “GH. ASACHI” DIN IAŞI
 Layouts
ConstraintLayout
FACULTATEA DE ELECTRONICĂ, TELECOMUNICAŢII ŞI TEHNOLOGIA INFORMAŢIEI

➢ A group of child View elements using constraints, edges, and

guidelines to control how the elements are positioned relative to

other elements in the layout. ConstraintLayout was designed to

UNIVERSITATEA TEHNICĂ “GH. ASACHI” DIN IAŞI

make it easy to click and drag View elements in the layout editor.

➢ Constraint Layout is the recommended layout for building Android

Constraint
applications, because it allows to build the interface with Layout

Editor, in a visual manner, instead of editing the XML.

➢ The root element shall be of type

androidx.constraintlayout.widget.ConstraintLayout
 Layouts
ConstraintLayout - Example
➢ ConstraintLayout is the default layout when creating an EmptyActivity project.
FACULTATEA DE ELECTRONICĂ, TELECOMUNICAŢII ŞI TEHNOLOGIA INFORMAŢIEI

<?xml version="1.0" encoding="utf-8"?>

<androidx.constraintlayout.widget.ConstraintLayout
UNIVERSITATEA TEHNICĂ “GH. ASACHI” DIN IAŞI

xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>
 Layouts
LinearLayout
➢ LinearLayout arranges the UI elements one by one in a single column or a single
FACULTATEA DE ELECTRONICĂ, TELECOMUNICAŢII ŞI TEHNOLOGIA INFORMAŢIEI

row, meaning that on Vertical or Horizontal, depending on what orientation is set in

android:orientation attribute. If no orientation is specified, the default orientation is

UNIVERSITATEA TEHNICĂ “GH. ASACHI” DIN IAŞI

Vertical.

➢ This layout has a special attribute – layout_weight, which allows the UI elements

to extend to the maximum available space, considering the weight of the other

elements. The root element shall be of type LinearLayout.

 Layouts
LinearLayout
❖Other attributes:
FACULTATEA DE ELECTRONICĂ, TELECOMUNICAŢII ŞI TEHNOLOGIA INFORMAŢIEI

- android:gravity → indicates the position of the text inside of the View. Example of

values: “Top”, “Bottom”, “Left”, “Right”, “Centered”. The “|” can be used to combine
UNIVERSITATEA TEHNICĂ “GH. ASACHI” DIN IAŞI

more values. Example: “Top|Left”.

- android:layout_width and android:layout_height specify the width and the height of

the View. Example of values:

▪ “wrap_content” - the minimum size, so, for example, the content fits in View

▪ “match_parent” - has the same value as the parent(the layout)

▪ “3dp” - a fixed value of 3 Density-independent Pixels.

 Layouts
LinearLayout – Example 1
❖ Example of a LinearLayout with three elements that don’t have a weight specified:
FACULTATEA DE ELECTRONICĂ, TELECOMUNICAŢII ŞI TEHNOLOGIA INFORMAŢIEI

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout
UNIVERSITATEA TEHNICĂ “GH. ASACHI” DIN IAŞI

xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
Text is oriented
<TextView android:id="@+id/text" to right and
android:layout_width="wrap_content" bottom of
android:layout_height="wrap_content" Button
android:text="This is a TextView" />
<Button android:id="@+id/button"
The The
android:layout_width="match_parent" width is
width is
android:layout_height="wrap_content" fixed the same
android:gravity="right|bottom" as of the
android:text="This is a Button"/> layout

<Button
android:id="@+id/button2"
android:layout_width="163dp"
android:layout_height="wrap_content"
android:text="This is another Button"/>
</LinearLayout>
 Layouts
LinearLayout – Example 2
❖ Example of a LinearLayout with three elements that have a weight specified:
FACULTATEA DE ELECTRONICĂ, TELECOMUNICAŢII ŞI TEHNOLOGIA INFORMAŢIEI

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
UNIVERSITATEA TEHNICĂ “GH. ASACHI” DIN IAŞI

android:layout_height="match_parent">

<TextView android:id="@+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="This is a TextView" />
<Button android:id="@+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="right|bottom"
android:text="This is a Button"
android:layout_weight="1"/>

<Button
android:id="@+id/button2"
android:layout_width="163dp"
android:layout_height="wrap_content"
android:text="This is another Button"
android:layout_weight="2"/>
</LinearLayout>
 Layouts
RelativeLayout
❖Relative Layout allows UI elements(Views) to be positioned relative to each other and
FACULTATEA DE ELECTRONICĂ, TELECOMUNICAŢII ŞI TEHNOLOGIA INFORMAŢIEI

to the parent Layout.

❖Examples of attributes:
UNIVERSITATEA TEHNICĂ “GH. ASACHI” DIN IAŞI

– “layout_below” → This View is below the specified View

– “layout_above” → This View is above the specified View
– “layout_toRightOf” → This view is to the right of the specified View
– “layout_toLeftOf” → This view is to the left of the specified View
– “layout_alignParentTop” → Align this view to the top edge of the parent
– “layout_alignParentBottom” → Align this view to the bottom edge of the parent
– “layout_alignParentLeft” → Align this view to the left edge of the parent
– “layout_alignParentRight” → Align this view to the right edge of the parent
– “layout_centerVertical” →Center this view vertically to the parent
– “layout_centerHorizontal” →Center this view horizontally to the parent
– “layout_centerInParent” → Center this view to the parent
❖ The root element shall be of type RelativeLayout.
 Layouts
RelativeLayout - Example
FACULTATEA DE ELECTRONICĂ, TELECOMUNICAŢII ŞI TEHNOLOGIA INFORMAŢIEI

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

<TextView
UNIVERSITATEA TEHNICĂ “GH. ASACHI” DIN IAŞI

android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Song title 1"
android:layout_centerHorizontal="true"/>
<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Previous"
android:layout_below="@id/textView"/>
<Button
android:id="@+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Next"
android:layout_toRightOf="@id/button3"
android:layout_below="@id/textView"/>
</RelativeLayout>
 Layouts
TableLayout
❖TableLayout arranges the UI elements by rows and columns. A row is represented by a
FACULTATEA DE ELECTRONICĂ, TELECOMUNICAŢII ŞI TEHNOLOGIA INFORMAŢIEI

<TableRow> node, while the columns are represented by the nodes inside of <TableRow>
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent">
UNIVERSITATEA TEHNICĂ “GH. ASACHI” DIN IAŞI

<TableRow>
<TextView
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="A1" />
<TextView
android:id="@+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="B1" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:id="@+id/textView7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="A2" />
<TextView
android:id="@+id/textView8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="B2" />

</TableRow>
</TableLayout>

❖The root element shall be of type TableLayout

 Layouts
GridLayout
❖GridLayout is like a TableLayout. The difference is that in GridLayout the number of
FACULTATEA DE ELECTRONICĂ, TELECOMUNICAŢII ŞI TEHNOLOGIA INFORMAŢIEI

columns and rows in explicitly defined and the content is split based on number give on

rows and columns.

UNIVERSITATEA TEHNICĂ “GH. ASACHI” DIN IAŞI

<?xml version="1.0" encoding="utf-8"?>

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnCount="2"
android:rowCount="2">
<TextView
android:id="@+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="A1" />
<TextView
android:id="@+id/textView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="B1" />
<TextView
android:id="@+id/textView9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="A2" />
<TextView
android:id="@+id/textView10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="B2" />
</GridLayout>

❖The root element shall be of type GridLayout