Apr 4, 2015

cara membuat aplikasi menggambar (DrawingApp) di android


Assalamualaikum wr.wb sob...kali ini saya akan share cara membuat Drawing di android
langsung saja ikuti step by step nya:

1. Buat projet baru dengan nama "DrawingFun" atau terserah teman-teman


2. Ganti source code "activity_main.xml" dengan source code dibawah ini


 

 

  

  

  

  
 

 

 

 

 

  

  

   

   

   

   

   

   
  

  

  

   

   

   

   

   

   
  
 


3.create xml baru beri nama "brush_chooser.xml" copas sourcode dibawah ini


 

 

 

4.buka "MainActivity.java" copy paste source code dibawah ini
package com.example.drawingfun;

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;

/**
 * This is demo code to accompany the Mobiletuts+ tutorial series:
 * - Android SDK: Create a Drawing App
 * 
 * Setia budi
 *
 */
public class MainActivity extends Activity implements OnClickListener {

 //custom drawing view
 private DrawingView drawView;
 //buttons
 private ImageButton currPaint, drawBtn, eraseBtn, newBtn, saveBtn;
 //sizes
 private float smallBrush, mediumBrush, largeBrush;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);

  //get drawing view
  drawView = (DrawingView)findViewById(R.id.drawing);

  //get the palette and first color button
  LinearLayout paintLayout = (LinearLayout)findViewById(R.id.paint_colors);
  currPaint = (ImageButton)paintLayout.getChildAt(0);
  currPaint.setImageDrawable(getResources().getDrawable(R.drawable.paint_pressed));

  //sizes from dimensions
  smallBrush = getResources().getInteger(R.integer.small_size);
  mediumBrush = getResources().getInteger(R.integer.medium_size);
  largeBrush = getResources().getInteger(R.integer.large_size);

  //draw button
  drawBtn = (ImageButton)findViewById(R.id.draw_btn);
  drawBtn.setOnClickListener(this);

  //set initial size
  drawView.setBrushSize(mediumBrush);

  //erase button
  eraseBtn = (ImageButton)findViewById(R.id.erase_btn);
  eraseBtn.setOnClickListener(this);

  //new button
  newBtn = (ImageButton)findViewById(R.id.new_btn);
  newBtn.setOnClickListener(this);

  //save button
  saveBtn = (ImageButton)findViewById(R.id.save_btn);
  saveBtn.setOnClickListener(this);
 }

 @Override
 public boolean onCreateOptionsMenu(Menu menu) {
  // Inflate the menu; this adds items to the action bar if it is present.
  getMenuInflater().inflate(R.menu.main, menu);
  return true;
 }

 //user clicked paint
 public void paintClicked(View view){
  //use chosen color

  //set erase false
  drawView.setErase(false);
  drawView.setBrushSize(drawView.getLastBrushSize());

  if(view!=currPaint){
   ImageButton imgView = (ImageButton)view;
   String color = view.getTag().toString();
   drawView.setColor(color);
   //update ui
   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){
   //draw button clicked
   final Dialog brushDialog = new Dialog(this);
   brushDialog.setTitle("Brush size:");
   brushDialog.setContentView(R.layout.brush_chooser);
   //listen for clicks on size buttons
   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();
    }
   });
   //show and wait for user interaction
   brushDialog.show();
  }
  else if(view.getId()==R.id.erase_btn){
   //switch to erase - choose size
   final Dialog brushDialog = new Dialog(this);
   brushDialog.setTitle("Eraser size:");
   brushDialog.setContentView(R.layout.brush_chooser);
   //size buttons
   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){
   //new button
   AlertDialog.Builder newDialog = new AlertDialog.Builder(this);
   newDialog.setTitle("New drawing");
   newDialog.setMessage("Start new drawing (you will lose the current drawing)?");
   newDialog.setPositiveButton("Yes", new DialogInterface.OnClickListener(){
    public void onClick(DialogInterface dialog, int which){
     drawView.startNew();
     dialog.dismiss();
    }
   });
   newDialog.setNegativeButton("Cancel", new DialogInterface.OnClickListener(){
    public void onClick(DialogInterface dialog, int which){
     dialog.cancel();
    }
   });
   newDialog.show();
  }
  else if(view.getId()==R.id.save_btn){
   //save drawing
   AlertDialog.Builder saveDialog = new AlertDialog.Builder(this);
   saveDialog.setTitle("Simpan Gambar");
   saveDialog.setMessage("Simpan Gambar di Gallery?");
   saveDialog.setPositiveButton("Yes", new DialogInterface.OnClickListener(){
    public void onClick(DialogInterface dialog, int which){
     //save drawing
     drawView.setDrawingCacheEnabled(true);
     //attempt to save
     String imgSaved = MediaStore.Images.Media.insertImage(
       getContentResolver(), drawView.getDrawingCache(),
       UUID.randomUUID().toString()+".png", "drawing");
     //feedback
     if(imgSaved!=null){
      Toast savedToast = Toast.makeText(getApplicationContext(), 
        "Gambar Telah Disimpan di Gallery!", Toast.LENGTH_SHORT);
      savedToast.show();
     }
     else{
      Toast unsavedToast = Toast.makeText(getApplicationContext(), 
        "Oops! Gambar Tidak Tersimpan.", Toast.LENGTH_SHORT);
      unsavedToast.show();
     }
     drawView.destroyDrawingCache();
    }
   });
   saveDialog.setNegativeButton("Cancel", new DialogInterface.OnClickListener(){
    public void onClick(DialogInterface dialog, int which){
     dialog.cancel();
    }
   });
   saveDialog.show();
  }
 }

}
5. create java baru beri nama "DrawingView" kemudian copas source code dibawah ini
package com.example.drawingfun;


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;

