Creating custom views in Android

Views are essential part of most Android apps since they define everything we see and interact through with application and is responsible for drawing and event handling.

View is the base class for widgets, which are used to create interactive UI components (buttons, text fields, etc.).

 

The ViewGroup subclass is the base class for layouts, which are invisible containers that hold other Views (or other ViewGroups) and define their layout properties.

All views are arraged in a single tree. View can be add added through code or by specifying them in XML layout file. Once view is created there are few common operations that can be done:

  • Set properties – for example change content of TextView or ImageView
  • Set focus – framework should handle this by itself unless you want to force focus on it with requestFocus()
  • Set visibility – specifing wether view is visible
  • Set up listeners – if we want to accept any kind interactions with our view listeners are mandatory, for example setting click listener on button, or touch listener on listview to handle scrolling and custom touch interactions( singel tap, double tap, swing, long tap…)

Custom view implementation

Now that we know what view are at some point of our application development you will need custom view. Custom views are better since you implement only stuff you will need and take full control over it.

All of the view classes defined in the Android framework extend View. Your custom view can also extend View directly, or you can save time by extending one of the existing view subclasses, such as Button.

class CustomView extends View {
         public CustomView(Context context, AttributeSet attrs) {
                 super(context, attrs);
         }
}

To add view in your interface you specify it in XML and control its appearance and behavior with element attributes. You can define custom element attributes to control some of its unique beaviors.

  • Define custom attributes for your view in a <declare-styleable> resource element
  • Specify values for the attributes in your XML layout
  • Retrieve attribute values at runtime
  • Apply the retrieved attribute values to your view

<resources>
<declare-styleable name=”CustomView”>
<attr name=”showText” format=”boolean” />
<attr name=”labelPosition” format=”enum”>
<enum name=”left” value=”0″/>
<enum name=”right” value=”1″/>
</attr>
</declare-styleable>
</resources>

And in our CustomView class we want to apply those attributes

public PieChart(Context context, AttributeSet attrs) {
         super(context, attrs);
         TypedArray a = context.getTheme().obtainStyledAttributes(
                attrs,
                R.styleable.PieChart,
               0, 0);

         try {
              mShowText = a.getBoolean(R.styleable.PieChart_showText, false);
              mTextPos = a.getInteger(R.styleable.PieChart_labelPosition, 0);
         } finally {
         a.recycle();
         }
}

This would be some basic stuff to create custom view or extend existing one.

Leave a comment

Your email address will not be published. Required fields are marked *