MODULE 11-15

ADROID APPLICATION DESIGN AND APPLICATION OUTPUT

 OBJECTIVE OF THE TOPIC
• Student should evaluate the application UI.
• Student should Identify the application UI interface
• Student should create a real time application and evaluating UI interface
• Student should create a application with interactive data section
 INTRODUCTION
• 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.
• At third level we have different layouts which are subclasses of ViewGroup class and a
typical layout defines the visual structure for an Android user interface and can be
created either at run time using View/ViewGroup objects or you can declare
your layout using simple XML file main_layout.xml which is located in the res/layout
folder of your project.
SIMPLE EXAMPLE OF XML FILE HAVING LINEARLAYOUT:
 ANDROID LAYOUT TYPES
No. Layout & Description

1 Linear Layout

LinearLayout is a view group that aligns all children in a single direction, vertically or horizontally.

2 Relative Layout
RelativeLayout is a view group that displays child views in relative positions.

3 Table Layout
TableLayout is a view that groups views into rows and columns.

4 Absolute Layout
AbsoluteLayout enables you to specify the exact location of its children.

5 Frame Layout
The FrameLayout is a placeholder on screen that you can use to display a single view.

6 List View
ListView is a view group that displays a list of scrollable items.

7 Grid View
GridView is a ViewGroup that displays items in a two-dimensional, scrollable grid.
 LINEAR LAYOUT
is the most basic layout, and it
arranges its elements
sequentially, either
horizontally or vertically. To
arrange controls within a
linear layout, the following
attributes are used.
https://www.youtube.com/watch?v=rmNnCs2X-Ko
 LINEAR LAYOUT
1. android:orientation — Used for arranging the controls in the container in horizontal or
vertical order
2. android:layout_width — Used for defining the width of a control
3. android:layout_height — Used for defining the height of a control
4. android:padding — Used for increasing the whitespace between the boundaries of the
control and its actual content
5. android:layout_weight — Used for shrinking or expanding the size of the control to
consume the extra space relative to the other controls in the container
6. android:gravity — Used for aligning content within a control
7. android:layout_gravity — Used for aligning the control within the container
 RELATIVE LAYOUT
• RelativeLayout is a view group that
displays child views in relative
positions. 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).

https://www.youtube.com/watch?v=d9HdBzCrbe8
 TABLE LAYOUT
• TabLayout is used to implement horizontal tabs. TabLayout is released by Android after the
deprecation of ActionBar.TabListener (API level 21).
• TabLayout is introduced in design support library to implement tabs.
• Tabs are created using newTab() method of TabLayout class. The title and icon of Tabs are set
through setText(int) and setIcon(int) methods of TabListener interface respectively. Tabs of
layout are attached over TabLayout using the method addTab(Tab) method.

VIDEO REFERENCE: https://www.youtube.com/watch?v=2q7R3Pt-NCw

READING REFERENCE: https://www.javatpoint.com/android-tablayout

 ABSOLUTE LAYOUT
• In Android, an Absolute Layout is a layout used to design the custom layouts. In this layout
you can specify the exact location of its children by using x and y coordinates.

• Important Note 1: Absolute layout are harder to maintain for different mobile screen sizes
than other types of layouts because we set the exact location of a child view or called
component. The positioning is based on x(top) and y(left) coordinates and that positioning is
not as useful in world of various screen resolutions(sizes) and aspect ratios.
• Important Note 2: Absolute layout is depreciated in Android because of the same reason as
discussed in above note.

https://www.youtube.com/watch?v=-3yQSzyGp0I
 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.

https://www.youtube.com/watch?v=-6XmpFU-Z1g
 LIST VIEW
• list view is an adapter view that does not know the
details, such as type and contents, of the views it
contains. Instead list view requests views on demand
from a ListAdapter as needed, such as to display new
views as the user scrolls up or down.

• In order to display items in the list, call

setAdapter(android.widget.ListAdapter) to associate
an adapter with the list. For a simple example, see
the discussion of filling an adapter view with text in
the Layouts guide.

https://www.youtube.com/watch?v=E6vE8fqQPTE
 GRID VIEW
• In android GridView is a view
group that display items in two
dimensional scrolling grid (rows
and columns), the grid items are not
necessarily predetermined but they
are automatically inserted to the
layout using a ListAdapter. Users
can then select any grid item by
clicking on it.
https://www.youtube.com/watch?v=cYjX6_TL_EA
 ANDROID UI CONTROLS
There are number of UI controls provided by Android
that allow you to build the graphical user interface for
your app.
 No. UI Control & Description

1 TextView

This control is used to display text to the user.

2 EditText
EditText is a predefined subclass of TextView that includes rich editing capabilities.

3 AutoCompleteTextView
The AutoCompleteTextView is a view that is similar to EditText, except that it shows a list of completion suggestions automatically while the user is typing.

4 Button
A push-button that can be pressed, or clicked, by the user to perform an action.

5 ImageButton
An ImageButton is an AbsoluteLayout which enables you to specify the exact location of its children. This shows a button with an image (instead of text) that can be pressed or clicked by the user.

6 CheckBox
An on/off switch that can be toggled by the user. You should use check box when presenting users with a group of selectable options that are not mutually exclusive.

7 ToggleButton
An on/off button with a light indicator.

8 RadioButton
The RadioButton has two states: either checked or unchecked.

9 RadioGroup
A RadioGroup is used to group together one or more RadioButtons.

10 ProgressBar
 No. UI Control & Description

The ProgressBar view provides visual feedback about some ongoing tasks, such as when you are performing a task in the
background.

11 Spinner
A drop-down list that allows users to select one value from a set.

12 TimePicker
The TimePicker view enables users to select a time of the day, in either 24-hour mode or AM/PM mode.

13 DatePicker
The DatePicker view enables users to select a date of the day.
 VIDEO REFERENCE
• https://www.youtube.com/watch?v=NSM3DbgJ0tw (TEXT VIEW)
• https://www.youtube.com/watch?v=veOZTvAdzJ8 (Edit Text)
• https://www.youtube.com/watch?v=JB3ETK5mh3c (AutoCompleteTextView)
• https://www.youtube.com/watch?v=bgIUdb-7Rqo (Button)
• https://www.youtube.com/watch?v=YaWmNhlOXYk (Image Button)
• https://www.youtube.com/watch?v=tINUao1l65Q (check box)
• https://www.youtube.com/watch?v=n58N9VH3wVc (Toggle Button)
• https://www.youtube.com/watch?v=fwSJ1OkK304 (Radio Button/ Radio Group button)
• https://www.youtube.com/watch?v=lW0OziSuTpY (Progress Bar)
• https://www.youtube.com/watch?v=N4PuIa1P0PM (Spinner)
• https://www.youtube.com/watch?v=QMwaNN_aM3U (Time Picker)
• https://www.youtube.com/watch?v=33BFCdL0Di0 (Date Picker)
 ACTIVITY 1

Look for any existing Android application, then try to imitate the
UI.
 ACTIVITY 2

Create a Login program. The user is required to input the

username and password. If successfully entered the username
and password, proceed to another screen that contains different
controls. If one of the controls is click, then it should be
displayed a message stating its control name.