This chapter is from the book
This chapter is from the book
This chapter is from the book
Creating a Custom View
When developing your own application, you may need a view that doesn’t come “out of the box.” When this occurs you have two options: You can create a class for your own custom view or you may extend one of the existing views.
To create your own, you need to create a new class, have it extend View, and have it override at least one method. You will also be adding the variables and logic needed to handle the custom properties you will be adding to your view. The following shows a custom view along with the values used as custom properties:
public class MyView extends View {
private int viewColor, viewBgColor;
public MyView(Context context, AttributeSet attrs) {
super(context, attrs);
TypedArray a = context.getTheme().obtainStyledAttributes(attrs,
R.styleable.MyView, 0, 0);
try {
viewColor = a.getInteger(R.styleable.MyView_viewColor);
viewBgColor = a.getInteger(R.styleable.MyView_viewBgColor)
} finally {
a.recycle();
}
@Override
protected void onDraw(Canvas canvas) {
// draw your view
}
}
}
You want to be able to pass values through the XML when used with your application layout XML. To do this you can add an XML file to the res/values folder. This folder houses <resources> with child <declare-styleable> elements. The following shows an example of a custom view XML file:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="MyView">
<attr name="viewColor" />
<attr name="viewBgColor" />
</declare-styleable>
</resources>
Now you can add your custom view to your application layout, but you need to add a property so that your custom view can be found. This is done by adding the following line to your layout element:
xmlns:custom="http://schemas.android.com/apk/res/com.dutsonpa.mycustomview"
Notice that you need to change the value to match your namespace by replacing com.dutsonpa.myview with your own package name. Once you add that to your layout element, you can add your custom view. This is done by referencing the package and then adjusting or setting the values you want to use. The following shows an example of a custom view being added with values being set:
<com.dutsonpa.mycustomview.myview android:id="@+id/" custom:viewColor="#33FF33" custom:viewBgColor="#333333" />
Notice that Android properties may be used and that your custom properties are used by employing custom:valueName. This provides some flexibility by allowing some built-in features to be mixed with your custom attributes.
The last thing you should do is add getter and setter methods for your attributes. These can be added to your class as follows:
public void getViewColor() {
return viewColor;
}
public void getViewBgColor() {
return viewBgColor;
}
public void setViewColor(int newViewColor) {
viewColor=newViewColor;
invalidate();
requestLayout();
}
public void setViewBgColor(int newViewBgColor) {
viewBgColor=newViewBgColor;
invalidate();
requestLayout();
}
By using invalidate() and requestLayout(), the layout is forced to redraw using the onDraw() method that is being employed by the custom view.