Android-6 steps to teach you how to customize View

If you plan to completely customize a View, you need to implement the View class (all Android Views are implemented in this class) and implement the onMeasure(...) method to determine the size and the onDraw(...) method to confirm the drawing.

Customizing View is divided into 6 steps

***step

 public class SmileyView extends View {
    private Paint mCirclePaint;
    private Paint mEyeAndMouthPaint; 
 
 private float mCenterX;
 private float mCenterY;
 private float mRadius;
    private RectF mArcBounds = new RectF(); 
 
 public SmileyView(Context context) {
 this(context, null );
 } 
 
 public SmileyView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
 } 
 
 public SmileyView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
 initPaints();
 } 
 
    private void initPaints() {/* ... */} 
 
 @Override
    protected void onMeasure( int widthMeasureSpec, int heightMeasureSpec) {/* ... */} 
 
 @Override
    protected void onDraw(Canvas canvas) {/* ... */}
 }

2. Implement the paint brush class

There are two brushes in this article

 private void initPaints() {
    mCirclePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    mCirclePaint.setStyle(Paint.Style.FILL);
    mCirclePaint.setColor(Color.YELLOW);
    mEyeAndMouthPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    mEyeAndMouthPaint.setStyle(Paint.Style.STROKE);
    mEyeAndMouthPaint.setStrokeWidth(16 * getResources().getDisplayMetrics().density);
    mEyeAndMouthPaint.setStrokeCap(Paint.Cap.ROUND);
    mEyeAndMouthPaint.setColor(Color.BLACK);
 }

3. Override the onMeasure(…) method

Implementing this method tells the parent container how to abandon the custom View. You can determine the height and width of your View by providing measureSpecs. The following is a square. Confirm that its width and height are the same.

 @Override
 protected void onMeasure( int widthMeasureSpec, int heightMeasureSpec) {
 int w = MeasureSpec.getSize(widthMeasureSpec);
 int h = MeasureSpec.getSize(heightMeasureSpec); 
 
 int   size = Math.min (w, h) ;
    setMeasuredDimension( size , size );
 }

Notice:

This method requires at least one setMeasuredDimension(..) call, otherwise an IllegalStateException error will be reported.

4. Implement the onSizeChanged(…) method

This method is how you get the current width and height of the View. Here we calculate the center and radius.

 @Override
 protected void onSizeChanged( int w, int h, int oldw, int oldh) {
 mCenterX = w / 2f;
 mCenterY = h / 2f;
    mRadius = Math. min (w, h) / 2f;
 }

5. Implement the onDraw(…) method

This method provides how to draw the view, and the Canvas class it provides can be used for drawing.

 @Override
 protected void onDraw(Canvas canvas) {
 // draw face
    canvas.drawCircle(mCenterX, mCenterY, mRadius, mCirclePaint);
 // draw eyes
 float eyeRadius = mRadius / 5f;
 float eyeOffsetX = mRadius / 3f;
 float eyeOffsetY = mRadius / 3f;
    canvas.drawCircle(mCenterX - eyeOffsetX, mCenterY - eyeOffsetY, eyeRadius, mEyeAndMouthPaint);
    canvas.drawCircle(mCenterX + eyeOffsetX, mCenterY - eyeOffsetY, eyeRadius, mEyeAndMouthPaint);
 // draw mouth
 float mouthInset = mRadius /3f;
    mArcBounds.set (mouthInset, mouthInset, mRadius * 2 - mouthInset, mRadius * 2 - mouthInset) ;
    canvas.drawArc(mArcBounds, 45f, 90f, false , mEyeAndMouthPaint);
 }

6. Add your View

 <FrameLayout
    xmlns:android= "http://schemas.android.com/apk/res/android"  
    android:layout_width= "match_parent"  
    android:layout_height= "match_parent" > 
 
    <com.example.app.SmileyView
        android:layout_width= "match_parent"  
        android:layout_height= "match_parent" />
 </FrameLayout>

That’s it. Customizing View is not as difficult as you think.