Saat ini saya ingin membagikan tentang tugas kampus dari mata kuliah "Mobile Programing" yang di jaga gawangi oleh Bapak Dody Sanjaya yang di bantu oleh teman kami Sapta.
Untuk tugas kali ini saya memilih untuk membuat aplikasi tentang menggambar menggunakan interaksi sentuhan pada layar android device.
Tanpa panjang lebar akan saya posting disini bagaimana proses pembuatannya.
Source code saya lihat dari: mobile.tutplus.com
hasil jadinya adalah sebagai berikut:
<LinearLayout 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"
android:background="#FFCCCCCC"
android:orientation="vertical"
tools:context=".MainActivity" >
<!-- Top Buttons -->
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_gravity="center"
android:orientation="horizontal" >
<ImageButton
android:id="@+id/new_btn"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:contentDescription="@string/start_new"
android:src="@drawable/new_pic" />
<ImageButton
android:id="@+id/draw_btn"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:contentDescription="@string/brush"
android:src="@drawable/brush" />
<ImageButton
android:id="@+id/erase_btn"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:contentDescription="@string/erase"
android:src="@drawable/eraser" />
<ImageButton
android:id="@+id/save_btn"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:contentDescription="@string/save"
android:src="@drawable/save" />
</LinearLayout>
<!-- Custom View -->
<com.andrew.uasmenggambar.DrawingView
android:id="@+id/drawing"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_marginBottom="3dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="3dp"
android:layout_weight="1"
android:background="#FFFFFFFF" />
<!-- Color Palette -->
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:orientation="vertical" >
<!-- Top Row -->
<LinearLayout
android:id="@+id/paint_colors"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageButton
android:layout_width="@dimen/large_brush"
android:layout_height="@dimen/large_brush"
android:layout_margin="2dp"
android:background="#FF660000"
android:contentDescription="@string/paint"
android:onClick="paintClicked"
android:src="@drawable/paint"
android:tag="#FF660000" />
<ImageButton
android:layout_width="@dimen/large_brush"
android:layout_height="@dimen/large_brush"
android:layout_margin="2dp"
android:background="#FFFF0000"
android:contentDescription="@string/paint"
android:onClick="paintClicked"
android:src="@drawable/paint"
android:tag="#FFFF0000" />
<ImageButton
android:layout_width="@dimen/large_brush"
android:layout_height="@dimen/large_brush"
android:layout_margin="2dp"
android:background="#FFFF6600"
android:contentDescription="@string/paint"
android:onClick="paintClicked"
android:src="@drawable/paint"
android:tag="#FFFF6600" />
<ImageButton
android:layout_width="@dimen/large_brush"
android:layout_height="@dimen/large_brush"
android:layout_margin="2dp"
android:background="#FFFFCC00"
android:contentDescription="@string/paint"
android:onClick="paintClicked"
android:src="@drawable/paint"
android:tag="#FFFFCC00" />
<ImageButton
android:layout_width="@dimen/large_brush"
android:layout_height="@dimen/large_brush"
android:layout_margin="2dp"
android:background="#FF009900"
android:contentDescription="@string/paint"
android:onClick="paintClicked"
android:src="@drawable/paint"
android:tag="#FF009900" />
<ImageButton
android:layout_width="@dimen/large_brush"
android:layout_height="@dimen/large_brush"
android:layout_margin="2dp"
android:background="#FF009999"
android:contentDescription="@string/paint"
android:onClick="paintClicked"
android:src="@drawable/paint"
android:tag="#FF009999" />
</LinearLayout>
<!-- Bottom Row -->
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageButton
android:layout_width="@dimen/large_brush"
android:layout_height="@dimen/large_brush"
android:layout_margin="2dp"
android:background="#FF0000FF"
android:contentDescription="@string/paint"
android:onClick="paintClicked"
android:src="@drawable/paint"
android:tag="#FF0000FF" />
<ImageButton
android:layout_width="@dimen/large_brush"
android:layout_height="@dimen/large_brush"
android:layout_margin="2dp"
android:background="#FF990099"
android:contentDescription="@string/paint"
android:onClick="paintClicked"
android:src="@drawable/paint"
android:tag="#FF990099" />
<ImageButton
android:layout_width="@dimen/large_brush"
android:layout_height="@dimen/large_brush"
android:layout_margin="2dp"
android:background="#FFFF6666"
android:contentDescription="@string/paint"
android:onClick="paintClicked"
android:src="@drawable/paint"
android:tag="#FFFF6666" />
<ImageButton
android:layout_width="@dimen/large_brush"
android:layout_height="@dimen/large_brush"
android:layout_margin="2dp"
android:background="#8a2be2"
android:contentDescription="@string/paint"
android:onClick="paintClicked"
android:src="@drawable/paint"
android:tag="#8a2be2" />
<ImageButton
android:layout_width="@dimen/large_brush"
android:layout_height="@dimen/large_brush"
android:layout_margin="2dp"
android:background="#FF787878"
android:contentDescription="@string/paint"
android:onClick="paintClicked"
android:src="@drawable/paint"
android:tag="#FF787878" />
<ImageButton
android:layout_width="@dimen/large_brush"
android:layout_height="@dimen/large_brush"
android:layout_margin="2dp"
android:background="#FF000000"
android:contentDescription="@string/paint"
android:onClick="paintClicked"
android:src="@drawable/paint"
android:tag="#FF000000" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
yang akan menghasilkan layout seperti berikut:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical" >
<ImageButton
android:id="@+id/small_brush"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:contentDescription="@string/sml"
android:src="@drawable/small" />
<ImageButton
android:id="@+id/medium_brush"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:contentDescription="@string/med"
android:src="@drawable/medium" />
<ImageButton
android:id="@+id/large_brush"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:contentDescription="@string/lrg"
android:src="@drawable/large" />
</LinearLayout>
dan menghasilkan layout :
Sedangkan untuk sourche Java ada 2 yaitu sourche untuk "DrawingView" dan "MainActivity"
Untuk main activity sbb:
package com.andrew.uasmenggambar;
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);
//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){
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("Membuat gambar baru");
newDialog.setMessage("Mulai membuat gambar baru (gambar lama anda akan terhapus)?");
newDialog.setPositiveButton("Oke", 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("Menyimpan gambar");
saveDialog.setMessage("Menyimpan gambar anda ke galeri?");
saveDialog.setPositiveButton("Oke", 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", "drawing");
if(imgSaved!=null){
Toast savedToast = Toast.makeText(getApplicationContext(),
"Gambar anda sudah tersimpan di galeri", Toast.LENGTH_SHORT);
savedToast.show();
}
else{
Toast unsavedToast = Toast.makeText(getApplicationContext(),
"Wah! Gambar anda tidak tersimpan...", Toast.LENGTH_SHORT);
unsavedToast.show();
}
drawView.destroyDrawingCache();
}
});
saveDialog.setNegativeButton("Batal", new DialogInterface.OnClickListener(){
public void onClick(DialogInterface dialog, int which){
dialog.cancel();
}
});
saveDialog.show();
}
}
}
Dan untuk DrawingView sebagai berikut:
package com.andrew.uasmenggambar;
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();
}
}
Untuk lebih jelasnya bisa kunjungi situsnya langsung ya...... di http://mobile.tutsplus.com/
Sampai jumpa di lain kesempatan.
