Android: Creating My First Custom View

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.

Override-implement method dialog

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>

Leave a Reply

Your email address will not be published. Required fields are marked *