Aside from a handful of edge cases, every application that you build has some form of user interface. On Android, this is accomplished through the use of
ViewGroup objects. In this article, you learn about some of the more commonly used
View components available for displaying content and you are introduced to how they are used.
Do you find it easier to learn with video? Why not check out our course:
View objects are used specifically for drawing content onto the screen of an Android device. While you can instantiate a
View in your Java code, the easiest way to use them is through an XML layout file. An example of this can be seen when you create an simple "Hello World" application in Android Studio. The layout file is the one named activity_main.xml, looking something like this.
<TextView android:id="@+id/hello_world" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!" />
The above example shows a type of
View that will be displayed on the screen. The
layout_height attributes state that
View should only take up as much room on the screen as needed to display the text "Hello World!". The
id attribute is how that
View can be referenced in your Java code like this:
setContentView(R.layout.activity_main); TextView textView = (TextView) findViewById(R.id.hello_world);
While you can set attributes for a
View in XML, you can also change attributes in your Java code, such as changing the text of the above
textView.setText("This is a changed View");
The above code updates the text of the
TextView to "This is a changed View". This is what that looks like when you run the app.
Now that you know how to work with basic
View objects, let's go over some of the different types that are available to you in the Android SDK.
This is the
View we used in the above example. The main job of the
TextView is to display text on the screen of an Android app. While this may seem like a simple task, the
TextView class contains complex logic that allows it to display marked up text, hyperlinks, phone numbers, emails, and other useful functionality.
As the name implies, the
ImageView is designed specifically to display images on the screen. This can be used for displaying resources stored in the app or for displaying images that are downloaded from the internet.
Input and Controls
View objects are used for more than just displaying content to users. Sometimes you need to receive some sort of input to control your applications. Luckily, Android provides several
View subclasses specifically for this purpose.
Button class is one of the most basic controls available in an app. It listens for clicks from the user and calls a method in your code so that you can respond appropriately.
CheckBox classes have an active and inactive state that can be toggled between. This is useful for changing settings in an app. Compatible versions with Material Design are available through the AppCompat support library.
View subclass is an extension of the
TextView class and allows users to update the contained text via a keyboard input.
Adapter Based Views
While each of the above
View examples are single items, sometimes you want to display a collection of items. These
View classes require the use of an
Adapter to handle displaying the proper user interface per item in a collection.
ListView class is used for displaying a collection of items in a linear, single-column, scrollable
View. Each individual item can be selected for displaying more details or performing an action related to that item.
Similar to the
ListView class, the
GridView class takes an
Adapter and displays items in multiple columns on the screen.
The final collection
View class you learn about in this tutorial is the
Spinner class. It accepts an
Adapter and displays items in a dropdown menu when the
Spinner is clicked so that an item can be selected by the user.
2. View Groups
ViewGroup is an invisible object used to contain other
ViewGroup objects 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.
ViewGroup objects can be instantiated in the same way as standard
View items in XML or in Java code.
<?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/hello_world" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!" /> <TextView android:id="@+id/hello_world_2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World 2!" /> </LinearLayout>
ViewGroup classes perform a similar task, each
ViewGroup subclass exists for a specific purpose. Let's take a look at some of them.
LinearLayout exists to display items in a stacked order, either horizontally or vertically. Linear layouts can also be used to assign weights to child
View items so that the items are spaced on the screen in a ratio to each other.
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
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.
An extension of the
ScrollView class handles scrolling its child objects on the screen.
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
RecyclerView class is a
ViewGroup subclass that is related to the
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.
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.
3. Custom Views
While there is a wide variety of
ViewGroup classes for you to use within your apps, you sometimes want to create something new to fit your needs. In this case, you can create a new Java class that extends either
ViewGroup, depending on what you need. The act of creating a new custom
View subclass is beyond the scope of this article, but you can find more information in this Envato Tuts+ tutorial.
In this tutorial, you have learned about one of the most basic components of Android, layouts and views. Given how fundamental these components are to Android, you will continuously learn new things about them as you continue to work with the Android platform and you will find new ways to do amazing things using them in your projects.