• Kali ini saya mendapat tugas membuat aplikasi android(apk) dengan topik Graphic & Animation sehingga saya membuat aplikasi painting simple yang saya beri judul Simple Drawing Apps (drawingApp.apk)

    [wptab name='Tutorial']

    Aplikasi ini memiliki 6 fitur yaitu :

  • dapat membuat halaman drawing baru
  • dapat menggunakan tools brush untuh menggambar
  • dapat mengganti ukuran brush
  • dapat menghapus hasil gambar
  • dapat menyimpan hasil drawing ke dalam storage local
  • dpaat mengganti warna
  • drawingApp

    Tutorial untuk membuat aplikasi ini cukup terbilang rumit jadi saya utamakan kepada source code fungsi utama nya :

  • Pertama kita buat project baru File –> New–> Android Application Project lalu kita isi seperti dibawah ini sampai selesai dan halaman baru project siap di coding
  • sipyukgambar2yukgambar3yukgambar4yukgambar5

    2.¬† Buka file activity_main.xml pada folder res –> layout. Pada File XML ini kita akan mendesain tampilan intarface aplikasi. Jangan Lupa untuk menginsert gambar sebagai desain tools nya pada folder Res –> drawable. Untuk lebih jelasnya buka tab Source Code XML

    3. Kemudian buka Res–>Value–>String.xml. disini kita akan menginputkan object tombol gambar menjadi variabel agar bisa dipanggil saat proses pengkodingan. misal <string name=”brush”>Brush</string> untuk tools brush. lebih jelasnya lihat tab Source Code XML

    4. Setelah proses pendesainan selesai , kita masuk ke proses pengkodingan. Dalam membuat aplikasi ini kita memerlukan kelas baru selain kelas default MainActivity.java yaitu drawingview.java untuk menjadi class menggambar sehingga bisa diinstansiasikan dalam class Main Activity. Selengkapnya lihat di tab Source Code JAVA dengan penjelasannya

    5. Setelah semua selesai. Silahkan compile dengan Emulator Android dan juga ambil file apk nya lalu installasi di Perangkat Android

    Screenshot_2014-11-04-05-45-31 Screenshot_2014-11-04-05-45-48 Screenshot_2014-11-04-05-45-57 Screenshot_2014-11-04-05-46-07 Screenshot_2014-11-04-05-50-12 Screenshot_2014-11-04-05-52-38

    Semoga bermanfaat ūüôā

    Referensi :

    https://class.coursera.org/android-001/lecture/61

    http://arianggitt.blogspot.com/2013/12/tugas-pemrograman-mobile-membuat-canvas.html

    [/wptab]

    [wptab name='Source Code xml']
    Untuk file activity_main.xml

    <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=”#f5f6be”
    ¬†¬†¬† android:orientation=”vertical”
    ¬†¬†¬† tools:context=”.MainActivity” >

    <!–tools:context=”com.example.drawingapp.MainActivity” >¬† –> ¬†

        <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>  
        
        
        <com.example.drawingapp.DrawingView
    ¬†¬†¬† android:id=”@+id/drawing”
    ¬†¬†¬† android:layout_width=”fill_parent”
    ¬†¬†¬† android:layout_height=”0dp”
    ¬†¬†¬† android:layout_marginBottom=”3dp”
    ¬†¬†¬† android:layout_marginLeft=”10dp”
    ¬†¬†¬† android:layout_marginRight=”10dp”
    ¬†¬†¬† android:layout_marginTop=”3dp”
    ¬†¬†¬† android:layout_weight=”1″
    ¬†¬†¬† android:background=”#FFFFFFFF” />

        <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=”#FFFFFFFF”
    ¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†android:contentDescription=”@string/paint”
    ¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†android:onClick=”paintClicked”
    ¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†android:src=”@drawable/paint”
    ¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†android:tag=”#FFFFFFFF” />
             
                <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>

     

    Untuk file brush_chooser.xml

    <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>

     

    File string.xml

    <?xml version=”1.0″ encoding=”utf-8″?>
    <resources>

    ¬†¬†¬† <string name=”app_name”>drawingApp</string>
    ¬†¬†¬† <string name=”hello_world”>Hello world!</string>
    ¬†¬†¬† <string name=”action_settings”>Settings</string>
    ¬†¬† ¬†<string name=”start_new”>New</string>
    ¬†¬† ¬†<string name=”erase”>Erase</string>
    ¬†¬† ¬†<string name=”save”>Save</string>
    ¬†¬† ¬†<string name=”paint”>Paint</string>
    ¬†¬† ¬†<string name=”brush”>Brush</string>
    ¬†¬† ¬†<string name=”sml”>Small</string>
    ¬†¬† ¬†<string name=”med”>Medium</string>
    ¬†¬† ¬†<string name=”lrg”>Large</string>
    </resources>

    [/wptab]

    [wptab name='Source Code JAVA']

    File drawingview.java

    package com.example.drawingapp;

    import android.view.View;
    import android.content.Context;
    import android.util.AttributeSet;
    import android.graphics.Bitmap;
    import android.graphics.Canvas;
    import android.graphics.Color;
    import android.graphics.Paint;
    import android.graphics.Path;
    import android.view.MotionEvent;
    import android.graphics.PorterDuff;
    import android.graphics.PorterDuffXfermode;
    import android.util.TypedValue;

    public class DrawingView extends View {
        
        //path yang digambar user
        private Path drawPath;
        
        //drawing paint and canvas paint
        private Paint drawPaint, canvasPaint;
        
        //inisialisasi warna
        private int paintColour = 0xFF660000;
        
        //canvas
        private Canvas drawCanvas;
        
        //canvas bitmap
        private Bitmap canvasBitmap;
        
        //menyimpan nilai ukuran brush yang dipakai dan brush terakhir sebelum menggunakan tools erase/menghapus
        private float brushSize, lastBrushSize;
        
        //cek erase
        private boolean erase = false;

     //constructor untuk DrawingView class
        public DrawingView(Context context, AttributeSet attrs) {
            super(context, attrs);
            setupDrawing( );
        
            
            
        }
        
        //method untuk drawing space
        private void setupDrawing( ){
            
            brushSize = getResources().getInteger(R.integer.medium_size);    
            lastBrushSize = brushSize;
            
            drawPath = new Path( );
            drawPaint = new Paint( );

        drawPaint.setColor(paintColour);
            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) {
        //view given size
            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) {
        //draw view
            
            canvas.drawBitmap(canvasBitmap, 0, 0, canvasPaint);
            canvas.drawPath(drawPath, drawPaint);
        }
        
        @Override
        public boolean onTouchEvent(MotionEvent event) {
        //mendeteksi touch/sentuhan user    
            float touchX = event.getX( );
            float touchY = event.getY( );
            
            switch(event.getAction( )){
            
            //ketika baru menyentuh, disimpan menjadi titik awal
            case MotionEvent.ACTION_DOWN:
                drawPath.moveTo(touchX, touchY);
                break;
                
            //ketika user menggerakkan sentuhan, maka akan disimpan menjadi path
            case MotionEvent.ACTION_MOVE:
                drawPath.lineTo(touchX, touchY);
                break;

     //Ketika user tidak lagi menggerakkan sentuhan , maka path direset
            case MotionEvent.ACTION_UP:
                drawCanvas.drawPath(drawPath, drawPaint);
                drawPath.reset();
                break;
            default:
                return false;
            }
            
            //executes onDraw( ) method
            invalidate();
            return true;
            
            
        }
        
        //ubah warna
        public void setColor(String newColor){
            //set color   
            invalidate();
            
            paintColour = Color.parseColor(newColor);
            drawPaint.setColor(paintColour);
        }

     //ubah ukuran brush
        public void setBrushSize(float newSize){
            
            float pixelAmount = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
                    newSize, getResources().getDisplayMetrics());
            brushSize=pixelAmount;
            drawPaint.setStrokeWidth(brushSize);
        }
        
        //set ukuran last brush
        public void setLastBrushSize(float lastSize){
            lastBrushSize = lastSize;
        }
        
        //get ukuran last brush
        public float getLastBrushSize( ){
            return lastBrushSize;
        }
        
       //toggle the erase function
        public void setErase(boolean isErase){
            erase = isErase;
            if(erase) drawPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
            else drawPaint.setXfermode(null);
        }
        
        //hapus canvas
        public void setNew(){
            drawCanvas.drawColor(0, PorterDuff.Mode.CLEAR);
            invalidate( );
        }
    }

    File MainActivity.java

    package com.example.drawingapp;

    import android.app.Activity;
    import android.os.Bundle;
    import android.view.Menu;
    import android.view.MenuItem;
    import android.view.View;
    import android.widget.ImageButton;
    import android.widget.LinearLayout;

    import java.util.UUID;
    import android.provider.MediaStore;
    import android.app.AlertDialog;
    import android.app.Dialog;
    import android.content.DialogInterface;
    import android.view.View.OnClickListener;
    import android.widget.Toast;

    public class MainActivity extends Activity implements  OnClickListener {
        
        private DrawingView drawView;
        private ImageButton currentPaint, drawBTN, eraseBTN, newBTN, saveBTN;
        private float smallBrush, mediumBrush, largeBrush;

        @Override
        protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            
            //digunakan agar drawing class dapat digunakan
            drawView = (DrawingView)findViewById(R.id.drawing);
            
            LinearLayout paintLayout = (LinearLayout)findViewById(R.id.paint_colors);
            
            //imageButton pertama
            currentPaint = (ImageButton)paintLayout.getChildAt(0);
            
            //tampilan yang sudah terseleksi
            currentPaint.setImageDrawable(getResources().getDrawable(R.drawable.paint_pressed));
            
            //instansiasi ukuran brush
            smallBrush = getResources().getInteger(R.integer.small_size);
            mediumBrush = getResources().getInteger(R.integer.medium_size);
            largeBrush = getResources().getInteger(R.integer.large_size);
            
            //definisi varibel dari image button
            drawBTN = (ImageButton)findViewById(R.id.draw_btn);
            //ketika image button diklik maka controller listener akan memanggil method nya
            drawBTN.setOnClickListener(this);
            
         
            //inisialisasi ukuran brush medium
            drawView.setBrushSize(mediumBrush);
            
            //inisialisai ukuran brush
            eraseBTN = (ImageButton)findViewById(R.id.erase_btn);
            eraseBTN.setOnClickListener(this);
            
            //inisialisasi button
            newBTN = (ImageButton)findViewById(R.id.new_btn);
            newBTN.setOnClickListener(this);
            
            //inisialisasi size button
            saveBTN = (ImageButton)findViewById(R.id.save_btn);
            saveBTN.setOnClickListener(this);
        }

        @Override
        public boolean onCreateOptionsMenu(Menu menu) {

            getMenuInflater().inflate(R.menu.main, menu);
            return true;
     }

        @Override
        public boolean onOptionsItemSelected(MenuItem item) {
        
            int id = item.getItemId();
            if (id == R.id.action_settings) {
                return true;
            }
            return super.onOptionsItemSelected(item);
        }
        
     
        public void paintClicked(View view){

            
            if( view != currentPaint){
                
                ImageButton imgView = (ImageButton)view;
                String colour = view.getTag().toString();
                
                drawView.setColor(colour);
         drawView.setErase(false);
                drawView.setBrushSize(drawView.getLastBrushSize());
                
                imgView.setImageDrawable(getResources().getDrawable(R.drawable.paint_pressed));
                currentPaint.setImageDrawable(getResources().getDrawable(R.drawable.paint));
                currentPaint=(ImageButton)view;
                
            }
            
        }

        @Override
        public void onClick(View view) {
            
            if(view.getId()==R.id.draw_btn){
               
                final Dialog brushDialog = new Dialog(this);
    ¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†brushDialog.setTitle(“Brush Size:”);
                brushDialog.setContentView(R.layout.brush_chooser);
                brushDialog.show();
                
                
                ImageButton smallButton = (ImageButton)brushDialog.findViewById(R.id.small_brush);
                smallButton.setOnClickListener(new OnClickListener( ){

                    @Override
                    public void onClick(View v) {
                        drawView.setBrushSize(smallBrush);
                        drawView.setLastBrushSize(smallBrush);
                        drawView.setErase(false);
                        brushDialog.dismiss();
                        
                    }
                    
                });
                
                
                
                ImageButton mediumButton = (ImageButton)brushDialog.findViewById(R.id.medium_brush);
                mediumButton.setOnClickListener( new OnClickListener( ){

     @Override
                    public void onClick(View v) {
                        drawView.setBrushSize(mediumBrush);
                        drawView.setLastBrushSize(mediumBrush);
                        drawView.setErase(false);
                        brushDialog.dismiss();
                        
                    }
                    
                });
                
                ImageButton largeButton = (ImageButton)brushDialog.findViewById(R.id.large_brush);
                largeButton.setOnClickListener( new OnClickListener( ){

                    @Override
                    public void onClick(View v) {
                        drawView.setBrushSize(largeBrush);
                        drawView.setLastBrushSize(largeBrush);
                        drawView.setErase(false);
                        brushDialog.dismiss();
             
                    }
                    
                });
                    
            }
            
            //erase button listener
            else if(view.getId() == R.id.erase_btn){
                final Dialog brushDialog = new Dialog(this);
    ¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†brushDialog.setTitle(“Erase size:”);
                brushDialog.setContentView(R.layout.brush_chooser);
                brushDialog.show();
                
                ImageButton smallButton = (ImageButton)brushDialog.findViewById(R.id.small_brush);
                smallButton.setOnClickListener(new OnClickListener( ){

         @Override
                    public void onClick(View v) {
                        drawView.setErase(true);
                        drawView.setLastBrushSize(smallBrush);
                        brushDialog.dismiss();
                        
                    }
                    
                });
                
                
                
                ImageButton mediumButton = (ImageButton)brushDialog.findViewById(R.id.medium_brush);
                mediumButton.setOnClickListener( new OnClickListener( ){

                    @Override
                    public void onClick(View v) {
                        drawView.setErase(true);
                        drawView.setLastBrushSize(mediumBrush);
             brushDialog.dismiss();
                        
                    }
                    
                });
                
                ImageButton largeButton = (ImageButton)brushDialog.findViewById(R.id.large_brush);
                largeButton.setOnClickListener( new OnClickListener( ){

                    @Override
                    public void onClick(View v) {
                        drawView.setErase(true);
                        drawView.setLastBrushSize(largeBrush);
                        brushDialog.dismiss();
                        
                    }
                    
                });
            }
            
            else if(view.getId() == R.id.new_btn){
                
                AlertDialog.Builder newDialog = new AlertDialog.Builder(this);
    ¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†newDialog.setTitle(“New Drawing”);
    ¬†¬† ¬†newDialog.setMessage(“Create new drawing(Current one will be erased)?”);
    ¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†newDialog.setPositiveButton(“Yes”, new DialogInterface.OnClickListener() {
                    
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        drawView.setNew();
                        dialog.dismiss();
                        
                    }
                });
                
    ¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†newDialog.setNegativeButton(“Cancel”, new DialogInterface.OnClickListener() {
                    
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        dialog.cancel();
                        
                    }
                });
                
                newDialog.show();
            }

            //save button
            else if(view.getId() == R.id.save_btn){
                AlertDialog.Builder saveDialog = new AlertDialog.Builder(this);
    ¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†saveDialog.setTitle(“Save”);
    ¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†saveDialog.setMessage(“Do you want to save this drawing to Gallery?”);
    ¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†saveDialog.setPositiveButton(“Yes”, new DialogInterface.OnClickListener() {
                    
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                    //save drawing
                        
                        //enables the drawing cache on the custom view
                        drawView.setDrawingCacheEnabled(true);
                        
                        String isSaved = MediaStore.Images.Media.insertImage(getContentResolver(), drawView.getDrawingCache(),
    ¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†UUID.randomUUID().toString()+ “.png”, “drawing”);
                        
                        if(isSaved != null){
                            Toast savedToast = Toast.makeText(getApplicationContext(),
    ¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†“Drawing saved!”, Toast.LENGTH_SHORT);
                            savedToast.show();
                        }
            
                        else{
                            Toast unsavedToast = Toast.makeText(getApplicationContext(),
    ¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†“Error! Drawing did not save”, Toast.LENGTH_SHORT);
                            unsavedToast.show();
                        }
                    }
                });
                
    ¬†¬† ¬†¬†¬† ¬†¬†¬† ¬†saveDialog.setNegativeButton(“Cancel”, new DialogInterface.OnClickListener() {
                    
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        
                        dialog.cancel();
                        
                    }
                });
                
                saveDialog.show();
                drawView.destroyDrawingCache();
            }
            
            
        }
        

    }

    [/wptab]

     

    [end_wptabset]