Cara membuat aplikasi canvas paint dengan Eclipse

Bagi yang lagi belajar buat aplikasi Android dengan Eclipse, ini ada sedikit ilmu yaitu membuat aplikasi menggambar dengan brush (aplikasi paint). 

Berikut ini caranya, cekidot:

1. Buka Eclipse
2. Buat android Aplication Project dengan memilih menu File-New-Android aplication Project. Beri nama Application Name sesuai dengan keinginan, Project name dan Package Name akan menyesuaikan. 
3. Atur Minimum Required SDK (sesuaikan dengan versi device jika di-run dengan HP atau gadget). Target SDK dan Compile with juga diatur versinya.
4. Untuk pengaturan theme dibiarkan saja "Holo Light Dark Action Bar". 
5. Next
6. Pada Configure Project, biarkan pengaturannya default. Pilih next
7. Dibagian Configure Launcher Icon silahkan setting untuk iconnya. Image file berfungsi untuk meng-set icon dengan image milik sendiri (bukan lambang android). Anda juga dapat menambahkan shape backgroud dan mengatur warnanya sesuai dengan keinginan. Next.
8. Pada bagian Cretae activity langsung saja next.
9. Blank Activity biarkan saja Activity Name dan Layout Name sesuai defaultnya. Finish.
10. Pada bagian MainActivity.java ketik script sebagai berikut :

package com.magiccolor; 

import java.util.UUID; 
import android.os.Bundle;
import android.provider.MediaStore; 
import android.app.Activity; 
import android.app.AlertDialog; 
import android.app.Dialog; 
import android.content.DialogInterface; 
import android.view.Menu; 
import android.view.View; 
import android.view.View.OnClickListener; 
import android.widget.ImageButton; 
import android.widget.LinearLayout; 
import android.widget.Toast; 

