DESIGN FOR THE

REAL WORLD
Prepared By:
Prof D. U. Bavisa
Outline

■ Create Android UI
■ Working with Layout
■ Create Custom Layouts
■ Work with UI Components and Events
■ Material Design Toolbar
■ Tab Layout, Recycler View and Card View
■ Android Menus
Create Android UI [A Hierarchy of
Views]
■ Visually, an Android window is a hierarchy of views, which are objects derived from the View and ViewGroup classes.
1. View is the base class for android.widget subclasses, which instantiate fully-implemented UI objects. For example, Button is a subclass
of View.
2.
ViewGroup is the base class for "layout" subclasses, which implement different kinds of UI layout architecture. (A ViewGroup is a special
form of View that can contain other Views.) For example,
1.
The class LinearLayout, which implements a layout that arranges its children in a single column or a single row.
2.
The class TableLayout, which arranges its children in rows and columns like a table.
3.
The class RelativeLayout, where the positions of the children can be described relative to each other or to the parent.
4.
The class FrameLayout, which blocks out an area on the screen to display a single item. Multiple children may be added to a
FrameLayout and all children will be pegged to the top left of the screen (this, for example, is a way to overlay a set of buttons over
an image).
5.
The class GridView, which displays items in a two-dimensional scrolling grid.

3. All of these layout classes extend ViewGroup or a subclass of ViewGroup.

■ The Layout Editor enables you to quickly build layouts by dragging UI elements into a
visual design editor instead of writing layout XML by hand. The design editor can
preview your layout on different Android devices and versions, and you can
dynamically resize the layout to be sure it works well on different screen sizes.

■ The Layout Editor is especially powerful when building a layout with ConstraintLayout,
a layout manager that's compatible with Android 2.3 (API level 9) and higher.

■ This page provides an overview of the Layout Editor. To learn more about layout
fundamentals, see Layouts.
INTRODUCTION TO THE LAYOUT EDITOR
CHANGE THE PREVIEW APPEARANCE
Create a new layout

■ When adding a new layout for your app, first create a default layout file in your
project's default layout/ directory so that it applies to all device configurations. Once
you have a default layout, you can create layout variations for specific device
configurations, such as for large screens.

■ You can create a new layout in one of the following ways:

Use Android Studio's main menu

■ In the Project window, click the module in which you want to add a layout.
■ In the main menu, select File > New > XML > Layout XML File.
■ In the dialog that appears, provide the file name, the root layout tag, and the source set
in which the layout belongs.
■ Click Finish to create the layout.
Use the Project view

■ Choose the Project view from within the Project window.

■ Right-click the layout directory where you'd like to add the layout.
■ In the context menu that appears, click New > Layout Resource File.
Use the Android view

■ Choose the Android view from within the Project window.

■ Right-click the layout folder.
■ In the context menu that appears, select New > Layout Resource File.
Use the Resource Manager

■ In the Resource Manager, select the Layout tab.

■ Click the + button, and then click Layout Resource File.
Working with
Layout

■ The View elements for a

screen are organized in a
hierarchy. At the root of
this hierarchy is a
ViewGroup that contains
the layout of the entire
screen. The ViewGroup
can contain child View
elements or other
ViewGroup groups as
shown in the following
figure.
 ConstraintLayout: A group of child View elements using constraints, edges, and guidelines to
control how the elements are positioned relative to other elements in the layout.
ConstraintLayout was designed to make it easy to click and drag View elements in the layout
Some ViewGroup editor.

groups are designated LinearLayout: A group of child View elements positioned and aligned horizontally or vertically.
as layouts because
they organize child RelativeLayout: A group of child View elements in which each element is positioned and
View elements in a aligned relative to other elements within the ViewGroup. In other words, the positions of the
child View elements can be described in relation to each other or to the parent ViewGroup.
specific way and are
typically used as the TableLayout: A group of child View elements arranged into rows and columns.

root ViewGroup.
Some examples of FrameLayout: A group of child View elements in a stack. FrameLayout is designed to block out
an area on the screen to display one View. Child View elements are drawn in a stack, with the
layouts are: most recently added child on top. The size of the FrameLayout is the size of its largest child
View element.

GridLayout: A group that places its child View elements in a rectangular grid that can be
scrolled.
■ A simple example of a LinearLayout with child
View elements is shown below as a diagram of
the layout file (activity_main.xml), along with a
hierarchy diagram (top right) and a screenshot of
the actual finished layout (bottom right).
The layout editor

■ u define layouts in the layout editor, or by entering XML code.

