Roll your own: Creating your own Custom View

Our Custom View

We’re going to create a simple custom view, a coloured circle with a text label.

We use our custom view in an activity where the user can press a button to change our custom view’s colour and text label

Define your custom attributes

The Android framework’s views have their own attributes

Each view has a number of attributes that we can set in our layout files.

Here’s an example of Android’s Button view as declared in an XML file:

Some of Android’s attributes for the Button view

We need to define our custom view’s attributes

We’re creating a new view so we have to define our own view attributes.

Define your custom view’s attributes in an XML file

We define our custom attributes in an XML file, res/values/attrs.xml:

We define our custom view’s attributes in an XML file

Note the following:

• - we declare our attributes in an XML file with as the root element
• - we declare our attributes inside the  element
• MyCustomView – the name of our custom view
• - we declare each attribute using the element. For each attribute, you need to declare a:
  • name – the name of the attribute
  • format – the format of the attribute

Now we’re ready to create our custom MyCustomView class.

Create your custom view class

All Android’s view classes extend the View class.

The View class is the basic building block for User Interface components.

A view occupies a rectangular space on the screen. It draws our view and takes care of any interaction between the user and our view.

You can create your custom view by extending one of the View subclasses or you can extend the View class directly.

Our custom view MyCustomView class extends the View class.

We include a constructor which will create our custom view from our XML layout file:

The constructor creates our custom view from our XML layout file

Note the following:

• our constructor receives two parameters:
  • the context – the context where the custom view is used
  • a set of attributes – the constructor gets the attributes from the res/values/attrs.xml file  where we’ve defined them
• paintColorStyle – a Paint object that contains the color and style information for our view
• attributeValuesArray – a typed array of the attribute values from the attrs.xml file
• obtainStyledAttributes - returns a typed array of the attribute values from the attrs.xml file. It has four parameters:
  • set – the base set of attribute values
  • R.styleable.MyCustomView – the attributes that we want to retrieve. They’re defined in the res/values/attrs.xml file
  • A reference to a style resource in the current theme that supplies default values for the typed array. In our case we don’t want to look for defaults so we pass 0
  • An ID of a style resource that supplies default values for the typed array. In our case we don’t want to look for defaults so we pass 0
• try – we enclose our code to get the attribute values out of the typed array inside a try block in case there are any problems
• finally – the TypedArray object, attributeValuesArray is a shared resource so we need to recycle it. We do this in the  finally block which is always executed

Drawing our custom view

The onDraw() method draws the content of the view.

The onDraw() method draws the content of the view

Note the following:

• the onDraw() method receives one parameter:
  • canvas – the canvas has methods for drawing lines, text, circles, etc. Canvas defines the shapes that you can draw on the screen
• paintColorStyle – a Paint object. Paint objects define the color, style, font, etc. of the shapes that you draw
• setStyle – sets the style for the circle that we’re going to draw. We pass FILL as the parameter to create a solid circle
• setAntiAlias – set to true, it ensures that the edges of the circle will be smooth
• setColor – we set the color of the circle
• we get the centre x and y coordinates using getMeasuredWidth() - and getMeasuredHeight() – which we halve
• radius – the radius of our circle
• drawCircle – draws the circle. We pass it four parameters:
  • the x coordinate of the centre of the circle
  • the y coordinate of the centre of the circle
  • the radius of the circle
  • the paint object that we should use to draw the circle
• next, we draw the text
  • setColor – we set the color for the text label
  • setTextAlign – we set the alignment of the text relative to its origin. We centre it horizontally on the  x, y origin
  • drawText – we draw the text. There are four parameters here:
    • the text to be drawn
    • the x coordinate of the origin of the text
    • the y coordinate of the origin of the text
  • the paint object that we should use to draw the text

The getters and the setters

You should provide the appropriate getter and setter methods for your custom view.

We’ve included the getter methods but don’t use them.

We’ve also included the appropriate setter methods, all of which we use:

We use the setter methods to set our custom view’s attribute values

Note the following:

• we call each of these methods in the MyActivity activity when the user presses the button
• each receives a new value for the attribute as a parameter
• the appropriate attribute is assigned this value
• invalidate – called to force the view to draw (after setting the new value)
• requestLayout –  called because we have made a change to the view which may affect the layout

Now we’re ready to use our custom view.

Define your custom view in your layout file

This is how we declare our custom view in our layout file:

Android attributes use the android alias for its namespace. Our custom view uses the custom alias for its namespace

Note the following:

• Our layout file has a RelativeLayout layout as its root node. We need to include the namespace for our custom view as indicated by the line underlined in yellow
• custom – the alias for our custom view’s namespace. We’ve used custom but you can use anything you like
• res-auto – our custom namespace ends in res-auto because we’re using Android Studio and Gradle. Otherwise it would usually end in res/[your package name]

Here’s how we would use these attributes in the layout file:

We declare our MyCustomView view in our layout and include its attributes which we defined in an XML attributes file

Note the following:

• MyCustomView – we precede our view, MyCustomView with our package name
• custom – the namespace alias for our custom view attribute
• circleText – our custom attribute for displaying a text label inside the coloured circle
• circleTextColor - our custom attribute for setting the text color
• circleTextSize - our custom attribute for setting the text size

Using your custom view in your app

We use our custom view in the app’s MyActivity activity.

We get a reference to our custom view and set a number of its attributes

Note the following:

• myView – we get a reference to our custom view in the activity_my.xml layout file
• we then call three of the setter methods to set the values of the relevant attributes:
  • setCircleColor – we set the color of the circle to blue
  • setCircleTextSize – we set the size of the text to the MEDIUM_TEXT_SIZE constant
  • setCircleTextColor – we set the color of the text to red

Interacting with our custom view

The MyActivity activity has a button. Clicking the button changes the circle’s color as well as the text, it’s color and size.

Here’s part of the code that’s included in the button’s onClick() method:

We set a number of our custom view’s attributes when the user presses the button

I hope that you have found this tutorial helpful.

This project was created using .

You can download the project files here 

Are you using Eclipse or another IDE? Here's how you can use this project's Android Studio files.