public class MainActivity extends Activity implements OnClickListener { private DrawingView drawView; 
private ImageButton currPaint, drawBtn, eraseBtn, newBtn, saveBtn; 
private float smallBrush, mediumBrush, largeBrush; 

@Override 
protected void onCreate(Bundle savedInstanceState) 
{ 
super.onCreate(savedInstanceState); 
setContentView(R.layout.activity_main); 
drawView = (DrawingView)findViewById(R.id.drawing);
 LinearLayout paintLayout = (LinearLayout)findViewById(R.id.paint_colors); currPaint = (ImageButton)paintLayout.getChildAt(0); currPaint.setImageDrawable(getResources().getDrawable (R.drawable.paint_pressed));
 smallBrush = getResources().getInteger(R.integer.small_size); 
 mediumBrush = getResources().getInteger(R.integer.medium_size); 
 largeBrush = getResources().getInteger(R.integer.large_size); 
 drawBtn = (ImageButton)findViewById(R.id.draw_btn); drawBtn.setOnClickListener(this);
 drawView.setBrushSize(mediumBrush); 
eraseBtn = (ImageButton)findViewById(R.id.erase_btn); eraseBtn.setOnClickListener(this); 
newBtn = (ImageButton)findViewById(R.id.new_btn); newBtn.setOnClickListener(this); 
 saveBtn = (ImageButton)findViewById(R.id.save_btn); saveBtn.setOnClickListener(this);
 } 
@Override 
 public boolean onCreateOptionsMenu(Menu menu) 
{
 getMenuInflater().inflate(R.menu.main, menu); 
return true;
 } 
 public void paintClicked(View view)
{
 drawView.setErase(false); drawView.setBrushSize(drawView.getLastBrushSize());
 if(view!=currPaint)
     {
 ImageButton imgView = (ImageButton)view; 
String color = view.getTag().toString(); 
drawView.setColor(color); imgView.setImageDrawable(getResources().getDrawable (R.drawable.paint_pressed)); currPaint.setImageDrawable(getResources().getDrawable (R.drawable.paint)); currPaint=(ImageButton)view;
      } 
}
 @Override 
public void onClick(View view){ if(view.getId()==R.id.draw_btn)
{
 final Dialog brushDialog = new Dialog(this);
 brushDialog.setTitle("Ukuran Kuas:"); brushDialog.setContentView(R.layout.brush_chooser); 
 ImageButton smallBtn = (ImageButton)brushDialog.findViewById (R.id.small_brush); 
 smallBtn.setOnClickListener(new OnClickListener()
{ 
 @Override 
public void onClick(View v) 
     {
 drawView.setErase(false); 
drawView.setBrushSize(smallBrush); 
 drawView.setLastBrushSize(smallBrush); 
brushDialog.dismiss();
    }
 });
 ImageButton mediumBtn = (ImageButton)brushDialog.findViewById (R.id.medium_brush); 
mediumBtn.setOnClickListener(new OnClickListener()
     {
 @Override
 public void onClick(View v)
        { 
drawView.setErase(false); 
drawView.setBrushSize(mediumBrush); drawView.setLastBrushSize(mediumBrush); 
brushDialog.dismiss();
 } 
 }); 
ImageButton largeBtn = (ImageButton)brushDialog.findViewById (R.id.large_brush); 
largeBtn.setOnClickListener(new OnClickListener()
{ 
 @Override
 public void onClick(View v)
     { 
drawView.setErase(false);
 drawView.setBrushSize(largeBrush); 
drawView.setLastBrushSize(largeBrush);
 brushDialog.dismiss(); } }); brushDialog.show();
 } 
else if
(view.getId()==R.id.erase_btn){ final Dialog brushDialog = new Dialog(this); brushDialog.setTitle("Ukuran Penghapus:"); brushDialog.setContentView(R.layout.brush_chooser); 
 ImageButton smallBtn = (ImageButton)brushDialog.findViewById (R.id.small_brush);
 smallBtn.setOnClickListener(new OnClickListener()
{
 @Override 
public void onClick(View v) { drawView.setErase(true); drawView.setBrushSize(smallBrush);
 brushDialog.dismiss();
 }
 });
 ImageButton mediumBtn = (ImageButton)brushDialog.findViewById(R.id.medium_brush); mediumBtn.setOnClickListener(new OnClickListener()
{
 @Override public void onClick(View v) 
{ 
drawView.setErase(true); 
 drawView.setBrushSize(mediumBrush); 
 brushDialog.dismiss();
 } 
}); 
ImageButton largeBtn = (ImageButton)brushDialog.findViewById(R.id.large_brush); largeBtn.setOnClickListener(new OnClickListener()
{ 
 @Override 
public void onClick(View v) { drawView.setErase(true); drawView.setBrushSize(largeBrush); brushDialog.dismiss();
 } 
});
 brushDialog.show();
 } 
else if
(view.getId()==R.id.new_btn)
{ 
AlertDialog.Builder newDialog = new AlertDialog.Builder(this); newDialog.setTitle("Gambar baru"); 
 newDialog.setMessage("Gambar baru (anda akan kehilangan gambar)?"); newDialog.setPositiveButton("Ya", new DialogInterface.OnClickListener()
{ 
public void onClick(DialogInterface dialog, int which)
{ 
drawView.startNew(); 
 dialog.dismiss(); 
} 
});
 newDialog.setNegativeButton("Batal", new DialogInterface.OnClickListener()
{ public void onClick(DialogInterface dialog, int which)
{ dialog.cancel(); } }); newDialog.show();
 } 
else if
(view.getId()==R.id.save_btn)
{ 
 AlertDialog.Builder saveDialog = new AlertDialog.Builder(this); saveDialog.setTitle("Simpan Gambar"); 
 saveDialog.setMessage("Anda ingin menyimpan gambar di Galeri?"); saveDialog.setPositiveButton("Ya", new DialogInterface.OnClickListener()
{ 
public void onClick(DialogInterface dialog, int which)
{
 drawView.setDrawingCacheEnabled(true); 
String imgSaved = MediaStore.Images.Media.insertImage( getContentResolver(),drawView.getDrawingCache(), UUID.randomUUID().toString()+".png", "gambar");
 if
(imgSaved!=null){ Toast savedToast = Toast.makeText(getApplicationContext(), "Gambar tersimpan di Galeri!", Toast.LENGTH_SHORT); 
savedToast.show();
 } 
 else
{ 
 Toast unsavedToast = Toast.makeText(getApplicationContext(), "Oops! Gambar tidak dapat disimpan", Toast.LENGTH_SHORT); unsavedToast.show(); 
} 
drawView.destroyDrawingCache();
 } 
 }); 
saveDialog.setNegativeButton("Batal", new DialogInterface.OnClickListener()
{
 public void onClick(DialogInterface dialog, int which){ dialog.cancel(); 
 }
 }); 
saveDialog.show(); 
 }
 } 

11.Buat sebuah MainActivity.java lagi. Rubah namanya menjadi DrawingView.java. Ketika   script sebagai berikut: 

package com.magiccolor;
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.graphics.PorterDuff; 
import android.graphics.PorterDuffXfermode; 
import android.util.AttributeSet; 
import android.util.TypedValue; 
import android.view.MotionEvent; 
import android.view.View; 

public class DrawingView extends View 
{ 
private Path drawPath; 
private Paint drawPaint, canvasPaint; 
private int paintColor = 0xFF660000; 
 private Canvas drawCanvas; 
 private Bitmap canvasBitmap; 
private float brushSize, lastBrushSize; 
private boolean erase=false; 
public DrawingView(Context context, AttributeSet attrs)
{
 super(context, attrs); 
setupDrawing(); 
} 
 private void setupDrawing(){ brushSize = getResources().getInteger(R.integer.medium_size); 
lastBrushSize = brushSize; drawPath = new Path(); 
drawPaint = new Paint(); 
drawPaint.setColor(paintColor); 
drawPaint.setAntiAlias(true); 
drawPaint.setStrokeWidth(brushSize); drawPaint.setStyle(Paint.Style.STROKE); drawPaint.setStrokeJoin(Paint.Join.ROUND); drawPaint.setStrokeCap(Paint.Cap.ROUND); 
canvasPaint = new Paint(Paint.DITHER_FLAG);
 }
 @Override 
protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); 
 canvasBitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888); drawCanvas = new Canvas(canvasBitmap);
 }
 @Override 