■ The layout editor shows a visual representation of XML code. You can drag View
elements into the design or blueprint pane and arrange, resize, and specify attributes for
them. You immediately see the effect of changes you make.

■ To use the layout editor, double-click the XML layout file (activity_main.xml). The
layout editor appears with the Design tab at the bottom highlighted. (If the Text tab is
highlighted and you see XML code, click the Design tab.) For the Empty Activity
template, the layout is as shown in the figure below.
■ XML layout file (activity_main.xml).
■ Design and Text tabs. Click Design to see the layout editor, or Text to see XML code.
■ Palette pane. The Palette pane provides a list of UI elements and layouts. Add an element or layout to the
UI by dragging it into the design pane.
■ Component Tree. The Component Tree pane shows the layout hierarchy. Click a View element or
ViewGroup in this pane to select it. View elements are organized into a tree hierarchy of parents and
children, in which a child inherits the attributes of its parent. In the figure above, the TextView is a child of
the ConstraintLayout.
■ Design and blueprint panes. Drag View elements from the Palette pane to the design or blueprint pane to
position them in the layout. In the figure above, the layout shows only one element: a TextView that
displays "Hello World".
■ Attributes tab. Click Attributes to display the Attributes pane for setting attributes for a View element.
Layout editor toolbars

■ The layout editor toolbars provide buttons to configure your layout and change its
appearance. The top toolbar lets you configure the appearance of the layout preview in
the layout editor:
Layout

■ 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.
Linear Layout

■ Android LinearLayout is
a view group that aligns
all children in
either vertically or horiz
ontally.
Relative Layout

■ Android RelativeLayout
enables you to specify
how child views are
positioned relative to
each other. The position
of each view can be
specified as relative to
sibling elements or
relative to the parent.
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.
Absolute Layout

■ An Absolute Layout 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.
Public Constructors

■ AbsoluteLayout(Context context)
■ AbsoluteLayout(Context context, AttributeSet attrs)
■ AbsoluteLayout(Context context, AttributeSet attrs, int defStyleAttr)
■ AbsoluteLayout(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes)
Frame Layout

■ Frame Layout is designed

to block out an area on the
screen to display a single
item. Generally,
FrameLayout should be
used to hold a single child
view, because it can be
difficult to organize child
views in a way that's
scalable to different screen
sizes without the children
overlapping each other.
MaterialToolbar

■ MaterialToolbar is a Toolbar that implements certain Material features, such as elevation overlays for Dark
Themes and centered titles.

■ Regarding the Dark Theme elevation overlays, it's important to note that the Material AppBarLayout
component also provides elevation overlay support, and operates under the assumption that the child
Toolbar does not have a background. While a MaterialToolbar with a transparent background can be used
within an AppBarLayout, in terms of elevation overlays its main value comes into play with the standalone
Toolbar case, when using the Widget.MaterialComponents.Toolbar.Surface style with elevation.

■ To get started with the MaterialToolbar component, use

com.google.android.material.appbar.MaterialToolbar in your layout XML instead of
androidx.appcompat.widget.Toolbar or Toolbar. E.g.,:
■ <com.google.android.material.appbar.MaterialToolbar
android:layout_width="match_parent“
android:layout_height="wrap_content"/>

■ public MaterialToolbar (Context context,

AttributeSet attrs,
int defStyleAttr)
TabLayout

■ 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.
■ We can also add tab item to TabLayout using TabItem of android design widget.
Recycler View and Card View,

■ RecyclerView is an extended version of ListView and GridView. It works on the ViewHolder

design pattern. With the help of RecyclerView, we can add many extra features to our list of data.
Before starting our example on implementation of CardView in RecyclerView. We should know
what CardView and RecyclerView mean.

■ CardView: CardView is an extended version of Framelayout which can be used to show items
inside the card format. With the help of CardView, we can add radius, elevation to our items of
RecyclerView. CardView gives a rich look and feels to our list of data.
■ RecyclerView: RecyclerView is an extended version of ListView. in RecyclerView we can load a
large amount of data and items of RecyclerView can have a custom design. RecyclerView works
on ViewHolder design pattern so we have to create a Data class that holds data for RecyclerView
and a ViewHolder class which will set data to each item of RecyclerView.
■ RecyclerView is divided into 3 sections:

■ Card Layout.
■ Modal Class.
■ ViewHolder class.
■ Example
■ A sample image is given below to get an idea about
what we are going to do in this article. Note that we
are going to implement this project using the Java
language.
ListView vs RecyclerView

■ 1. ViewHolder
■ The ViewHolder pattern allows us to make our list scrolling act smoothly. It stores list row views
references and, thanks to this, calling the findViewById() method only occurs a couple of times, rather
than for the entire dataset and on each bind view.

