DZone
Mobile Zone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
  • Refcardz
  • Trend Reports
  • Webinars
  • Zones
  • |
    • Agile
    • AI
    • Big Data
    • Cloud
    • Database
    • DevOps
    • Integration
    • IoT
    • Java
    • Microservices
    • Open Source
    • Performance
    • Security
    • Web Dev
DZone > Mobile Zone > Android Example: Develop Drawing and Graphic Apps

Android Example: Develop Drawing and Graphic Apps

Boris Lam user avatar by
Boris Lam
·
Feb. 19, 15 · Mobile Zone · Tutorial
Like (4)
Save
Tweet
19.03K Views

Join the DZone community and get the full member experience.

Join For Free

In this example, we will show you how to create a simple drawing pad app in Android. You can change your pen style and color in the application. You can also saved your drawing after painting. The application mainly make use of the android.graphics package. We can see the screen shoot and source code here:

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.easyinfogeek.drawingpad"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="17" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="com.easyinfogeek.drawingpad.MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>


Activity class and View Class
MainActivity.java

package com.easyinfogeek.drawingpad;

import android.app.Activity;
import android.app.AlertDialog;
import android.content.DialogInterface;
import android.content.DialogInterface.OnClickListener;
import android.graphics.Color;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.SubMenu;
import android.view.View;
import android.view.Window;
import android.widget.SeekBar;
import android.widget.SeekBar.OnSeekBarChangeListener;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends Activity {


 private DrawPadView hbView;

 private AlertDialog dialog;
 private View dialogView;
 private TextView shouWidth;
 private SeekBar widthSb;
 private int paintWidth;

 private void initView(){
  dialogView = getLayoutInflater().inflate(R.layout.dialog_width_set, null);
  shouWidth = (TextView) dialogView.findViewById(R.id.textView1);
  widthSb = (SeekBar) dialogView.findViewById(R.id.seekBar1);
  widthSb.setOnSeekBarChangeListener(new OnSeekBarChangeListener() {

   @Override
   public void onStopTrackingTouch(SeekBar seekBar) {

   }

   @Override
   public void onStartTrackingTouch(SeekBar seekBar) {

   }

   @Override
   public void onProgressChanged(SeekBar seekBar, int progress,
     boolean fromUser) {
    shouWidth.setText("Current Width:"+(progress+1));
    paintWidth = progress+1;
   }
  });
  hbView = (DrawPadView)findViewById(R.id.drawPadView1);
  dialog = new AlertDialog.Builder(this).setIcon(android.R.drawable.ic_dialog_info).setTitle("Set the size of your Pen").
    setView(dialogView).setPositiveButton("Confirm", new OnClickListener() {

     @Override
     public void onClick(DialogInterface dialog, int which) {
      hbView.setPaintWidth(paintWidth);
     }
    }).setNegativeButton("Cancel", null).create();
 }

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);

  requestWindowFeature(Window.FEATURE_NO_TITLE);
  setContentView(R.layout.activity_main);
  initView();
 }

 @Override
 public boolean onCreateOptionsMenu(Menu menu) {
  SubMenu colorSm = menu.addSubMenu(1, 1, 1, "Select Pen color");
  colorSm.add(2, 200, 200, "red");
  colorSm.add(2, 210, 210, "green");
  colorSm.add(2, 220, 220, "blue");
  colorSm.add(2, 230, 230, "purple");
  colorSm.add(2, 240, 240, "yellow");
  colorSm.add(2, 250, 250, "black");
  menu.add(1, 2, 2, "Set pen size");
  SubMenu widthSm = menu.addSubMenu(1, 3, 3, "Set Pen style");
  widthSm.add(3, 300, 300, "Stoke");
  widthSm.add(3, 301, 301, "Fill ");
  menu.add(1, 4, 4, "Clear Drawing");
  menu.add(1, 5, 5, "Save drawing");
  menu.add(1, 6, 6, "Exit");
  return true;
 }

 @Override
 public boolean onOptionsItemSelected(MenuItem item) {
  int index = item.getItemId();
  switch(index){
  case 200:
   hbView.setColor(Color.RED);
   break;
  case 210:
   hbView.setColor(Color.GREEN);
   break;
  case 220:
   hbView.setColor(Color.BLUE);
   break;
  case 230:
   hbView.setColor(Color.MAGENTA);
   break;
  case 240:
   hbView.setColor(Color.YELLOW);
   break;
  case 250:
   hbView.setColor(Color.BLACK);
   break;
  case 2:
   dialog.show();
   break;
  case 300:
   hbView.setStyle(DrawPadView.PEN);
   break;
  case 301:
   hbView.setStyle(DrawPadView.PAIL);
   break;
  case 4:
   hbView.clearScreen();
   break;
  case 5:
   if(SaveViewUtil.saveScreen(hbView)){
    Toast.makeText(this, "Save drawing succeed!", 0).show();
   }else{
    Toast.makeText(this, "Save drawing fail. Please check your SD card", 0).show();
   }
   break;
  case 6:
   finish();
   break;
  }
  return true;
 }


}


DrawPadView.java

package com.easyinfogeek.drawingpad;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Bitmap.Config;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;



public class DrawPadView extends View {


 private Bitmap cacheBitmap;