protected void onDraw(Canvas canvas)
 { 
 canvas.drawBitmap(canvasBitmap, 0, 0, canvasPaint); canvas.drawPath(drawPath, drawPaint); 
 } 
@Override 
public boolean onTouchEvent(MotionEvent event)
 {
 float touchX = event.getX(); 
float touchY = event.getY(); 
switch (event.getAction()) 
{
 case MotionEvent.ACTION_DOWN: drawPath.moveTo(touchX, touchY); break; 
case MotionEvent.ACTION_MOVE: drawPath.lineTo(touchX, touchY); 
break; 
 case MotionEvent.ACTION_UP: drawPath.lineTo(touchX, touchY); drawCanvas.drawPath(drawPath, drawPaint); 
drawPath.reset(); 
break; 
default: return false;
 } 
 invalidate(); 
return true;
 }
 public void setColor(String newColor){ invalidate(); 
paintColor = Color.parseColor(newColor); 
drawPaint.setColor(paintColor);
 }
 public void setBrushSize(float newSize)
{
 float pixelAmount = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, newSize, getResources().getDisplayMetrics()); 
brushSize=pixelAmount; 
drawPaint.setStrokeWidth(brushSize);
 } 
public void setLastBrushSize(float lastSize){ lastBrushSize=lastSize;
 } 
public float getLastBrushSize()
{
 return lastBrushSize;
 }
 public void setErase(boolean isErase){ erase=isErase;
 if
(erase) drawPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR)); 
else drawPaint.setXfermode(null);
 } 
public void startNew()
{ 
drawCanvas.drawColor(0, PorterDuff.Mode.CLEAR); 
invalidate();
 }
 } ; 

12.Pada Activity-main.xml ketika scipt sebagai berikut : (contoh script silahkan didownload).
13.Buat sebuah Activity_main.xml lagi dan rubah namanya menjadi brush_chooser. Ketikscript sebagai berikut : (contoh script silahkan didownload).
14. Untuk menambahkan background pada aplikasi paintnya. Maka copy gambar yang telah disiapkan sebagai background lalu paste pada res-drawable-hdpi.
15. Run Aplikasi yang telah dibuat. 

Link download script lengkapnya 


Sumber: Dari berbagai sumber