Creating custom and compound views in Android – Tutorial

This tutorials describes how to create custom and combound views with Android.

by

1. Custom Views

1.1. Default views

The Android framework provides several default views. The base class a view is the View. Views are responsible for measuring, layouting and drawing themselves and their child elements (in case of a ViewGroup). Views are also responsible for saving their UI state and handling touch events. Developers can also create custom views and use them in their application.

It is possible to create custom views by:

  • Compound views – combining views with a default wiring
  • Custom views – creating your own views
    • by extending an existing view, e.g. Button
    • by extending the View class

The following image shows the default view hierarchy of Android.

Android view hierarchy

View are typically created to provide a user interface experience with is not possible with the default views. Using custom view allows the developer allow to do certain performance optimization, i.e., in case of a custom layout the development can optimize the layout manager for his use case.

1.2. How Android draws the view hierarchy

Once an activity receives the focus, it must provide the root node of its layout hierarchy to the Android system. Afterwards the Android system starts the drawing procedure.

Drawing begins with the root node of the layout. The layout hierarchy is traversed in the order of declaration, i.e., parents are drawn before their children and children are drawn in the order of declaration.

Drawing the layout is a two pass process:

  • measuring pass – implemented in the`measure(int, int)` method. This happens as a top-down traversal of the view hierarchy. Every view stores its measurements.
  • layout pass – implemented in the layout(int, int, int, int) method. This is also a top-down traversal of the view hierarchy. During this phase each layout manager is responsible for positioning all of its children. It uses the sizes computed in the measure pass.
The measure and layout step always happen together.

Layout managers can run the measure pass several times. For example, LinearLayout supports the weight attribute which distributes the remaining empty space among views and RelativeLayout measures child views several times to solve constraints given in the layout file.

A view or activity can trigger the measure and layout pass with a call to the requestLayout() method.

After the measure and layout calculation, the views draw themselves. This operation can be triggered with the invalidate() method from the View class.

For a detailed introduction into the deeper layer of Android see http://source.android.com/devices/graphics/architecture.html.

1.3. Using new views in layout files

Custom and compound views can be used in layout files. For this you need to use the full qualified name in the layout file, e.g. using the package and class name.

<?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" >

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />

    <de.vogella.android.ownview.MyDrawView
        android:id="@+id/myDrawView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

Alternatively you can also declare you name space in the layout file, similar to the Android name space.

1.4. Create screenshots of views

Every View class support the creating of an image of its current display. The following coding shows an example for that.

# Build the Drawing Cache
view.buildDrawingCache();

# Create Bitmap
Bitmap cache = view.getDrawingCache();

# Save Bitmap
saveBitmap(cache);
view.destroyDrawingCache();

2. Compound Views

Compound views (also known as Compound Components ) are pre-configured ViewGroups based on existing views with some predefined view interaction.

Combound views also allow you to add custom API to update and query the state of the combound view.

For such a control you define a layout file and assign it to your compound view. In the implementation of your compound view you predefine the view interaction. You would define a layout file and extend the corresponding ViewGroup class. In this class you inflate the layout file and implement the View connection logic

You may also like

Development

Android Widgets – Tutorial

The following description assume that you already have experience in building standard Android application. Please see http://www.vogella.com/tutorials/Android/article.html – Android Tutorial. It also partly uses Android services. You find an introduction into Android Services in http://www.vogella.com/tutorials/AndroidServices/article.html – Android Service Tutorial.