Tutorial Membuat Canvas Pada Android

Ø  Buatlah project baru dengan nama “canvasku” seperti gambar di bawah ini.

 Ø  Ketikkan coding berikut dengan benar dan teliti pada  “Mainactivity.java”

package ada.example.canvasku;

import android.os.Bundle;

import android.app.Activity;

import android.content.Context;

import android.graphics.Canvas;

import android.graphics.Color;

import android.graphics.Paint;

import android.view.Menu;

import android.view.View;

public class MainActivity extends Activity {

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        //setContentView(R.layout.activity_main);

        setContentView (new canvas1(this));

    }

    static public class canvas1 extends View {

      public canvas1(Context context) {

            //TODO Auto-generated constructor stub

            super(context);

     

    }

    protected void onDraw (Canvas canvas) {

      Paint paint = new Paint ();

      Paint paint2 = new Paint ();

      Paint paint3 = new Paint ();

      paint3.setTextSize(30);

      paint.setColor(Color.RED);

      paint2.setColor(Color.GREEN);

      paint2.setAlpha(50);

      paint3.setColor(Color.YELLOW);

      canvas.drawCircle(100,100,50, paint);

      canvas.drawRect(200, 250, 300, 200, paint2);

      canvas.drawText("Hello World", 50, 200, paint3);

    }

    }

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

    }

   

}

Ø  Dan pada “Activity_main.xml” codingnya seperti di bawah ini.

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

    android:paddingBottom="@dimen/activity_vertical_margin"

    android:paddingLeft="@dimen/activity_horizontal_margin"

    android:paddingRight="@dimen/activity_horizontal_margin"

    android:paddingTop="@dimen/activity_vertical_margin"

    tools:context=".MainActivity" >

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="@string/hello_world" />

</RelativeLayout>

Ø  Setelah coding selesai di ketik jalankan programnya dengan cara klik kanan pada nama project yang telah dibuat tadi. Maka akan keluar beberapa menu yang diantaranya ada nama project yang telah dibuat.

 Ø  Buka project “canvasku” maka hasilnya seperti di bawah ini.

 Ø  Itu adalah cara membuat canvas pada android menggunkan shape atau bentuk. Selanjutnya membuat canvas menggunakan gambar.

Ø  Buat project baru lagi pada Java-ADT Bundle, beri nama “canvaslagi” seperti gambar di bawah ini.

 Ø  Ketikkan coding berikut dengan benar pada “Mainactivity.java”

package ada.example.canvaslagi;

import android.os.Bundle;

import android.annotation.SuppressLint;

import android.app.Activity;

import android.content.Context;

import android.graphics.Bitmap;

import android.graphics.BitmapFactory;

import android.graphics.Canvas;

import android.graphics.Paint;

import android.view.Menu;

import android.view.View;

public class MainActivity extends Activity {

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(new canvas7(this));

    }

    static public class canvas7 extends View {

      Bitmap gambarkudangambarmu;

     

      public canvas7 (Context context) {

            super (context);

            gambarkudangambarmu =

            BitmapFactory.decodeResource

            (context.getResources(),R.drawable.ic_launcher);

      }

     

      protected void onDrwa(Canvas canvas){

            Paint paint = new Paint();

            canvas.drawBitmap(gambarkudangambarmu, 100, 20, paint);

      }

    }

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

    }

   

}

Ø  Kemudian pada “Activity_main.xml” contohlah coding di bawah ini dengan benar.

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

    android:paddingBottom="@dimen/activity_vertical_margin"

    android:paddingLeft="@dimen/activity_horizontal_margin"

    android:paddingRight="@dimen/activity_horizontal_margin"

    android:paddingTop="@dimen/activity_vertical_margin"

    tools:context=".MainActivity" >

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="@string/hello_world" />

</RelativeLayout>

Ø  Selanjutnya jalankan projectnya caranya sama dengan project yang awal. Maka akan keluar beberapa menu yang diantaranya ada nama project yang telah dibuat tadi yaitu “canvaslagi”.

 Ø  Buka project tersebut, maka hasilnya tampak seperti gambar di bawah ini.