Android Custom Attributes in View

In this tutorial we will be creating custom view for android with custom xml attributes. This provide users flexibility to control the view from xml layout itself. Users can use android defined attributes but users can also create their custom attributes in custom view.

Most standard views that android supplies are very general, that is, they can be used for many tasks and in many situations. However, in your application it’s often the fact that much code is used to configure these views to specific tasks. This configuration code is often in the activity part of your application and activities can be a real problem to keep clean. Lot’s of different code tends to end up there and it can be hard to refactor into separate classes.

In this tutorial we will be creating a pie chart that will show the percentage in form of pie chart. The concept is to draw a circle in background with some color and then draw pie over that circle using the percentage value entered by the user. We will be entering random values from 0 to 100 automatically with the use of CountDownTimer Class in android. 

Creating custom attributes in attrs.xml

First of all create file attrs.xml in res/values folder. This file will be used to declare custom attributes. File attrs.xml looks like this.

First we declare a styleable with the name PieChartAttributes . The name can be anything you want, but It’s generally a good idea to name it the same thing as the view that the attributes are going to be used with.

Then we define the actual attribute. We set the name to something descriptive and the format to string. There are many other formats for example “Color”, “Integer”, “Boolean”, “Reference” and so on.

Creating Custom View class

Next we have to create a custom view class named PercentView.java . This class will extend View class of android framework. It must call the constructor 

There are three constructors available but for now we will need this one only. Here context and attributes associated to that view are passed.

Next we will try to get the custom attributes which are passed in constructor and use them.

The first line uses the attribute set, attrs, which is a set of all the attributes that exists in the xml file. The method obtainStyledAttributes() does two main things. First, it filters all the attributes in attrs through the context and applies styles and resolves references to values. Second, it only returns the attributes that you specify. These are specified in the second argument which is an array of references to the wanted attributes. In this case R.styleable.PieChartAttributes is an array with only one entry, R.attr.bgCircleColor, which is the attribute we created in the attrs.xml file.

Before getStyleableAttributes() function we have called init() function which initialize all the paint objects. This function is used to do heavy duty work like creating objects. If you do this in onDraw() method then it may cause lag in your UI.

Full PercentView.java looks something like this.

Adding custom view to layout.xml file

Next we have to add this custom view to our activity_main.xml 

At the root item we’ve added this line

xmlns:custom="http://schemas.android.com/apk/res/com.example.percentageview"

This declares a namespace and enables us to use the attributes we’ve defined in attrs.xml in our layout. In this case we’ve named our prefix “custom” but this could be whatever you want (well, almost). The last part or the URI is the package name of your application.

Here we have used custom:frontCircleColor=”#0fff00″ as our custom attribute. Also name of the view tag will be full qualified ClassName i.e com.example.percentageview.PercentView

You can also add your custom view to  xml using layout editor in eclipse by choosing Custom Layouts in bottom and then dragging and dropping it as shown below.

 

custom_view

 

Linking it all

Now we have created all the files we need to create our view and then handle the pie chart using CountDownTimer.

MainActivity.java looks like this.

Here we created PercentView named pieChart and then changed its percentage value using pieChart.setPercentage(rand.nextInt(101)); with the help of CountDownTimer class.

Please comment for any queries.

 

GuRu

Technology enthusiast. Loves to tinker with things. Always trying to create something wonderful using technology. Loves coding for Android, Raspberry pi, Arduino , Opencv and much more.

You may also like...

  • Mahesh

    Hi guru can you tell me how we can calculate a drawing object before we draw in android

    • Hello, which drawing object are you talking about?