■ The RecyclerView’s adapter forces us to use the ViewHolder pattern. The creating part (inflating the
layout and finding views) and updating the views are split into two methods — onCreateViewHolder()
and onBindViewHolder().

■ The ListView, on the other hand, doesn’t give us that kind of protection by default, so without
implementing the ViewHolder pattern inside the getView() method, we’ll end with inefficient scrolling
in our list.
■ 2. LayoutManager
■ The LayoutManager takes responsibility for layouting row views. Thanks to this,
RecyclerView doesn’t have to think about how to position the row view. This class
allows us to choose the way that we want to show the row views and how to scroll the
list. For example, if we want to scroll our list vertically or horizontally, we can choose
LinearLayoutManager. For grids, it is more suitable to choose GridLayoutManager.

■ Previously, with the use of the ListView, we were only able to create a vertical-scrolling
list, so it wasn’t that flexible. If we wanted grids on our list, we had to choose the other
widget for that — GridView.
■ 3. ItemDecoration
■ Duty of the ItemDecoration is simple in theory – add some decorations for the list row
views – but in practice, it’s that simple to implement if we want to create a custom one.
In this case, we should extend the ItemDecoration class and implement our solution. For
example, the RecyclerView list has no dividers between rows by default and it’s
consistent with the Material Design guidelines. However, if we want to add a divider for
some reason, we can use DividerItemDecoration and add it to the RecyclerView.

■ In case we use the ListView, we have to figure out rows decorations by ourselves. There
is no helper class like ItemDecoration for this widget.
■ 4. ItemAnimator
■ The last but not least component of RecyclerView that I want to mention is ItemAnimator. As we can
expect, it’s handling row views animations like list appearance and disappearance, adding or removing
particular views and so on.

■ By default, RecyclerView’s list animations are nice and smooth. Of course, we can change that by
creating our own ItemAnimator, which is also not that easy. To make it easier, we should extend the
SimpleItemAnimator class and implement the methods that we need (just add animations to a
ViewHolder’s views).

■ To be honest, implementing animations on the ListView was a pain in the ass. Again, we had to figure
out how we want to handle them. Nothing nice. I’m glad it’s gone.
■ 5. Notifying adapter
■ We have a couple of cool notifiers on the RecyclerView’s adapter. We are still able to
use notifyDataSetChanged() but there are also ones for particular list elements, like
notifyItemInserted(), notifyItemRemoved() or even notifyItemChanged() and more. We
should use the most appropriate ones for what is happening, so the proper animations
will fire correctly.

■ Using ListView, we were able to use just notifyDataSetChanged() on the adapter and
then had to handle the rest ourselves, again.
Android Menus

■ In android, Menu is an important part of UI component which is used to provide some

common functionality around the application. With the help of menu user can
experience smooth and consistent experience throughout the application.

■ In order to use menu, we should define it in separate XML file and use that file in our
application based on our requirements. Also, we can use menu APIs to represent user
actions and other options in our android application activities.
How to define Menu in XML File?

■ Android Studio provides a standard XML format for type of menus to define menu
items. We can simply define the menu and all its items in XML menu resource instead
of building the menu in the code and also load menu resource as menu object in the
activity or fragment used in our android application.

■ Here, we should create a new folder menu inside of our project directory (res/menu) to
define the menu and also add a new XML file to build the menu with following
elements.

■ Below is the example of defining a menu in XML file (menu_example.xml).

■ <menu> It is the root element which helps in defining Menu in XML file and it also
holds multiple elements.
■ <item> It is used to create a single item in menu. It also contains nested <menu>
element in order to create a submenu.
■ <group> It is an optional and invisible for <item> elements to categorize the menu
items so they can share properties like active state, visibility.
activity_main.xml

■ If we want to add
submenu in menu item,
then we need to add a
<menu> element as the
child of an <item>.

■ Below is the example of

defining a submenu in
menu item.
Android Different Types of Menus

■ In android, we have a three types of Menus available to define a set of options and
actions in our android applications.

■ The Menus in android applications are following –

■ Android Options Menu

■ Android Context Menu
■ Android Popup Menu
■ Android Options Menu – Android Options Menu is a primary collection of menu items in
an android application and useful for actions that have a global impact on the searching
application.

■ Android Context Menu – Android Context Menu is a floating menu only appears when user
click for a long time on an element and useful for elements that effect the selected content
or context frame.

■ Android Popup Menu – Android Popup Menu displays a list of items in a vertical list which
presents to the view that invoked the menu and useful to provide an overflow of actions
that related to specific content.