VIEWS AND LAYOUTS UTY

SCREEN IN ANDROID APP

Java/kotlin file [Activity]

Every single screen

XML file [Layout]

WHAT IS XML (LAYOUT) ?
XML is termed as Extensible Markup Language

Advantages :
o XML is used to transfer the data between
multiple technologies
o XML is used to textual database
o XML is used to deployment descriptor
Rules :
o Every XML have a root element
o Every XML element must be properly
nested
o Shouldn’t start with a number and any
spaces between the tags
 VIEW AND VIEWGROUP
View
Parent class for all UI Elements
Everything you see is a view
Views
ViewGroup
View that contains other View
Base class for Layouts and other Containers
WHAT IS A VIEW?
Views are Android's basic user interface building blocks.
o display text (TextView class), edit text (EditText class)
o buttons (Button class), menus, other controls
o scrollable (ScrollView, RecyclerView)
o show images (ImageView)
o subclass of View class
VIEWS HAVE PROPERTIES
o Have properties (e.g., color, dimensions, positioning)
o May have focus (e.g., selected to receive user input)
o May be interactive (respond to user clicks)
o May be visible or not
o Have relationships to other views
 EXAMPLES OF VIEWS
Button CheckBox

RadioButton
EditText
Switch
SeekBar
VIEWS DEFINED IN LAYOUT EDITOR

Visual representation of what’s in xml

file
CREATING AND LAYING OUT VIEWS
●Graphically within Android Studio

●XML Files

● Programmatically
VIEWS DEFINED IN XML
<TextView
android:id="@+id/show_count"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/myBackgroundColor"
android:text="@string/count_initial_value"
android:textColor="@color/colorPrimary"
android:textSize="@dimen/count_text_size"
android:textStyle="bold"
/>
 CREATE VIEW IN KOTLIN CODE
context
In an Activity:
val text_view: TextView = TextView(this)
text_view.text = "Hi, i am a TextView"
VIEWGROUP VIEWS
A ViewGroup (parent) is a type of view that can contain other views (children)
ViewGroup is the base class for layouts and view containers
o ScrollView—scrollable view that contains one child view
o LinearLayout—arrange views in horizontal/vertical row
o RecyclerView—scrollable "list" of views or view groups
HIERARCHY OF VIEW GROUPS AND VIEWS
Root view is always a view group
ViewGroup

ViewGroup View View

View View View

VIEW HIERARCHY AND SCREEN LAYOUT
VIEW HIERARCHY IN THE COMPONENT TREE
BEST PRACTICES FOR VIEW HIERARCHIES
Arrangement of view hierarchy affects app performance

Use smallest number of simplest views possible

Keep the hierarchy flat—limit nesting of views and view groups

LAYOUT VIEWS
Layouts
Defines the visual structure for user interface
are specific types of view groups
are subclasses of ViewGroup
contain child views
can be in a row, column, grid, table, absolute
LAYOUT FUNDAMENTALS
Search Text Search Text Search Search Text

cancel Search
Search
COMMON LAYOUT CLASSES

LinearLayout RelativeLayout GridLayout TableLayout

LAYOUT CLASSES
ConstraintLayout - connect views with constraints

LinearLayout - horizontal or vertical row

RelativeLayout - child views relative to each other

TableLayout - rows and columns

FrameLayout - shows one child of a stack of children

GridView - 2D scrollable grid

CLASS HIERARCHY VS. LAYOUT HIERARCHY
View class-hierarchy is standard object-oriented class inheritance
 For example, Button is-a TextView is-a View is-a Object

 Superclass-subclass relationship

Layout hierarchy is how Views are visually arranged

 For example, LinearLayout can contain Buttons arranged in a row

 Parent-child relationship
BASIC ATTRIBUTES
Size
Gravity
Margin and Padding
 BASIC ATTRIBUTE - SIZE
Match_parent
Wrap_content
In spesific dp

dp: Density-Independent Pixel Device Density Ratio :

Calculating Pixels : Ldpi = 0.5
Mdpi = 1
Px = dp * density ratio of the device Hdpi =1.5
Xhdpi = 2
 PX VS DP
Input in px Mdpi device xhdpidevice
Density ratio : 1 Density ratio : 2
Width = 100px
Height = 100px
100 px
100 px By
By 100 px
100 px
 PX VS DP
Input in dp Mdpi device xhdpidevice
Density ratio : 1 Density ratio : 2
Width = 100dp Px = 100 *1 Px = 100 *2
Height = 100dp

100 px 200 px
By By
100 px 200 px
ATTRIBUTE - GRAVITY
Layout_gravity

Position of the element with respect to its Layout (parent)

Gravity

Position of the Content within the view

ATTRIBUTE – PADDING/MARGIN
Margin Layout_margin
Parrent

Padding

Content
m
Element
padding