Creating Custom and Compound Views in Android Tutorial

This tutorial describes how to create custom Views in Android. The examples explained below is developed in Eclipse 4.3, compiled in Java 1.6 and tested in Samsung Galaxy S3 Android 4.2. In this example we will create a custom view with two TextView. One to the left and other to the right as pairs. The custom styles can be configured from xml.
The Android provides various View classes for dealing with user interfaces. View’s are responsible for representing data to user and allow interactivity. Below are few of the common View classes and Layout that is being supported in android.

 

1. Different Android Layouts

A layout defines the visual structure for a user interface. It defines the way View’s can be placed on an Activity. Layouts can be declared in two ways.

1. Declare UI elements in XML. Android provides a straightforward XML vocabulary that corresponds to the View classes and sub classes, such as those for widgets and layouts.
2. Instantiate layout elements at run time. Your application can create and manipulate View and ViewGroup objects programmatically.

Below are the ViewGroup classes that android supports

• Linear Layout
• Relative Layout
• Table Layout
• Grid View
• Frame Layout
• List View

Below are some of the most common used Android View classes

• Button
• Checkbox
• EditText
• ImageView
• ProgressBar
• RadioButton
• SeekBar
• Spinner (ComboBox)
• ToggleButton
• WebView
• Dialog

 

2. Why Custom Views in Android ?

All the above View classes and ViewGroup classes are good enough to create an solid android app. However, sometimes your app may have unique needs that aren’t covered by the built-in views. Such cases you will end up creating an custom View in android. The below example shows you how to create your own views that are robust and reusable.

 

3. Creating your custom View class

Declaring a custom View is much similar to declaring any other class in Java. While designing an custom class keep the following things in mind

1. It should provide some easy to use interface and should use the memory efficiently.
2. A Custom View should conform to Android standards
3. You can provide custom styleable attributes that can be configurable from Android XML layouts
4. Your View class should be compatible with multiple Android platforms

All the default View classes that are available in android extends View. The same way your custom View can directly extend the View class or you may extend one of the default View controls such as TextView. Now, override the constructor that takes a Context and an AttributeSet object as parameters.

 

4. Define Custom Attributes

You can provide custom styleable attributes that can be configurable from Android XML layouts. These attributes will control its appearance and behavior of View. You can create a values/attr.xml file in your project. To enable this behavior in your custom view, you can define custom attributes for your view in a resource element in attr.xml file.


In the above xml file, LovelyView is the name of the style. and leftLabel, rightLabel, leftLabelStyle and rightLabelStyleare the style attributes defines.

Once you define the custom attributes, you can use them in layout XML files just like built-in attributes. The only difference is that your custom attributes belong to a different namespace. Instead of belonging to the http://schemas.android.com/apk/res/android namespace, they belong to http://schemas.android.com/apk/res/(your package name)

Here’s how to use the attributes defined for LovelyView



Notice that, In the above code snippet, we are using the fully qualified name of the custom view class. If your view class is an inner class, you must further qualify it with the name of the view’s outer class.

 

5. Apply Custom Attributes

In the above two steps, we have configured the View stylable attributes in the XML. When a view is created from an XML layout, all of the attributes in the XML tag are read from the resource bundle and passed into the view’s constructor as an AttributeSet. We can read the attributes by calling obtainStyledAttributes() method.

Below is the complete View class code

 

6. Download Complete Example

Here you can download complete eclipse project source code from GitHub.

Download Complete Source Code from GitHub

7. Output