MSBTE CAMPUS ACADEMY

Ch3. UI Components and Layouts

Chapter 3 – UI Components and Layouts

Directory Structure
The android directory structure include various files and folders as shown in the figure below.

Fig: Directory Structure

Folders in directory structure
• Manifests Folder
Manifests folder contains AndroidManifest.xml for our creating the android application.
This file contains information about our application such as android version, metadata,and other
application components. It acts as an intermediator between android OS and our application.
• Java folder
Java folder contains all the java and Kotlin source code (.java) files which we create during
the app development. These files are used as a controller for controlled UI (Layout file). It gets the
data from the Layout file and after processing that data output will be shown in the UI layout. It
works on the backend of an Android application.
 Ch3. UI Components and Layouts
• Resources

Resources are the additional files and static content that your code uses, such as bitmaps,
layout definitions, user interface strings, animation instructions, and more.You should always
externalize app resources such as images and strings from your code, so that you can maintain
them independently.

• Drawable
A Drawable folder contains resource type file (something that can be drawn). Drawables
may take a variety of file like Bitmap (PNG, JPEG), Nine Patch, Vector (XML), Shape, Layers,
States, Levels, and Scale.
• Layout
A layout defines the visual structure for a user interface. This folder stores Layout files that
are written in XML language. You can add additional layout objects or widgets as child elements
to gradually build a View hierarchy that defines your layout file.
• Mipmap
Mipmap folder contains the Image Asset file that can be used in Android Studio
application. You can generate the following icon types like Launcher icons, Action bar and tab
icons, and Notification icons.
Files in directory structure
• colors.xml
colors.xml file contains color resources of the Android application. Different color values
are identified by a unique name that can be used in the Android application program.
• strings.xml
The strings.xml file contains string resources of the Android application. The different
string value is identified by a unique name that can be used in the Android application program.
This file also stores string array by using XML language.
• styles.xml
The styles.xml file contains resources of the theme style in the Android application. This
file is written in XML language.
Fundamentals of UI design
Every item in user interface is subclass of Android view class which is present inside the
package (android.view). The android SDK provides set of pre-built views that can be construct
user interface.
View: views are base class for all visual interface elements (controls or widgets). All user interface
UI controls, including layout classes, are derived from view. A view is an object/ widget that draws
something on screen by help of user interact. Examples of widgets are buttons, text boxes, labels
etc.
 Ch3. UI Components and Layouts
View Group: view groups are extensions of view class that can contain multiple child views. In
order to extend the ViewGroup class, create compound controls made up of interconnected child
views. The ViewGroup class is also extended to provide Layout Managers that help us to control
layout within our activities. A viewgroup provides layout in which we an order the appearance and
sequence of views. Examples of viewgroups are FrameLayout, LinearLayout, etc.
Fragments: Fragments, introduced in android 3.0 which uses API level 11, are used to encapsulate
portions of your UI. Thus encapsulation makes Fragments particularly useful when optimizing
your UI layouts for different screen sizes and creating reusable use interface UI elements. Each
fragment includes its own user interface layout and receives the related input events but is tightly
bound to the Activity into which each must be embedded. Fragments are similar to UI view
conrollers in Iphone development.
Activities: Activities, represent a single screen that user interact. Activities are the android
equivalent of forms in traditional windows desktop development. To display a UI, we assign a
view (usually a layout or fragment) to an Activity.
Layouts
The android SDK includes the following layout views that may be used within an android user
interface design-
 linear layout
 absolute layout
 table layout
 relative layout
 frame layout
Linear Layout
 Linear layouts are one of the simplest and common types of layouts used by Android
developers to keep controls within their user interfaces.
 The linear layout organizes the controls either in a vertical or horizontal pattern
 When the layout’s orientation is set to vertical, all child controls within are organized in a
single column and when the layout’s orientation is set to horizontal, all child controls
within in a single row.
 Linear layout’s can be defined within xml layout resources or programmatically in
application’s java code
 Child views can be arranged either vertically or horizontally
 Linear layout has 2 options namely fill_parent and wrap_content.
1. Fill_parent: the component wants to display as big as its parent and fill in the
remaining spaces
2. Wrap_content: the component wants to be displayed as big enough to enclose its
content only.
Attributes of Linear layout
• android:id : This is the ID which uniquely identifies the view
• android:layout_width : This is the width of the layout
 Ch3. UI Components and Layouts
• android:layout_height : This is the height of the layout
• android:layout_margin : This is the extra space outside of the view. For example if you
give android:marginLeft=20dp, then the view will be arranged after 20dp from left
• android:layout_padding : This is similar to android:layout_margin except that it
specifies the extra space inside the view
• android:layout_gravity : This specifies how child Views are positioned
• android:layout_weight : This specifies how much of the extra space in the layout should
be allocated to the view
• android:layout_x : This specifies the x-coordinate of the layout
• android:layout_y : This specifies the y-coordinate of the layout
• android:orientation- This specifies the direction of arrangement and you will use
"horizontal" for a row, "vertical" for a column. The default is horizontal.
• android:weightSum-Sum up of child weight
• android:divider-This is drawable to use as a vertical divider between buttons.
• android:Layout_weight- assigns importance value at each component
Absolute Layout:
 Absolute layout is based on simple idea of placing each control at an absolute position.
 We specify for the exact x and y coordinates on the screen for every control
 So this is recommended for most UI development since absolutely positioning of every
