Android Custom Views Tutorial. Part-2: Custom Attributes

Robin Kamboj
MindOrks
Published in
3 min readAug 8, 2017

In the last part of this series, we discussed how to make basic Custom Shapes in Android. If you haven’t seen that Part, I would recommend going through that first:

If you want to get hold of the project code, it is recommended that you clone/fork/download the following repository:

In this part of the series, you will learn to add custom attributes to the Custom Views.

The previous part of the series has the code for MyCustomView as:

https://gist.github.com/rrkkhd/a270fc6f5ce26176574cf6db149d9c9a/raw/57b46798155302a9e4d8b9cbbe7550a423a5ba3f/MyCustomView.java

In this code for the custom view, you may have noticed that we have the init() method with empty body, and several warnings are there in the onDraw() method that was overridden to avoid using layout allocations during draw operations. Removing this warning is very important, as this is one of the easiest causes of a memory leak. Our first step of this series will be to remove this warning only.

  1. Make mRect and mPaint objects of Rect and Paint class respectively as global to the class. make their instances in the init() method that was made. Then replace rect with mRect, and paint with mPaint. The warning should be removed by following this step.
  2. Now, to begin adding custom attributes to your custom views, you have to first add a new file your “values” directory and name it “attrs.xml”. Inside this xml file, inside <resources></resources> tags, add a “declare-styleable” tag with attribute “name” as MyCustomView (your custom view class name).
  3. Inside these tags, all your custom attributes will be inserted in the form of key (“name=”) — value (“format=”) pairs. In our case, we will add a custom attribute named square_color with format as color.

4. Next, we need to check in our init() method whether the AttributeSet set being passed as a parameter is null or not. If it is not null, then we obtain a TypedArray typedArray (say) by calling obtainStyledAttributes(set, R.styleable.MyCustomView) using getContext();

5. Next, we declare an int variable mSquareColor and initialise with the values input through the TypedArray ta, also providing the default colour in case no value for that attribute was input by the user. Also remember to call ta.recycle() once you are done accessing it. Your class should now look like this:

6. Now all you need to do is add your custom attribute square_color to your activity_main.xml , you will see that the custom view colour changes to whatever colour you add inside the attribute parameter.

Thats all you needed to know how you make custom attributes for your custom views. More examples on custom attributes are for size of your view, radius in case of circle, text input, etc.

To continue learning in depth of the basics of custom view, it is recommended that you go through the remaining parts of the series. And like always, happy programming. :)

If you liked the post, please press the little heart/follow to promote more tuts from this side. :)

Link to other parts of this series:

--

--

Robin Kamboj
MindOrks

Software Engineer by profession. Designer by force. Bibliophile by nature.