Go Back To TOC

---

Views

As the name implies, any component that can be “viewed” is a View component. Hence, all UI components in an Activity are a subclass of the View class (android.view.View). As a result, all components attributes (e.g., padding, margin) are part of the View class as well. Only attributes that are SPECIFIC to a component will be members of that component’s class.
Views are the basic building blocks (b3) of any app. Some characteristics of views are:

• Rectangular container that has some type of content (e.g., text for TextView)
• They have dimension (e.g., width and height properties
• They get drawn in an activity.
• They may have a background or the background may be transparent
• They may provide some type of interaction
• They may use event listeners for:
• Events (e.g., click, touch, long press, key press)
• Gestures (e.g., Pinch in/out, swipe, drag-and-drop)

• FYI for ultra-geeks only: Component’s class and sub-classes hierarchy can be seen by highlighting a class and then right-clicking the class and selecting Browse Type Hierarchy or simply pressing CTRL+H.          
• Components Properties (margin, padding, etc.)

All UI components can have one of three states:

• Visible—is visible (unless covered by another component or the window containing the view is not shown)
• Invisible—is invisible  (but still takes up space)
• Gone—is invisible (but DOESN’T take up space)

Basic Views

Text Views

• TextView—non-editable static text declared with XML but can be updated at runtime with Java for single or multi-line text.
• EditText—user input text that can be edited from hard or soft keyboard

Button Views

• Button—basic button that can contain a label, icon or both that handle click events from users.
• ImageButton—basic button that is designed to use an image instead of text.
• RadioButton—compound buttons that allow for a single selection
• CheckBox—compound buttons that allows for multiple selections
• Switch / ToggleButton—compound buttons that allows for only two states (e.g., on/off)
  NOTE: The CompoundButton components are two-states buttons so that when they are pressed or clicked the state of the button automatically changes. Note, however, that you can have multiple selections for multiple checkboxes but only a single state for each.

ImageView

ImageView displays an image that can be loaded from various sources that allows for:

• Computing of image dimensions
• Scaling
• Tinting

ImageView Scaling:

• Drag-and-drop and ImageView from the Palette panel into the Design view of your app.
• Add height and width properties in the Properties panel.
• In the Properties panel, add the required src property (e.g., bird.png).
• Experiment with the various types of Scale Type properties in the Properties panel, to see how an image will scale based on the Scale Type properties. There are several types with most of the properties being self-explanatory:
• matrix—fits the image within the ImageView bounding area while maintaining the aspect ratio
• fitXY—fits the image to match the X and Y properties of the ImageView bounding area without maintaining the aspect ratio.
• fitStart—fits the image to the top of the ImageView bounding area
• fitCenter—fits the image to the center of the ImageView bounding area (default)
• fitEnd—fits the image to the bottom of the ImageView bounding area
• center—fits the image from the center and crops it after enlarging it.
• centerCrop—
• centerInside—

WebView

WebView allows you do embed a HTML page within an app. WebView displays a web page that is customizable from remote or local web pages. It can dynamically load URLs from Java code at runtime.  Also provides various types of callbacks:

• Page loading progress
• Page finished loading
• Content loading errors
• New URL load request
• Form submission

Specialized Views

• ProgressBar—shows progress (e.g., downloading image or file)
• SeekBar—similar to progress bar but with a scrubber that allows a user to select from a range of values
• RatingBar­—allows user to choose a star rating.
• TextClock—displays a text clock (e.g., 12:23:43 am)
• Switch—allows user to select from one of two-states (e.g., on/off)
• AutoCompleteTextView—similar to edit text but allows user to make selections based on suggestions
• VideoView—displays a video in a video player
• TimePicker—allows you to select a time
• DatePicker— allows you to select a date

Advanced Views

ViewStub

ViewStub represents an invisible with no dimensions lightweight placeholder for less used components that can be inflated later on demand for better performance. It can be replaced with a specific View by assigning a layout attribute.
ViewGroup
A ViewGroup is a subclass of the View class and is a LAYOUT CONTAINER that has several subclasses. Some of these are:

• LinearLayout—layout components horizontally or vertically depending on the orientation property
• RelativeLayout—layout components “relative” to other components or containers
• GridView—layout components in a 2D scrollable grid
• ListView—layout components in a vertical “list” of scrollable items
• AbsoluteLayout__layout components with “absolute” positioning. Similar to Absolute Positioning (AP) in Dreamweaver.
• DrawerLayout—layout components
• ViewPage—layout components
• Check to see if AbsoluteLayout, DrawerLayout and ViewPage are still in the Palette panel and if they are deprecated.

Two views from the support design library that uses the basic templates.

• CoordinatorLayout—layout
• AppBarLayout—layout

ScrollView

ScrollView is a view that contains other views so that the content can be scrolled either horizontally or vertically. It is useful when large amount of content needs to be displayed within the view area.  It is best practice to embed a LinearLayout component of the same orientation in a ScrollView. Do not use a ListView and a ScrollView at the same time because they both perform scrolling.
ScrollView is a framelayout so it can only have one child—a View (e.g., TextView with a lot of text) or a View Group (e.g., Relative Layout).
It is common that the amount of text on a screen will exceed the viewport area of the screen especially on a smaller device like a phone so that the rest of the text will not be initially visible to a user. To see that rest of the text, a scroller is added so that the user can “scroll” the text up or down to see it.

EXAMPLE: Creating Scrollable Text

• Create a new project using the Empty Template and name it CreatingScrollabeTextApp.
• In Design view, drag-and-drop the default TextView to the top/left corner of the screen.
• In the Properties panel, set the fontSize property to 20sp and change the text property to a title (e.g., Gettybury Address)
• From the Palette panel, drag-and-drop a ScrollView component below the TextView.
• Expand the ScrollView to reveal the LinearLayout (vertical) component.
• From the Palette pane, drag-and-drop another TextView over the LinearLayout (vertical) component in the Component Tree panel until you see a small triangle in the center of the line to nest the TextView inside of LinearLayout (vertical).
• In the Properties panel, set the second TextView component fontSize to 20sp.
• In the strings.xml file add string resource constant with a large amount of text (e.g, Gettysburg Address) so that it can be scrolled on a phone. See abbreviated version of Gettysbury Address below.

<resources>
<string name="app_name">Creating Scrollabe Text App</string>
<string name="gb_address">Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.
….
Abraham Lincoln
November 19, 1863
</string>
</resources>

• Right-click inside of the left margin and select Use Soft Wrap to see the entire text.
• Set the text property of the second TextView to the string resource constant (gb_address) you created in the previous step.
• CHECK PONT: Run the app in an emulator. If you pasted enough text into the strings.xml file, you will only be able to see only the text that can fit witin the viewport. However, if you want to see more text, simply scroll the TextView.

ViewPage

ViewPage is a view that contains other views so that the content can be swipe left and right.

Dynamic (Adapter) Views

ListView

ListViews is the most used view that uses an adapter to display its content in a list. The ListView is used to display a “view” of “list” items as the name implies that may or may not be scrollable depending on the number of items in the view. It is typically populated using a generic Adapter. If the ListView is the only component, you can use the ListActivity class instead of the Activitty class. Content for list view can be retrieved from a variety of sources:

• Preset list of items
• Database
• Content Provider (another app)
• Remote server (RSS)
• Dynamically generated data

GridView

GridView uses an adapter to display its content in a grid (e.g., Photo Gallery). Like the ListView, the GridView is a ViewGroup that displays items in a 2-dimensional grid instead of a list that can be scrolled. However, there are some additional attributes that can be added:

• Number of Columns (or autofit)
• Column width
• Horizontal spacing
• Vertical spacing
  NOTE: If you give the GridView one (1) column, it will behave exactly like the ListView.

Spinner

Spinners is a view that uses an adapter to display its content in a drop down menu that allows for a single selection.

ExpandableListView

ExpandableListView—provides a two level list view

RecyclerView

RecyclerView—

CardView

CardView—

---