element on the screen makes an inflexible UI that is much more difficult to maintain
 This layout allows child views to be positioned at specific X and Y coordinates within the
containing layout view.
Attributes of Absolute Layout
 android:id: In android id is a attribute used to uniquely identify an Absolute Layout
 android:layout_x: In Absolute Layout layout_x attribute is used to specify the x-
coordinate of the The possible value for this is in dp or px.
 android:layout_y: In AbsoluteLayout layout_y attribute is used to specify the y-
coordinate of the The possible value for this is in dp or px.
Frame layout
 The purpose of Frame layout is to allocate an area of screen
 Frame layout is used for displaying a single view
 If more than child views are added, they will, by default, appear on top of each other,
positioned in the top left hand corner of the layout area.
 Alternate positioning of individual child views can be achieved by setting gravity values
on every child
 FrameLayout is designed to display single item at once.
 Ch3. UI Components and Layouts
Attributes of Frame Layout
 android:id- This is the unique id which identifies the layout in the R.java file
 android:foreground- Foreground defines the drawable to draw over the content and this
may be a color value. Possible color values can be in the form of “#rgb”, “#argb”,
“#rrggbb”, or “#aarrggbb
 android:foregroundGravity
 This defines the gravity to apply to the foreground drawable. Default value of gravity is
fill. We can set values in the form of “top”, ”center_vertical” , ”fill_vertical”,
”center_horizontal”, ”fill_horizontal”, ”center”, ”fill”, ”clip_vertical”, ”clip_horizontal”,
”bottom”, ”left” or ”right”
 android:visibility- This determine whether to make the view visible, invisible or gone.
1. visible – the view is present and also visible
2. invisible – The view is present but not visible
3. gone – The view is neither present nor visible
 android:measureAllChildren -This determines whether to measure all children including
gone state visibility or just those which are in the visible or invisible state of measuring
visibility.
Relative Layout
 This is probably the most powerful and flexible of layout managers, which allows child
views to be positioned relative both to each other and containing layout view through the
specification of alignments and margins on child views.
 The RelativeLayout manager can be of particular use when designing a user interface that
must work on variety of screen size and orientation.
 RealtiveLayout lays out elements based on the relationships with each other, and with the
parent container
 This is possibly the most complicated layout and we require several properties to actually
get the layout we want
Attributes of Relative Layout
 android:layout_alignParentBottom- it places the bottom of the element on the bottom of
the container
 android:layout_alignParentLeft- it places the left of the element on the left of the
container
 android:layout_alignParentRight- it places the right of the element on the right of the
container
 android:layout_alignParentTop- it places the element at the top of container
 android:layout_centerHorizontal- it centers the element horizontally within its parent
container
 android:layout_centerVertical- it centers the element vertically within its parent
container
 android:layout_centerInParent- it centers the element both horizontally and vertically
within its parent container
 android:layout_above- it places the element above the specified element
 android:layout_below- it places the element below the specified element
 Ch3. UI Components and Layouts
 android:layout_toLeftOf- it places the element to the left of the specified element
 android:layout_toRightOf- it places the element to the right of the specified element
 android:layout_aligBaseline- it aligns baseline of the new element in with the baseline of
the specified element
 android:layout_alignBottom- it aligns bottom of the new element in with the bottom of
the specified element
 android:layout_alignLeft- it aligns left of the new element in with the left of the specified
element
 android:layout_alignRight- it aligns right of the new element in with the right of the
specified element
 android:layout_alignTop- it aligns top of the new element in with the top of the specified
element
Table layout
 Arranges child views into a grid format of columns and rows.
 Each row within a table is represented by a TableRow object child, which contains a
view object for each cell
 TableLayout organizes content into rows and columns. The rows are defined in layout
xml code, and the columns are determined automatically by Android which is done by
creating at least one column for each element
 By default, android places each element in the first unused column in the row. We can
however indicate the column an element should occupy using android:layout_column
Attributes of Table Layout
 android:id- id attribute is used to uniquely identify a Table Layout.
 android:stretchColumns- It is used to change the default width of a column which is set
equal to the width of the widest column but we can also stretch the columns to take up
available free space by using this attribute.
 android:shrinkColumns- is used to shrink or reduce the width of the column‘s. We can
specify either a single column or a comma delimited list of column numbers for this
attribute.
 android:collapseColumns- is used to collapse or invisible the column’s of a table layout.
These columns are the part of the table information but are invisible.If the values is 0 then
the first column appears collapsed, i.e it is the part of table but it is invisible.

MSBTE CAMPUS
ACADEMY