Skip to main content

Simple drawing example in Android

This post is a simple drawing example using Canvas, BitMap, Paint and Path classes from Android.
Code:

MainActivity.java

import java.util.ArrayList;

import android.app.Activity;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup.LayoutParams;
import android.widget.LinearLayout;

public class DrwaingActivity extends Activity {

 View mView; 
 private Paint mPaint;
 
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  LinearLayout layout = (LinearLayout) findViewById(R.id.myDrawing);
  mView = new DrawingView(this);
  layout.addView(mView, new LayoutParams(
    LinearLayout.LayoutParams.MATCH_PARENT,
    LinearLayout.LayoutParams.MATCH_PARENT));
  init(); 
 }

 private void init() {
  mPaint = new Paint();
  mPaint.setDither(true);
  mPaint.setColor(0xFFFFFF00);
  mPaint.setStyle(Paint.Style.STROKE);
  mPaint.setStrokeJoin(Paint.Join.ROUND);
  mPaint.setStrokeCap(Paint.Cap.ROUND);
  mPaint.setStrokeWidth(3);
 }

 class DrawingView extends View {
  private Path path;
  private Bitmap mBitmap;
  private Canvas mCanvas;

  public DrawingView(Context context) {
   super(context);
   path = new Path();
   mBitmap = Bitmap.createBitmap(820, 480, Bitmap.Config.ARGB_8888);
   mCanvas = new Canvas(mBitmap);
   this.setBackgroundColor(Color.BLACK);
  }

  private ArrayList<PathWithPaint> _graphics1 = new ArrayList<PathWithPaint>();

  @Override
  public boolean onTouchEvent(MotionEvent event) {
   PathWithPaint pp = new PathWithPaint();
   mCanvas.drawPath(path, mPaint);
   if (event.getAction() == MotionEvent.ACTION_DOWN) {
    path.moveTo(event.getX(), event.getY());
    path.lineTo(event.getX(), event.getY());
   } else if (event.getAction() == MotionEvent.ACTION_MOVE) {
    path.lineTo(event.getX(), event.getY());
    pp.setPath(path);
    pp.setmPaint(mPaint);
    _graphics1.add(pp);
   }
   invalidate();
   return true;
  }

  @Override
  protected void onDraw(Canvas canvas) {
   super.onDraw(canvas);
   if (_graphics1.size() > 0) {
    canvas.drawPath(
      _graphics1.get(_graphics1.size() - 1).getPath(),
      _graphics1.get(_graphics1.size() - 1).getmPaint());
   }
  }
 }
}


MainLayout.java

import android.graphics.Paint;
import android.graphics.Path;

public class PathWithPaint {
 private Path path;

 public Path getPath() {
  return path;
 }

 public void setPath(Path path) {
  this.path = path;
 }

 private Paint mPaint;

 public Paint getmPaint() {
  return mPaint;
 }

 public void setmPaint(Paint mPaint) {
  this.mPaint = mPaint;
 }
}


activity_main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/myDrawing"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin" >

</LinearLayout>


Sample Screen Shot


Drawing example with Color Picker



I hope this post is useful. kindly share your feedback as comment here.


Thank You



Comments

Popular posts from this blog

Simple example of using Spinner in Kotlin | Android

Though Kotlin has lot massive features to speedup the development time, here is the simple way of using Spinner in Android. In Kotlin we don't need to declare and initialize Spinner. We can simply access the id of Spinner from xml. Ex : import android.os.Bundle import android.support.v7.app.AppCompatActivity import android.view.View import android.widget.AdapterView import android.widget.ArrayAdapter import android.widget.Toast import android.widget.Toast.LENGTH_LONG import kotlinx.android.synthetic.main.activity_main.* class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) //String array. val myStrings = arrayOf("One", "Two", "Three", "Four", "Five") //Adapter for spinner mySpinner.adapter = ArrayAdapter(this, android.R.layout.simple_spinner_dropdown_i...

Simple example of Navigation view on both side in Android

Hi guys, you can use NavigationView on both side if you want side menu in both left and right side in Android as following. Your drawer layout will be &lt?xml version="1.0" encoding="utf-8"?&gt &ltandroid.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/drawer_layout" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" tools:openDrawer="start"&gt &ltinclude layout="@layout/app_bar_main" android:layout_width="match_parent" android:layout_height="match_parent" /&gt &ltandroid.support.design.widget.NavigationView android:id="@+id/nav_view" ...

Simple RecyclerView example with filter option in Android

Hi Guys, Maybe you all are expert in terms of using RecyclerView in android. This blog is simple example for using filter option with RecyclerView adapter. As for now you will instantiate RecyclerView and set the adapter to RecyclerView as following way. RecyclerView list = (RecyclerView) findViewById(R.id.list); list.setLayoutManager(new LinearLayoutManager(this)); list.setHasFixedSize(true); ArrayList&ltNumber&gt numbers = new ArrayList&lt&gt(); String ONEs[] = {"ZERO", "ONE", "TWO", "THREE", "FOUR", "FIVE", "SIX", "SEVEN", "EIGHT", "NINE", "TEN"}; String TENs[] = {"ZERO", "TEN", "TWENTY", "THIRTY", "FOURTY", "FIFTY", "SIXTY", "SEVENTY", "EIGHTY", "NINETY", "HUNDRED"}; String HUNDREDS[] = {"ZERO", "HUNDRED", "TWO HUND...