Views and Layouts Tutorial: View
The View can be regarded as the most granular user interface unit in Android.
What is a View?
In classical object oriented sense, a view is a class which represents a rectangular area on screen which handles user events and in response, renders the user interface accordingly. Views can be added in an application programmatically or through XML layout files.
A View which in turn contains other views is known as a ViewGroup. The ViewGroup is associated with a layout which determines how the contained views appear on the user interface. The relationship between ViewGroup and View can be represented in a hierarchical manner as shown below.
Common User interface components such as label, button, menu etc. are commonly referred to as widgets. A widget that appears on the screen is referred to as a view.
How to create a View?
Android offers several types of views including TextView, ImageView, KeyboardView and several others. TextView is perhaps the most commonly used Android view. When we created the Hello World project in Module 1, a TextView was implicitly defined in the
main.xml file in our project.
<TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/hello" />
Dimension values signify the value of various view attributes. Android allows for the following units in dimension values:
- dp – Density Independent pixels, these are specified relative to 160 dots per inch. You should use this unit when you want your view to render at the same size on different device screen sizes
- sp – Scale Independent pixels, these get scaled with font size.
- pt – Points, one point here specifies 1/72th portion of an inch
- px – Pixel, represents a pixel on the screen. This should be avoided as devices vary in pixel per inch (ppi) density
- mm – Milimeter
- in – Inches
Simply put, the screen density refers to the number of pixels within a physical area of the screen. It is usually measured in dpi (dots per inch). Android supports the following 4 screen densities:
|hdpi||high-density (hdpi) (~240dpi)|
|xhdpi||extra high-density (xhdpi) (~320dpi)|
Views (and ViewGroups) are typically associated with the following attributes.
|layout_width||Width of the View|
|layout_height||Height of the View|
|layout_marginTop||Extra space on the top side of the View|
|layout_marginBottom||Extra space on the bottom side of the View|
|layout_marginLeft||Extra space on the left side of the View|
|layout_marginRight||Extra space on the right side of the View|
|layout_gravity||How a view is placed within its parent ViewGroup|
|layout_weight||Extra space in the layout to be allocated to the View|
|layout_x||Specifies the x-coordinate of the View|
|layout_y||Specifies the y-coordinate of the View|
Let’s discuss each of these attributes in detail:
The unit is dimension values. Alternatively, it can be set to match_parent (same width as parent minus padding, this is same as fill_parent) or wrap_content (wide enough to cover the enclosing content). In our Hello World sample, we set this attribute to fill_parent
The units for layout_height are same as layout_width
We’ll cover the remaining attributes in subsequent modules as and when they are used.