Unit-3.

UI Components and Layouts.

• 01. Menu Bar
– Menu Bar contains the drop-down menus to perform different functions.
• 02. Toolbar
– Toolbar contains graphical view of some commonly usable buttons.
• 03. Navigation Bar
– Navigation Bar shows the selected file hierarchy which helps developer to directly navigate to the parent
directories of the file or switch between different files.
• 04. Tool Buttons Bar
– Tools Buttons bar allows to switch between different tools in different windows (Project Tool, Preview,
Console Windows).
• 05. Project Tool Window
– There three project tool windows in the interface which allows developer to use in different ways.
• Project Tool Window in the left side allows developer to navigate through all the tools provided in the left side Tool
Buttons such as Project hierarchy view, Favourites, Structure view etc..
• Right side Project Tool Window allows to navigate between the right Tool Buttons like Application Interface
Preview on different devices, Gradle functions etc..
• Bottom Project Tool Window allows to navigate between the bottom Tool Buttons like Terminal, Run, Android etc.
• 06. Editor Window
– Editor window open the selected file to allows developer to edit them as per the requirements.
• 07. Status Bar
– The status bar displays informational messages about the project and the activities of Android Studio. It
also contain a button in the far left corner which lists all the tools menu button. Hovering over items or
button in the status bar will provide a description of that field.
Directory Structures…
Manifest File………….
 Java folder…..

• This is the folder in your project where you will be storing all
of the source code files written in Java programming
language.
• A MainActivity.java is automatically created in this folder by
Android Studio. All of your classes will be available here,
and Android Studio will even bundle together the package
path so that you can work with the files without having to
drill down through the folders that make up your package.
Android application components…
 Additional components…
S.No Components & Description

1 Fragments Represents a portion of user interface in an Activity.

2 Views UI elements that are drawn on-screen including buttons, lists forms etc.

3 Layouts View hierarchies that control screen format and appearance of the views.

4 Intents Messages wiring components together.

5 Resources External elements, such as strings, constants and drawable pictures.

6 Manifest Configuration file for the application.

 fundamentals of UI design android
• View and ViewGroups
• An activity is consist of views. A view is just a widget that appears on the
screen. It could be button e.t.c. One or more views can be grouped
together into one GroupView. Example of ViewGroup includes layouts.
• The basic building block for user interface is a View object which is
created from the View class and occupies a rectangular area on the
screen and is responsible for drawing and event handling. View is the
base class for widgets, which are used to create interactive UI
components like buttons, text fields, etc.
• The ViewGroup is a subclass of View and provides invisible container that
hold other Views or other ViewGroups and define their layout properties.
• Fragments: Represents a portion of user
interface in an Activity.

• Activities :
fundamentals of UI design android
 All the interaction of a user with the Android application is through the user interface(UI),
hence it is very important to understand the basics about the User Interface of an android
application.
 ViewGroup
1. A ViewGroup is a special view that can contain other views. In other words, ViewGroup is
generally used to define the layout in which views(widgets) will be set/arranged/listed on
the android screen.
2. ViewGroups acts as an invisible container in which other Views and Layouts are placed.
Yes, a layout can hold another layout in it, or in other words a ViewGroup can have
another ViewGroup in it.
3. The class ViewGroup extends the class View.
4. The ViewGroup is the base class for Layouts in android, like LinearLayout, RelativeLayout,
FrameLayout etc.
 View types…
• TextView
• EditText
• ImageView
• ProgressBar
• Button
• ImageButton
• CheckBox
• DatePicker etc..
 Linear Layout…
• Android LinearLayout is a view group that aligns all
children in either vertically or horizontally.
Sr.No Attribute & Description

1 android:id This is the ID which uniquely identifies the layout.

android:baselineAligned This must be a boolean value, either "true" or "false" and prevents the layout from aligning its
2
children's baselines. (it is not align to bottom)

android:divider This is drawable to use as a vertical divider between buttons. You use a color value, in the form of
4
"#rgb", "#argb", "#rrggbb", or "#aarrggbb".

android:gravity This specifies how an object should position its content, on both the X and Y axes. Possible values are
5
top, bottom, left, right, center, center_vertical, center_horizontal etc.

