Views

Views provides the various types of layouts and views, exploring their unique attributes and
functionalities.

View refer to the android.view.View class, which is the base class of all UI classes.
android.view.View class is the root of the UI class hierarchy. So from an object point of view, all
UI objects are View objects.

In Android, a View (public class Views) is the basic building block for creating UI components.
Think of it as a small rectangle on the screen that can display content or respond to user
interactions. Each View is a fundamental element for creating various types of interactive and
display components in an app.

Following are some of the common View subclasses that will be used in android applications.
 TextView is one of the most fundamental View types. It’s used to display text to the
user. You can customize the appearance of the text by changing its color, size, font, and
alignment.
 Button is another pretty basic element. When a user taps a button, it triggers an event
in the app, allowing it to respond to the user’s input.
 ImageView is pretty self-explanatory: it’s used for displaying images. You can
manipulate images in ImageView, such as resizing them or changing their aspect ratio.
 EditText is an interactive TextView that allows users to input and edit text. It’s
commonly used in forms, search bars, and messaging apps. You can use various input
types like text, number, and password, and set various properties to control the text,
like limiting the number of characters or allowing only numbers.
 CheckBox is employed for multiple options that can be either checked or unchecked.
They are often used in settings and forms and operate independently from one another.
 RadioButton is used for making a single selection from a group of options. When one
RadioButton in a group is selected, the others are automatically deselected. This makes
them perfect for choices like selecting a payment method or choosing a shipping option.
 Switch is a two-state toggle that can select between two options, often used in settings
for turning a feature on or off. It provides a quick and easy way for users to control a
setting.
 ProgressBar is used to display the progress of an operation, providing visual feedback to
the user. They can be styled as a spinning wheel or a horizontal bar filling up.
  SeekBar is a type of ProgressBar that adds a thumb to the progress line which a user can
drag to set a value within a predefined range. It’s often used for settings like adjusting
volume or screen brightness.
 DatePicker
 Spinner: Spinners is a view similar to the dropdown list that provides a quick way to
select one value from a set.

Views can also be custom: that is, present a different state of an object. For example, a Button
view can change its color or shadow on hover (onHoverEvent) or touch (onTouchEvent).

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView android:id="@+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello, I am a TextView" />
<Button android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello, I am a Button" />
</LinearLayout>

ViewGroup

The ViewGroup class is a subclass of the View class. And also it will act as a base class for
layouts and layouts parameters.

The ViewGroup will provide an invisible container to hold other Views or ViewGroups and to
define the layout properties. For example, Linear Layout is the ViewGroup that contains UI
controls like Button, TextView, etc., and other layouts also.

ViewGroup Refer to the android.view.ViewGroup class, which is the base class of some
special UI classes that can contain other View objects as children. Since ViewGroup objects
are also View objects, multiple ViewGroup objects and View objects can be organized into an
object tree to build a complex UI structure. Following are the commonly used ViewGroup
subclasses used in android applications.
  FrameLayout
 WebView
 ListView
 GridView
 LinearLayout
 RelativeLayout
 TableLayout and many more.

The ViewGroup subclasses listed above group View instances together and takes care of their
layout. For instance, the LinearLayout will render the components after each other either
horizontally or vertically.

 LinearLayout organizes Views in a linear order, horizontally or vertically. It is

straightforward and efficient for arranging elements in a single row or column. This
layout is particularly useful for creating forms, toolbars, or any interface where a
sequential arrangement of elements is needed.

 WebView is a view that is used to display web pages inside the app. It is used to turn
the app into a web application.
 GridView displays items in a two-dimensional, scrollable grid. Similar to ListView, it
uses an Adapter to fill its cells with Views. GridView is ideal for displaying a collection
of images, icons, or data in a uniform grid, like a photo gallery or a settings menu.

 TableLayout: as the name suggests, it arranges Views in a grid-like format, similar to a

table. It’s useful for displaying rows of data or elements that need to be aligned in
columns and rows. Each row in a TableLayout can contain multiple Views, and each
View is placed in a cell. This layout is beneficial when creating calculators, timetables,
or any interface with a tabular structure.

 FrameLayout is designed to hold a single child View, but it can contain multiple child
Views, which are positioned based on the top-left corner. It’s a simple container used
to display a single item, like an image or a piece of text. FrameLayout is often used for
its simplicity in handling UI elements like a loading spinner or as a placeholder for
fragments in an app.

 ListView displays a list of scrollable items, automatically inserted into the list using an
Adapter. It’s efficient for displaying datasets that scroll vertically, like a contact list or a
menu. The key difference between this option and LinearLayout is that the ListView
recycles the item views when scrolling, making it memory-efficient for long lists.

 AbsoluteLayout enables you to specify the exact location of child Views. Each View
can be positioned with specific x and y coordinates. However, it’s not recommended
for use as it doesn’t adapt well to different screen sizes and orientations. Due to its
lack of flexibility and the complexity of maintaining it across various screen sizes, it’s
generally avoided in modern Android development.
  RelativeLayout allows Views to be positioned in relation to each other or to the
