Add custom view to xml layout

Question

I have this signature view, which allows me to mostly draw on the phone screen. Now I need to add this view as a background or use it as a widget in the xml layout, but I have no idea how to do this. So please, can someone help me. This is the signature view class that I have:

import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.Path; import android.graphics.RectF; import android.util.AttributeSet; import android.view.MotionEvent; import android.view.View; public class SignatureView extends View { private static final float STROKE_WIDTH = 5f; /** Need to track this so the dirty region can accommodate the stroke. **/ private static final float HALF_STROKE_WIDTH = STROKE_WIDTH / 2; private Paint paint = new Paint(); private Path path = new Path(); /** * Optimizes painting by invalidating the smallest possible area. */ private float lastTouchX; private float lastTouchY; private final RectF dirtyRect = new RectF(); public SignatureView(Context context, AttributeSet attrs, int background) { super(context, attrs); setBackgroundResource(background); paint.setAntiAlias(true); paint.setColor(Color.BLACK); paint.setStyle(Paint.Style.STROKE); paint.setStrokeJoin(Paint.Join.ROUND); paint.setStrokeWidth(STROKE_WIDTH); } public void setColor(int color){ paint.setColor(color); } /** * Erases the signature. */ public void clear() { path.reset(); // Repaints the entire view. invalidate(); } @Override protected void onDraw(Canvas canvas) { canvas.drawPath(path, paint); } @Override public boolean onTouchEvent(MotionEvent event) { float eventX = event.getX(); float eventY = event.getY(); switch (event.getAction()) { case MotionEvent.ACTION_DOWN: path.moveTo(eventX, eventY); lastTouchX = eventX; lastTouchY = eventY; // There is no end point yet, so don't waste cycles invalidating. return true; case MotionEvent.ACTION_MOVE: case MotionEvent.ACTION_UP: // Start tracking the dirty region. resetDirtyRect(eventX, eventY); // When the hardware tracks events faster than they are delivered, the // event will contain a history of those skipped points. int historySize = event.getHistorySize(); for (int i = 0; i < historySize; i++) { float historicalX = event.getHistoricalX(i); float historicalY = event.getHistoricalY(i); expandDirtyRect(historicalX, historicalY); path.lineTo(historicalX, historicalY); } // After replaying history, connect the line to the touch point. path.lineTo(eventX, eventY); break; default: // Log.("Ignored touch event: " + event.toString()); return false; } // Include half the stroke width to avoid clipping. invalidate( (int) (dirtyRect.left - HALF_STROKE_WIDTH), (int) (dirtyRect.top - HALF_STROKE_WIDTH), (int) (dirtyRect.right + HALF_STROKE_WIDTH), (int) (dirtyRect.bottom + HALF_STROKE_WIDTH)); lastTouchX = eventX; lastTouchY = eventY; return true; } /** * Called when replaying history to ensure the dirty region includes all * points. */ private void expandDirtyRect(float historicalX, float historicalY) { if (historicalX < dirtyRect.left) { dirtyRect.left = historicalX; } else if (historicalX > dirtyRect.right) { dirtyRect.right = historicalX; } if (historicalY < dirtyRect.top) { dirtyRect.top = historicalY; } else if (historicalY > dirtyRect.bottom) { dirtyRect.bottom = historicalY; } } /** * Resets the dirty region when the motion event occurs. */ private void resetDirtyRect(float eventX, float eventY) { // The lastTouchX and lastTouchY were set when the ACTION_DOWN // motion event occurred. dirtyRect.left = Math.min(lastTouchX, eventX); dirtyRect.right = Math.max(lastTouchX, eventX); dirtyRect.top = Math.min(lastTouchY, eventY); dirtyRect.bottom = Math.max(lastTouchY, eventY); } } 

and my main class:

 public class Draw extends Activity { DrawView drawView; SignatureView signature; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); // Set full screen view getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN); requestWindowFeature(Window.FEATURE_NO_TITLE); signature = new SignatureView(this, null,R.drawable.back); setContentView(signature); signature.requestFocus(); } public boolean onCreateOptionsMenu(Menu menu) { MenuInflater inflater = getMenuInflater(); inflater.inflate(R.menu.my_options_menu, menu); return true; } public boolean onOptionsItemSelected(MenuItem item) { switch (item.getItemId()) { case R.id.clear: signature.clear(); return true; case R.id.red: signature.setColor(Color.RED); return true; case R.id.blue: signature.setColor(Color.BLUE); return true; case R.id.yellow: signature.setColor(Color.YELLOW); return true; default: return super.onOptionsItemSelected(item); } } @Override public void onBackPressed() { this.finish(); super.onBackPressed(); } } 

Answer 1

You reference this in your XML layouts with the full name, for example com.example.myapp.SignatureView .

 <com.example.myapp.SignatureView android:id="@+id\my_id" android:layout_width="match_parent" android:layout_height="match_parent"> </com.example.myapp.SignatureView> 

You can also reference this in the code that is behind.

 SignatureView sv = (SignatureView)findViewById(R.id.my_id); sv.setColor(Color.RED); 

Answer 2

To add it to xml, you add a tag like this <com.example.SignatureView /> , where the material com.example is replaced with your package name. You can add options and sub-tabs as usual.