Kurdistan Region Government

Ministry of Higher Education and

Scientific Research
Polytechnic University of Sulaimani
Computer Science
Network Department

Table Layout
Prepared By:
Aeub Omer Zhyar Ghazy Omer

Emran Yasen Xanda Omed

Bandna Omed
……………………..
Supervised By:

T.Rebwar Khalid

2021-2022
• Overview ……………………………………………………………………….1
• Introduction……………………………………………………………………1
• Android Layout Description…………………………………………..1
• Linear Layout…………………………………………………………………7
• Linear layout in android………………………………………………7
• Layout Weight property………………………………………………13
• Relative Layout…………………………………………………………..14
• Reference ………………………………………………………………….19
Overview

Layout are elements and panels that control the arrangements size dimensions
of view that we are created.one benefit to use layout is that you can organized
elements inside the layout.This means that the overall layout automatically
resides or auto-sizes according to the window size. This benefits of use layout,
such as you build a user interface (UI) of any application using layout.

Introduction

In this lecture well we describe how to works multiple layouts in android. First
we will describe android Layout description.what is layout.After that we will
describes Relative layout and Linear Layout.And also describe scenario which
option is better to create Layouts. After Reading this lecture you will
understand Relative and Linear Layout and I hope you will create layout of your
activity and application.

Android Layout Description

Layout represented the visual structure of any application.Using layout you can
design any activity and application.Android provides facility to design
application according to your choice using layout.if you design any app then you
need to know android layouts. Layout is also called view group.All the Buttons
text field, text view…etc are used inside the layout.Layouts contained inside the
res folder.Android activities are used layouts to show output on the screen. All
the application design using layout. Most important layouts in android.

• Linear Layout

• Relative Layout

First will discussing about simple interface in android

we are going to learn how to create a simple interface in android studio. we will
create a simple interface similar to this one. for more detail about simple
interface

This layout contains two interface first one is a edit text second is button third
task that we perform is the view of component are horizontal lines .Edit text on
the left side and button on the right side and also include a hint message which
will automatically disappears when user enter a message.

Now you will create a new project in android studio.Every project contain two
file first is java class file and second is layout XML file.Your first step is open a
layout XML file and change relative layout to linear layout.this is a Relative
Layout show in below pic.
Relative layout change into Linear layout show in below pic

After change into linear layout you will remove all the padding component in
linear layout and set the height and width match parent . Match parent means
height and width similar to the parent and also include a property in layout XML
file that is (android orientation horizontal ). this property lines the view
of component…..etc edit text and button. First thing we add a edit text and set
height and width wrap content after complete this you will add hint message
and also include a hint message into string XML file.So you will find out
the value folder expand this value folder and click on string XML file.
Add string resource in string .XML file. Write this code into string XML file.

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

2 <resources>

3
4 <string name="app_name">test1</string>

5 <string name="hello_world">Hello world!</string>

6 <string name="action_settings">Settings</string>

7 <string name="hint_message">Enter a message </string>

8 <string name="button_text">send</string>

10 </resources>

In this example we are going to create a simple UI that includes only (Edit text)
and (Button)with Different attributes And Write the following code in
layout .XML file:

1 <LinearLayout

2 xmlns:android="http://schemas.android.com/apk/res/android"

3 xmlns:tools="http://schemas.android.com/tools"

4 android:layout_width="match_parent"

5 android:layout_height="match_parent"

6 android:orientation="horizontal">

7 <EditText

8 android:layout_width="0dp"

9 android:layout_height="wrap_content"

10 android:id="@+id/message_text"

11 android:hint="@string/hint_message"

12 android:layout_weight="1"

13 />

14

15 <Button

16 android:layout_width="wrap_content"

17 android:layout_height="wrap_content"

18 android:hint="@string/button_text"
19

20

21 />

22

23

24 </LinearLayout>

Now you open the Graphical layout editor to preview the User Interface that you
created.

Linear layout in android

Linear layout is one of the most important fundamental in android that provides
facilities to developer to create there UI. Linear layout is the layout that aligns
all layout in one direction horizontal and vertical. Orientation is available in
linear layout.

1. Horizontal
2. vertical

Note Default orientation is horizontal if you use linear layout and your UI
elements are not show make sure your orientation is vertical,So you will set
orientation vertical.

We are going to learn how to create a simple linear layout. you can used linear
layout and set the view component vertical and horizontal.So we create linear
layout similar to this one that are show in below pis.for more detail about click
on simple linear layout.
This layout contain four view component three edit text and a button these view
component are vertical line and each row contain only one component . In this
lecture I well show you how to create a layout similar to this one that are show
in above pic. So open android studio and create a new project in android
studio.Every project contain two file first is java class file and second is layout
XML file.First of all we will add string resource So,going to value folder and
open String .XML file.
Add string resource in string .XML file .Write this code into string XML file.

1 <resources>

2 <string name="app_name">bmw</string>

3 <string name="hello_world">Hello world!</string>

4 <string name="action_settings">Settings</string>
5 <string name="to">TO</string>

6 <string name="subject">Subject</string>

7 <string name="message">Message</string>

8 <string name="send">Send</string>

9 </resources>

After this Next step going to open a layout.XML file and change Relative layout
into Linear layout .

After this step we will add three edit text and button in layout XML file .And set
the height and width match parent . Match parent means height and width
similar to the parent .For any view we need to specify its height and width. If
not specified, it will cause error. In the below declaration we have made both
width and height attribute . we can use width and height match parents). This
means, we are telling the android system that this layout’s width and height is
same as that of its parent. As use this property size of activity same as compare
to parent activity. and if you will used wrap_content then scenario will change
and width and height is equal to text that are enter we need to include also
a property (android orientation vertical) Because view component are
vertical.In this example we are going to create a simple UI that includes only
(Edit text) and (Button)with Different attributes