 private Canvas cacheCanvas;

 private Paint paint;

 private Paint BitmapPaint;

 private Path path;

 private int height;

 private int width;

 /** Last saved X-coordinate */
 private float pX;
 /** Last saved Y-coordinate*/
 private float pY;

 /** Initial color */
 private int paintColor = Color.RED;

 private static Paint.Style paintStyle = Paint.Style.STROKE;
 /** Paint Point size */
 private static int paintWidth = 3;

 private Canvas canvas;


 /** get the height and width */
 @Override
 protected void onSizeChanged(int w, int h, int oldw, int oldh) {
  height = h;
  width = w;
  init();
 }

 private void init(){
  cacheBitmap = Bitmap.createBitmap(width, height, Config.ARGB_8888);
  cacheCanvas = new Canvas(cacheBitmap);
  paint = new Paint(Paint.ANTI_ALIAS_FLAG);
  path = new Path();
  BitmapPaint = new Paint();
  updatePaint();
 }

 private void updatePaint(){
  paint.setColor(paintColor);
  paint.setStyle(paintStyle);
  paint.setStrokeWidth(paintWidth);
 }

 public DrawPadView(Context context, AttributeSet attrs) {
  super(context, attrs);
 }

 public DrawPadView(Context context){
  super(context);
 }

 @Override
 public boolean onTouchEvent(MotionEvent event) {
  int action = event.getAction();
  switch (action) {
  case MotionEvent.ACTION_DOWN:
   path.moveTo(event.getX(), event.getY());
   pX = event.getX();
   pY = event.getY();
   break;
  case MotionEvent.ACTION_MOVE:
   path.quadTo(pX, pY, event.getX(), event.getY());
   pX = event.getX();
   pY = event.getY();
   break;
  case MotionEvent.ACTION_UP:
   cacheCanvas.drawPath(path, paint);
   path.reset();
   break;
  }
  invalidate();

  return true;
 }

 @Override
 protected void onDraw(Canvas canvas) {
  this.canvas = canvas;
  BitmapPaint = new Paint();
  canvas.drawBitmap(cacheBitmap, 0,0, BitmapPaint);
  canvas.drawPath(path, paint);

 }


 public void setColor(int color){
  paintColor = color;
  updatePaint();
 }


 public void setPaintWidth(int width){
  paintWidth = width;
  updatePaint();
 }

 public static final int PEN = 1;
 public static final int PAIL = 2;


 public void setStyle(int style){
  switch(style){
  case PEN:
   paintStyle = Paint.Style.STROKE;
   break;
  case PAIL:
   paintStyle = Paint.Style.FILL;
   break;
  }
  updatePaint();
 }

 /** clear your drawing*/
 public void clearScreen(){
  if(canvas != null){
   Paint backPaint = new Paint();
   backPaint.setColor(Color.WHITE);
   canvas.drawRect(new Rect(0, 0, width, height), backPaint);
   cacheCanvas.drawRect(new Rect(0, 0, width, height), backPaint);
  }
  invalidate();
 }

}


Other XML file for layout:
activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    <com.example.huatuban.DrawPadView
        android:id="@+id/drawPadView1"
        android:background="#ffffffff"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</RelativeLayout>


menu_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="setColor" />

    <RadioButton
        android:id="@+id/radioButton1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="blue"
        android:button="@null"
        android:background="@drawable/selector_blueselector"
         />

    <Button android:background="@drawable/menu_blue"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
        android:text="hehe"/>

</LinearLayout>


dialog_width_set.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Set the width" />

    <SeekBar
        android:id="@+id/seekBar1"
        android:layout_width="match_parent"
        android:max="9"
        android:progress="2"
        android:layout_height="wrap_content" />

</LinearLayout>


Utility Class for save image
SaveViewUtil.java

package com.easyinfogeek.drawingpad;

import java.io.File;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;

import android.graphics.Bitmap;
import android.graphics.Bitmap.CompressFormat;
import android.os.Environment;
import android.view.View;

public class SaveViewUtil {

 private static final File rootDir = new File(Environment.getExternalStorageDirectory()+File.separator+"huaban/");

 /** Save picture to file */
 public static boolean saveScreen(View view){
  //determine if SDCARD is available
  if(!Environment.MEDIA_MOUNTED.equals(Environment.getExternalStorageState())){
   return false;
  }
  if(!rootDir.exists()){
   rootDir.mkdir();
  }
  view.setDrawingCacheEnabled(true);
  view.buildDrawingCache();
  Bitmap bitmap = view.getDrawingCache();
  try {
   bitmap.compress(CompressFormat.JPEG, 100, new FileOutputStream(new File(rootDir,System.currentTimeMillis()+".jpg")));
   return true;
  } catch (FileNotFoundException e) {
   e.printStackTrace();
   return false;
  }finally{
   view.setDrawingCacheEnabled(false);
   bitmap = null;
  }
 }
}



app Android (robot)

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Use Lambda Function URL To Write a Serverless App Backed by DynamoDB
  • Querying Kafka Topics Using Presto
  • How to Configure Git in Eclipse IDE
  • A Simple Guide to Heaps, Stacks, References, and Values in JavaScript

Comments

Mobile Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • MVB Program
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends:

DZone.com is powered by 

AnswerHub logo