In Android java API's all views (UI Controls) are derived from android.view.View class. If you want to create your own custom view (UI Control) then you can create them very easily by deriving new view class from any existing view like TextView, Button etc to extending them or from View class and override methods which are required to override.
In general when you are creating custom view in that case you have to override onDraw, onKeyDown, onKeyUp, onMeasure etc methods.
For this i have create one class ChartView in my application by extending View class and overrided onDraw, onKeyDown, onKeyUp, onMeasure methods. In eclipse you can do method overriding very easily by selecting base class in IDE and pressing alt+shift+S and then selecting option Override/Implement methods as shown below.
Create constructors using supper class constructors with param Context and AttributeSet to initialize view with defined attributes in xml layout.
1: public ChartView(Context context)
2: {
3: super(context);
4: // TODO Auto-generated constructor stub
5: initChartView();
6: }
7: public ChartView(Context context, AttributeSet attrs)
8: {
9: super(context, attrs);
10: initChartView();
11: // TODO Auto-generated constructor stub
12: }
have overridden onDraw method to draw a line using Paint object on canvas.
1: @Override
2: protected void onDraw(Canvas canvas)
3: {
4: // TODO Auto-generated method stub
5: super.onDraw(canvas);
6: //Do drawing
7: chartBase.Draw(canvas);
8: canvas.drawLine(0, 10, this.getWidth(), 10, mChartPaint);
9: //Draw text and what you want here
10: //...
11: }
You can override other methods like this to extend view for the functionality you want.
Complete Code Listing is here
1: package bimbim.in.chart;
2:
3: import android.content.Context;
4: import android.graphics.Canvas;
5: import android.graphics.Paint;
6: import android.util.AttributeSet;
7: import android.view.KeyEvent;
8: import android.view.View;
9:
10: public class ChartView extends View
11: {
12: private int chartBackColor;
13: private Paint mChartPaint;
14: public ChartView(Context context)
15: {
16: super(context);
17: // TODO Auto-generated constructor stub
18: initChartView();
19: }
20: public ChartView(Context context, AttributeSet attrs)
21: {
22:
23: super(context, attrs);
24: initChartView();
25: // TODO Auto-generated constructor stub
26: }
27:
28: private void initChartView()
29: {
30: mChartPaint = new Paint();
31: mChartPaint.setColor(0xFF00FF00);
32: chartBackColor = 0xFF0000FF;
33: chartBase = new ChartBase(this.getHeight(), this.getWidth(), chartBackColor);
34: }
35: @Override
36: protected void onDraw(Canvas canvas) {
37: // TODO Auto-generated method stub
38: super.onDraw(canvas);
39: //Do drawing
40: canvas.drawLine(0, 10, this.getWidth(), 10, mChartPaint);
41: //Draw text and what you want here
42: //...
43: }
44:
45: @Override
46: public boolean onKeyDown(int keyCode, KeyEvent event) {
47: // TODO Auto-generated method stub
48: return super.onKeyDown(keyCode, event);
49: }
50:
51: @Override
52: public boolean onKeyUp(int keyCode, KeyEvent event) {
53: // TODO Auto-generated method stub
54: return super.onKeyUp(keyCode, event);
55: }
56:
57: @Override
58: protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
59: // TODO Auto-generated method stub
60: super.onMeasure(widthMeasureSpec, heightMeasureSpec);
61: }
62: public int getChartBackColor() {
63: return chartBackColor;
64: }
65: public void setChartBackColor(int chartBackColor) {
66: this.chartBackColor = chartBackColor;
67: }
68:
69:
70: }
Foe using this view on any activity layout use it as you are using other views
1: <?xml version="1.0" encoding="utf-8"?>
2: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3: android:orientation="vertical"
4: android:layout_width="fill_parent"
5: android:layout_height="fill_parent"
6: >
7: <view
8: class="bimbim.in.chart.ChartView"
9: android:id="@+id/note"
10: android:layout_width="fill_parent"
11: android:layout_height="fill_parent"
12: android:padding="10dip"
13: android:scrollbars="vertical"
14: android:fadingEdge="vertical" />
15: </LinearLayout>