Mobile Application Development

Chap-2. Designing the user interface

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. Here in this tutorial, we are going to cover about various Views and ViewGroups and
will try to explain how they can be used to design the User Interface of an android application.

Views
View is the basic building block of UI(User Interface) in android. View refers to
the android.view.View class, which is the super class for all the GUI components
like TextView, ImageView, Button etc.
View class extends Object class and
implements Drawable.Callback, KeyEvent.Callback and AccessibilityEventSource.
View can be considered as a rectangle on the screen that shows some type of content. It can be
an image, a piece of text, a button or anything that an android application can display. The
rectangle here is actually invisible, but every view occupies a rectangle shape.
A View is also known as Widget in Android. Any visual(that we can see on screen) and
interactive(with which user can interact with) is called a Widget.
Every view in XML has the following format:
<ViewName

Attribute1=Value1

Attribute2=Value2

Attribute3=Value3

AttributeN=ValueN

/>

 It always start with an angle bracket, followed by the View name. We will introduce you
to various types of Views very soon.
 Then we write attributes that will define how that view will look on the screen of the
application along with a value for the attribute. Each view has its own attributes which we
will discuss in the next few tutorials which will cover various typs of views.
Most commonly used Android View
Here we have some of the most commonly used android View classes:

 TextView
 EditText
 Button
 ImageView
 ImageButton
 CheckBox
 RadioButton
 ListView
 GridView
 DatePicker
 Spinner, etc.

View Groups

A ViewGroup is an invisible object used to contain other View and ViewGroupobjects in

order to organize and control the layout of a screen. ViewGroup objects are used for
creating a hierarchy of View objects (see below) so that you can create more complex
layouts. That said, the more simple you can keep a layout, the more performant it is.
 1. LinearLayout: - The LinearLayout exists to display items in a stacked order, either
horizontally or vertically. Linear layouts can also be used to assign weights to
child Viewitems so that the items are spaced on the screen in a ratio to each other.

2. RelativeLayout: - This ViewGroup subclass allows you to display items on the screen

relative to each other, providing more flexibility and freedom over how your layout appears
compared to the LinearLayout.

3. FrameLayout: -Designed for displaying a single child View at a time,

the FrameLayout draws items in a stack and provides a simple way to display an item across
various screen sizes.

4. ScrollView: -An extension of the FrameLayout, the ScrollView class handles scrolling its

child objects on the screen.

5. ViewPager: - Used for managing multiple views while only displaying one at a time,
the ViewPager class accepts an Adapter and allows users to swipe left and right in order to see
all available View items.

6. RecyclerView: - The RecyclerView class is a ViewGroup subclass that is related

to the ListViewand GridView classes and that has been made available by Google through
the RecyclerView support library for older versions of Android. The RecyclerView class
requires the use of the view holder design pattern for efficient item recycling and it supports
the use of a LayoutManager, a decorator, and an item animator in order to make this
component incredibly flexible at the cost of simplicity.

7. CoordinatorLayout: - Recently added to the design support library,

the CoordinatorLayout class uses a Behavior object to determine how child View items should
be laid out and moved as the user interacts with your app.

Introducing layouts: - Layout is what defines the look of your app. You can
use the drag and drop GUI objects and properties section of Android Studio to build your
layouts to an extent but although convenient you will soon find out that you will need to
tweak the XML code of your layout quite often to actually make your app look the way you
want it to look. If you remember from previous post where we build the “Hello World” app,
Android actually creates a default layout file for us (activity_main.xml) when we create a
new project. You can find it inside the layout folder of your app structure as shown below.
Remember you can name this file anything you want when creating a new project.
Creating new views: - Use the simple “Hello World” Program.
(Present in Android).

Creating and using Menus: - Menus are a common user interface

component in many types of applications. To provide a familiar and consistent user
experience, you should use the Menu APIs to present user actions and other options in your
activities.

1. Options menu and app bar

The options menu is the primary collection of menu items for an activity. It's where you
should place actions that have a global impact on the app, such as "Search," "Compose
email," and "Settings."

2. Context menu and contextual action mode

A context menu is a floating menu that appears when the user performs a long-click on
an element. It provides actions that affect the selected content or context frame.

The contextual action mode displays action items that affect the selected content in a
bar at the top of the screen and allows the user to select multiple items.

3. Popup menu

A popup menu displays a list of items in a vertical list that's anchored to the view that
invoked the menu. It's good for providing an overflow of actions that relate to specific
content or to provide options for a second part of a command. Actions in a popup menu
should not directly affect the corresponding content—that's what contextual actions are
for. Rather, the popup menu is for extended actions that relate to regions of content in
your activity.

 To define the menu, create an XML file inside your project's res/menu/ directory and
build the menu with the following elements:
<menu>

 Defines a Menu, which is a container for menu items. A <menu> element must be the
root node for the file and can hold one or more <item> and <group> elements.

<item>

 Creates a MenuItem, which represents a single item in a menu. This element may
contain a nested <menu> element in order to create a submenu.

<group>

 An optional, invisible container for <item> elements. It allows you to categorize menu

items so they share properties such as active state and visibility. For more information,
see the section about Creating Menu Groups.

Here's an example menu named game_menu.xml:

<?xml version="1.0" encoding="utf-8"?>

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+id/new_game"
          android:icon="@drawable/ic_new_game"
          android:title="@string/new_game"
          android:showAsAction="ifRoom"/>
    <item android:id="@+id/help"
          android:icon="@drawable/ic_help"
          android:title="@string/help" />
</menu>