/**
 * This is demo code to accompany the Mobiletuts+ tutorial series:
 * - Android SDK: Create a Drawing App
 * 
 * setia budi

 */
public class DrawingView extends View {

 //drawing path
 private Path drawPath;
 //drawing and canvas paint
 private Paint drawPaint, canvasPaint;
 //initial color
 private int paintColor = 0xFFFFFFFF;
 //canvas
 private Canvas drawCanvas;
 //canvas bitmap
 private Bitmap canvasBitmap;
 //brush sizes
 private float brushSize, lastBrushSize;
 //erase flag
 private boolean erase=false;

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

 //setup drawing
 private void setupDrawing(){

  //prepare for drawing and setup paint stroke properties
  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);
 }

 //size assigned to view
 @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);
 }

 //draw the view - will be called after touch event
 @Override
 protected void onDraw(Canvas canvas) {
  canvas.drawBitmap(canvasBitmap, 0, 0, canvasPaint);
  canvas.drawPath(drawPath, drawPaint);
 }

 //register user touches as drawing action
 @Override
 public boolean onTouchEvent(MotionEvent event) {
  float touchX = event.getX();
  float touchY = event.getY();
  //respond to down, move and up events
  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;
  }
  //redraw
  invalidate();
  return true;

 }

 //update color
 public void setColor(String newColor){
  invalidate();
  paintColor = Color.parseColor(newColor);
  drawPaint.setColor(paintColor);
 }

 //set brush size
 public void setBrushSize(float newSize){
  float pixelAmount = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 
    newSize, getResources().getDisplayMetrics());
  brushSize=pixelAmount;
  drawPaint.setStrokeWidth(brushSize);
 }

 //get and set last brush size
 public void setLastBrushSize(float lastSize){
  lastBrushSize=lastSize;
 }
 public float getLastBrushSize(){
  return lastBrushSize;
 }

 //set erase true or false
 public void setErase(boolean isErase){
  erase=isErase;
  if(erase) drawPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
  else drawPaint.setXfermode(null);
 }

 //start new drawing
 public void startNew(){
  drawCanvas.drawColor(0, PorterDuff.Mode.CLEAR);
  invalidate();
 }
}



hasil Screenshot :



semoga bermanfaat dan tunggu aplikasi lainnya sobat blogger :)

About the Author

Setia Budi

Author & Editor

Terima kasih sudah berkunjung :)

Post a Comment

 
Setia Budi © 2015 - Designed by Templateism