And Write the following code in layout .XML file for simple linear layout:
1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

2 xmlns:tools="http://schemas.android.com/tools"

3 android:layout_width="match_parent"

4 android:layout_height="match_parent"

5 android:orientation="vertical"

6 android:paddingLeft="16dp"

7 android:paddingRight="16dp"

8 >

9 <EditText

10 android:layout_width="match_parent"

11 android:layout_height="wrap_content"

12 android:hint="@string/to"

13

14 />

15 <EditText

16 android:layout_width="match_parent"

17 android:layout_height="wrap_content"

18 android:hint="@string/subject"

19 />

20 <EditText

21 android:layout_width="356dp"

22 android:layout_height="0dp"

23 android:hint="@string/message"

24 android:layout_weight="1"

25 android:gravity="top"

26 />

27

28 <Button

29 android:layout_width="120dp"
30 android:layout_height="wrap_content"

31 android:hint="@string/send"

32 android:layout_gravity="right"

33 />

34

35 </LinearLayout>

Layout Weight property

In linear layout we will use property android:layout weight .Assign weight to

each children. for example if you will use two button and one text field then you
will assign same weight to each element.if you will assign weight 1 of first
two elements and last one you will not assign weight .then last text field will
not show only first two property will show in linear layout .that’s why you will
assign equal weight to each elements.

Note if you set all children of linear layout vertically will equal space then you
will set android:height=”0dp” and width also “0dp”for each children then all the
element will set equal space .if you set all children of linear layout horizontally
will equal space then you will set width “1dp” for each elements then all the
element will set equal space.

Now you open the Graphical layout editor to preview the User Interface that you
created.
Relative Layout

Relative Layout is the basic layout available to design layouts in android.that

are used to define child at related position Using Relative Layout you can set
position view to be toLeftOf, toRightOf, below or above its siblings.if you design
very complex layout in android then you will use Relative layout.Because you
can replace a single Relative layout instead of several linear layout.A Relative
Layout on the other hand, allows for a more random arrangement of child
elements.This allows you to have a more flexible design layout approach.

The following figure should give you an understanding Relative Layout

 or

So we will describe relative layout in android.I will explain a example that are
describe Relative layout And I hope you will get idea how can use relative
layout in android. if you design a application and layout is more complex then
you will use relative layout.First of all you will create a new layout . how can
create a new layout detail is provides in steps.

Step1=New Layout->Right click ->on layout folder select option ->New -

>and click ->Layout resource file->then a new window will appear.

Step2=step1->Writename->

Step3=step1=step2->ChangeRootElement->Relative _Layout->Ok

So a Relative _layout will create in below pic.

After create this layout your first set is set height and width match parent of
this layout and add string resource of two buttons and three edit text in string
.XML file.So we open a string resource folder in values folder add string
resource in string .XML file show in below pic.

1 <resources>

2 <string name="app_name">RelativeLayout</string>

3 <string name="hello_world">Hello world!</string>

4 <string name="action_settings">Settings</string>

5 <string name="first_name">First Name</string>

6 <string name="send_message2">send2</string>

7 <string name="send_message">Send1</string>

8 <string name="message">write Message</string>

9 <string name="number">write a number</string>

10 <string name="auto">select names</string>

11

12 </resources>

Here i am going to create two buttons and set height and width match . After
this we create a two Edit text and one autocomplete textview also Include a
hint message to Edit text field. we need to assign id to to each elements.In this
example we are going to create a simple UI that includes only (Edit text) and
(Button)with Different attributes.

1 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

2 xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"

3 android:layout_height="match_parent">

4 <Button

5 android:id="@+id/bn"

6 android:layout_width="wrap_content"

7 android:layout_height="wrap_content"

8 android:text="@string/send_message"

10 <Button

11 android:id="@+id/bnn"

12 android:layout_width="wrap_content"

13 android:layout_height="wrap_content"

14 android:layout_below="@+id/bn"

15 android:text="@string/send_message2"

16 />

17 <EditText

18 android:id="@+id/e1"

19 android:layout_width="match_parent"

20 android:layout_height="wrap_content"

21 android:layout_below="@+id/bnn"

22 android:hint="@string/message"/>

23 <EditText

24 android:id="@+id/e2"

25 android:layout_width="match_parent"

26 android:layout_height="wrap_content"
27 android:layout_below="@+id/e1"

28 android:hint="@string/number"/>

29 <AutoCompleteTextView

30 android:id="@+id/country"

31 android:layout_width="match_parent"

32 android:layout_height="wrap_content"

33 android:layout_below="@+id/e2"

34 android:hint="@string/auto"

35 />

36

37

38 </RelativeLayout>

Now you open the Graphical layout editor to preview the User Interface that you
created.
Compare between Linear and relative layout

Linear layout is one of the most important fundamental in android that

provides facilities to developer to create there UI. Linear layout is the layout
that aligns all layout in one direction horizontal and vertical. Orientation is
available in linear layout. vertical and horizontal. It is used for situation when
children are rendered from left to right and top to bottom.
Relative Layout is the basic layout available to design layouts in android.that
are used to define child at related position Using Relative Layout you can set
position of view to be toLeftOf, toRightOf, below or above its siblings .A Relative
Layout on the other hand, allows for a more random arrangement of child
elements.This allows you to have a more flexible design layout approach.

Thank you for reading this lecture Hope you got the idea.

Reference:

www.google.com

www.wikipedia.com

www.SeminarsTopics.com

www.cisco.com

www.TechTarget.com

www.wlanprofessionals.com