parent container. It offers greater flexibility than LinearLayout as it enables developers
to create complex layouts without the need for nested containers. For example, you
can align a button to the right of a TextView or at the center of the screen. It’s ideal
for designing interfaces where the position of elements depends on others.

Each layout type serves a unique purpose and understanding when to use which layout is key
to creating effective and user-frie
friendly
ndly Android applications. Developers choose layouts based
on the requirements of the app’s design and the relationships between UI elements.

Difference Table
View ViewGroup

View is a simple rectangle box that ViewGroup is the invisible container. It holds
responds to the user’s actions. View and ViewGroup

ViewGroup is a collection of Views(TextView,

View is the SuperClass of All component
EditText, ListView, etc..), somewhat like a
like TextView, EditText,
ditText, ListView, etc
container.

A View object is a component of the user A ViewGroup object is a layout, that is, a
interface (UI) like a button or a text box, container of other ViewGroup objects (layouts)
and it’s also called a widget. and View objects (widgets)

For example, LinearLayout is the ViewGroup

Examples are EditText, Button, CheckBox,
that contains Button(View), and other Layouts
etc.
also.
 View ViewGroup

View refers to the android.view.View ViewGroup refers to the

class android.view.ViewGroup class

android.view.View which is the base class

ViewGroup is the base class for Layouts.
of all UI classes.

Android Widgets

Android widgets are essentially mini app windows that you can add to your home screen. They
provide at-a-glance views of an app’s most important data and functionality. Here are the main
types of Android widgets:

1. Information Widgets: These display crucial information elements and track how that
information changes over time. Examples include weather widgets, clock widgets, and
sports score tracking widgets.

2. Collection Widgets: These specialize in displaying multiple elements of the same type,
such as pictures from a gallery app, articles from a news app, or emails from a
communication app. Collection widgets can scroll vertically and allow users to interact
with elements.

3. Control Widgets: Control widgets display frequently used functions, allowing users to
trigger them directly from the home screen. Think of them as remote controls for an
app. Examples include home control widgets for turning lights on or off.

4. Hybrid Widgets: These combine elements of different types. For instance, a music player
widget is primarily a control widget but also shows the currently playing track like an
information widget

The distinction between Views and widgets in Android can be shown below:

1. View:

o A View is the basic building block for UI components.

o Views are responsible for drawing themselves on the screen, handling user input,
and responding to various events.

o Examples of Views include buttons, text fields, images, checkboxes, radio

buttons, and more.
 o Views can be organized in a hierarchical structure using layout containers like
LinearLayout, Relative-

o Layout, and ConstraintLayout.

o Views are used to create the visual and interactive elements of an app’s user
interface.

2. Widget:

o A widget is essentially a specialized type of View that acts as a user interface

control.

o It’s what you typically think of as a “control” through which the user interacts
with your application.

o Examples of widgets include Button, Spinner, and CheckBox.

o However, there is no specific Widget class in Android; the term “widget” is used
informally to refer to classes within the android.widget package.

o For instance, a Button is a View, not a separate Widget class.

Convert dp units to pixel units

1 dp is equal to 1 pixel on a 160 dpi (MDPI) screen.

In some cases, you need to express dimensions in dp and then convert them to pixels. The
conversion of dp units to screen pixels is as follows:

px = dp * (dpi / 160)

Imagine an app in which a scroll or fling gesture is recognized after the user’s finger has moved
at least 16 pixels.

On a baseline screen, a user’s finger must move 16 pixels / 160 dpi, which equals 1/10 of an
inch (or 2.5 mm), before the gesture is recognized.

On a device with a high-density display (240 dpi), the user’s finger must move 16 pixels / 240
dpi, which equals 1/15 of an inch (or 1.7 mm). The distance is much shorter, and the app
therefore appears more sensitive to the user.

To fix this issue, express the gesture threshold in code in dp and then convert it to actual pixels.

For example:
 // The gesture threshold expressed in dp
private final float GESTURE_THRESHOLD_DP = 16.0f;

// Convert the dps to pixels, based on density scale

int gestureThreshold = (int) TypedValue.applyDimension(
COMPLEX_UNIT_DIP, GESTURE_THRESHOLD_DP + 0.5f,
getResources().getDisplayMetrics());

// Use gestureThreshold as a distance in pixels...

The DisplayMetrics.density field specifies the scale factor used to convert dp units to pixels
according to the current pixel density.

Here’s a list of the common conversions:

 1 dp = 1 pixel, or 1×, for mdpi displays (~160PPI).

 1 dp = 1.5 pixels, or 1.5×, for hdpi displays (~240PPI).

 1 dp = 2 pixels, or 2×, for xhdpi displays (~320PPI).

 1 dp = 3 pixels, or 3×, for xxhdpi displays (~480PPI).

 1 dp = 4 pixels, or 4×, for xxxhdpi displays (~640PPI).

i.e., on a medium-density screen, DisplayMetrics.density equals 1.0, and on a high-density

screen it equals 1.5. On an extra-high-density screen, it equals 2.0, and on a low-density screen,
it equals 0.75. This figure is used by TypedValue.applyDimension() to get the actual pixel count
for the current screen.