android:orientation This specifies the direction of arrangement and you will use "horizontal" for a row, "vertical" for a
6
column. The default is horizontal.

7 android:weightSum Sum up of child weight

 Relative Layout…..
• RelativeLayout is a view group that displays child views in relative positions. To its parents.
• By default, it sets all components at the top left of the layout.
• The position of each view can be specified as relative to sibling elements (such as to the left-of or below another view) or in
positions relative to the parent RelativeLayout area (such as aligned to the bottom, left or center).
 RelativeLayout Attributes
Sr.No. Attribute & Description
1 android:id This is the ID which uniquely identifies the layout.
android:gravity This specifies how an object should position its content, on both
2 the X and Y axes. Possible values are top, bottom, left, right, center, center_vertical,
center_horizontal etc.
3 android:ignoreGravity This indicates what view should not be affected by gravity.
 Some of the parameters….
Sr.No. Attribute & Description
android:layout_above Positions the bottom edge of this view above the given anchor view ID and must be
1
a reference to another resource, in the form "@[+][package:]type:name"
android:layout_alignBottom Makes the bottom edge of this view match the bottom edge of the given anchor
2
view ID and must be a reference to another resource, in the form "@[+][package:]type:name".
android:layout_alignLeft Makes the left edge of this view match the left edge of the given anchor view ID
3
and must be a reference to another resource, in the form "@[+][package:]type:name".
android:layout_alignParentBottom If true, makes the bottom edge of this view match the bottom edge of
4
the parent. Must be a boolean value, either "true" or "false".
android:layout_alignParentEnd If true, makes the end edge of this view match the end edge of the parent.
5
Must be a boolean value, either "true" or "false".
android:layout_alignParentLeft If true, makes the left edge of this view match the left edge of the parent.
6
Must be a boolean value, either "true" or "false".
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/re
s/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
<Button
android:paddingLeft="16dp" android:layout_width="wrap_content"
android:paddingRight="16dp" > android:layout_height="wrap_content"
android:text="New Button"
<EditText android:id="@+id/button" />
android:id="@+id/name"
android:layout_width="fill_parent" <Button
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:hint="@string/reminder" />
android:layout_height="wrap_content"
<LinearLayout android:text="New Button"
android:orientation="vertical" android:id="@+id/button2" />
android:layout_width="fill_parent"
android:layout_height="fill_parent" </LinearLayout>
android:layout_alignParentStart="true"
android:layout_below="@+id/name"> </RelativeLayout>
 Absolute layout……
• A layout that lets you specify exact locations (x/y coordinates) of its children. Absolute layouts are
less flexible and harder to maintain than other types of layouts without absolute positioning.
 AbsoluteLayout Attributes
• android:id : This is the ID which uniquely identifies the layout.
• android:layout_x : This specifies the x-coordinate of the view.
• android:layout_y : This specifies the y-coordinate of the view.
 Table Layout….
• Android TableLayout going to be arranged groups of views into rows and columns.
You will use the <TableRow> element to build a row in the table. Each row has
zero or more cells; each cell can hold one View object.
 Frame Layout……
• Frame Layout is one of the simplest layout to organize view
controls.
• They are designed to block an area on the screen.
Frame Layout should be used to hold child view, because it
can be difficult to display single views at a specific area on the
screen without overlapping each other.
• We can add multiple children to a FrameLayout and control
their position by assigning gravity to each child, using the
android:layout_gravity attribute.
 Attributes of Frame Layout:
• 1. android:id: This is the unique id which
identifies the layout in the R.java file.
2. 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”.
This all are different color code
model
For an example if you want 50% transparent
white color you have to use #80FFFFFF color
code
• 3. 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” .

• It is used to set the gravity of foreground. We can also set multiple values
by using “|”. Ex: fill_horizontal|top .Both the fill_horizontal and top gravity
are set to framelayout.
• android:visibility
• This determine whether to make the view visible, invisible or
gone.
• visible – the view is present and also visible
• invisible – The view is present but not visible
• gone – The view is neither present nor visible
E n d o f Un i t-3 … . .T h a n ks .