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.

Read More

Tutorial Tab Host pada Android

Ø  Buka Java-ADT bundle, buat project baru dengan pilih file – new – android application project, beri nama project dengan cobaTab1 lalu Next.

Ø  Pada jendela Configure Launcher Icon pilih icon dengan klik browse pilih gambar yang diinginkan lalu klik Next, sampai finish.

Ø  Bikin direktori baru dengan nama drawable, kemudian file .png dimasukkan pada file tersebut. Pastikan file .png berukuran kecil.

Ø  Kemudian akan masuk ke project baru. Ketikkan coding di bawah ini pada Activity_main.xml

<?xml version="1.0" encoding="utf-8"?>

<TabHost android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:id= "@+id/tabHost"

    xmlns:android="http://schemas.android.com/apk/res/android"

    >

    <TabWidget

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:id="@android:id/tabs"

        />

    <FrameLayout

        android:layout_width="fill_parent"

        android:layout_height="fill_parent"

        android:id="@android:id/tabcontent"

        >

        <LinearLayout

            android:layout_width="fill_parent"

            android:layout_height="fill_parent"

            android:id="@+id/tab1"

            android:orientation="vertical"

            android:paddingTop="60px"

            >

            <ImageView

                android:layout_width="fill_parent"

                android:layout_height="wrap_content"

                android:src="@drawable/sss"/>

        </LinearLayout>

        <LinearLayout

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:id="@+id/tab2"

            android:orientation="vertical"

            android:paddingTop="60px"

            >

            <TextView

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:text="Nama : ENDAH PURNAMASARI"

                android:id="@+id/txt2"

                />

            <TextView

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:text="Kelas : SI 12 A"

                android:id="@+id/txt3"

                />

            <TextView

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:text="NIM : 12.12.0017"

                android:id="@+id/txt4"

                />

               

            </LinearLayout>

         <LinearLayout

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:id="@+id/tab3"

                android:orientation="vertical"

                android:paddingTop="60px"

                > 

                <TextView

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:text="Mata Kuliah : Pemrograman Mobile"

                android:id="@+id/txt5"

                />

                <TextView

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:text="Tugas : Membuat Tab Host"

                android:id="@+id/txt6"

                />

              </LinearLayout>"

    </FrameLayout>

</TabHost>

Ø  Ketikkan coding di bawah ini pada MainActivity.java.

package ada.example.cobatab1;

import android.os.Bundle;

import android.app.Activity;

import android.view.Menu;

import android.widget.TabHost;

import android.widget.TabHost.TabSpec;

import android.widget.TextView;

public class MainActivity extends Activity {

      

       @Override

       protected void onCreate(Bundle savedInstanceState) {

              super.onCreate(savedInstanceState);

              setContentView(R.layout.activity_main);

             

             

              TabHost tabHost=(TabHost)findViewById(R.id.tabHost);

              tabHost.setup();

             

              TabSpec spec1=tabHost.newTabSpec("Tab1");

              spec1.setContent(R.id.tab1);

              spec1.setIndicator("Tab1");

             

              TabSpec spec2=tabHost.newTabSpec("Tab 2");

              spec2.setIndicator("Tab2");

              spec2.setContent(R.id.tab2);

             

              TabSpec spec3=tabHost.newTabSpec("Tab 3");

              spec3.setIndicator("Tab 3");

              spec3.setContent(R.id.tab3);

             

              tabHost.addTab(spec1);

              tabHost.addTab(spec2);

              tabHost.addTab(spec3);

       }

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

       }

}

Ø  Jalankan project dengan cara klik kana pada nama project pilih Run As – Android Application. Maka akan muncul emulator seperti di bawah ini, klik menu.

Ø  Akan muncul beberapa menu, cari nama project yang telah kita buat tadi, yaitu cobaTab1.

Ø  Pada Tab 1, berisi gambar.

Ø  Jika di klik Tab 2, maka muncul data yang telah kita tuliskan tadi pada activity_main.xml.

Ø  Jika kita klik Tab 3, maka tampilannya seperti di bawah ini.

Read More