LAPORAN PRAKTIKUM 7 “MEMBUAT CANVAS ANDROID”

PEMROGRAMAN MOBILE

LAPORAN PRAKTIKUM 7

“MEMBUAT CANVAS ANDROID”

Disusun Oleh:

Benedikta Bella Adityana 12.12.0080

SI 12 B

Blog: bdcprograming.blogspot.com

http://bdcprograming.blogspot.com/

STMIK AMIKOM PURWOKERTO

TAHUN 2013/2014

BAB I

Membuat Canvas pada Android

1. Setelah kita masuk ke aplikasi Eclipse, untuk membuat project aplikasi android baru, kita pilih menu File-New-Android Application Project.

2.  Kemudian akan muncul wizard seperti gambar di bawah ini. Beri nama aplikasi yang akan dibuat. Aplikasi ini saya beri nama Canvasku. Ubah pula Package Name nya, contoh nya seperti benedicta.canvasku, Setelah itu klik Next.

3.  Selanjutnya akan muncul tampilan seperti di bawah ini. Lalu klik Next.

4. Setelah itu, pilih icon yang akan mewakili aplikasi yang kita buat. Dalam contoh ini saya memilih icon yang ada di tab Clipart. Apabila sudah sesuai dengan keiinginan, klik Next.

5. Jika muncul tampilan seperti di bawah, klik Next .

6. Setelah itu akan muncul tampilan seperti di bawah ini. Klik Finish.

7.  Jika project yang kita buat tadi berhasil, maka tampilan yang akan muncul adalah seperti gambar di bawah ini. Secara default akan muncul tulisan “Hello world!”, kita bisa menghapusnya karena tidak diperlukan dalam pembuatan aplikasi kali ini.

8.      Kode program pada activity_main.xml adalah 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>



9.  Setelah kita menuliskan kode program pada activity_main.xml , selanjutnya tuliskan kode program berikut pada Package Explorer – src - (package) benedicta.canvasku - MainActivity.java

package benedicta.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.graphics.RectF;

import android.view.Menu;

import android.view.View;

public class MainActivity extends Activity {

   private static RectF oval = new RectF (100, 300, 200, 400);

  

   @Override

   protected void onCreate(Bundle savedInstanceState) {

          super.onCreate(savedInstanceState);

          setContentView(new Canvasku (this));    

   }

   static public class Canvasku extends View {

          public Canvasku (Context context){

          super(context);

         

          }

           protected void onDraw (Canvas canvas) {

               

                 Paint paint = new Paint();

                 Paint paint2 = new Paint();

                 Paint paint3 = new Paint();

                 Paint paint4 = new Paint();

                 Paint paint5 = new Paint();

                 Paint paint6 = new Paint();

                 Paint paint7 = new Paint();

                 Paint paint8 = new Paint();

            

                 paint3.setTextSize(30);

                 paint7.setTextSize(25);

                 paint8.setTextSize(25);

                 paint.setColor(Color.RED);

                 paint2.setColor(Color.BLACK);

                 paint2.setAlpha(1);

                 paint3.setColor(Color.GREEN);

                 paint4.setColor(Color.YELLOW);

                 paint5.setColor(Color.YELLOW);

                 paint6.setColor(Color.YELLOW);

                 paint7.setColor(Color.BLUE);

                 paint8.setColor(Color.BLUE);

               

                 canvas.drawCircle(150, 370, 50, paint);

                 canvas.drawRect(200, 50, 300, 150, paint2);

                 canvas.drawText("Hello there ^^", 50, 50, paint3);

                 canvas.drawCircle(130, 350, 10, paint4);

                 canvas.drawCircle(165, 350, 10, paint5);

                 canvas.drawArc(oval, 45, 90, false, paint6);

                 canvas.drawText("By: Benedicta Bella", 50, 150, paint7);

                 canvas.drawText("SI12B/12.12.0080    Tweet: @bdcbella", 50, 180, paint8);

               

               

              }

              }

  

         

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

   }

}

10. Setelah kode program yang dituliskan berhasil, jalankan emulator aplikasi android. Tampilan pada saat kita membuka menu utama emulator yaitu seperti gambar di bawah ini.   Untuk menjalankan aplikasi, pilih icon menu Canvasku.

Di bawah ini adalah tampilan ketika aplikasi Canvasku dijalankan.

PEMROGRAMAN MOBILE LAPORAN PRAKTIKUM 6 “MEMBUAT APLIKASI ANDROID TABHOST”

PEMROGRAMAN MOBILE

LAPORAN PRAKTIKUM 6

“MEMBUAT APLIKASI ANDROID TABHOST”

Disusun Oleh:

Benedikta Bella Adityana 12.12.0080

SI 12 B

Blog: bdcprograming.blogspot.com

http://bdcprograming.blogspot.com/

STMIK AMIKOM PURWOKERTO

TAHUN 2013/2014

Membuat Tabhost AMIKOM & Data Diri

1. Setelah kita masuk ke aplikasi Eclipse, untuk membuat project aplikasi android baru, kita pilih menu File-New-Android Application Project.

2. Kemudian akan muncul wizard seperti gambar di bawah ini. Beri nama aplikasi yang akan dibuat. Aplikasi ini saya beri nama Tab Menu’Desc, karena aplikasi yang dibuat kali ini menampilkan tab menu yang berisi penjelasan (deskripsi singkat) mengenai AMIKOM dan data diri. Ubah pula Package Name nya, contoh nya seperti benedicta.tabmenu, Setelah itu klik Next.

3. Selanjutnya akan muncul tampilan seperti di bawah ini. Lalu klik Next.

4. Setelah itu, pilih icon yang akan mewakili aplikasi yang kita buat. Dalam contoh ini saya memilih icon yang ada di tab Clipart. Apabila sudah sesuai dengan keiinginan, klik Next.

5. Jika muncul tampilan seperti di bawah, klik Next .

6. Setelah itu akan muncul tampilan seperti di bawah ini. Klik Finish.

7. Jika project yang kita buat tadi berhasil, maka tampilan yang akan muncul adalah seperti gambar di bawah ini. Secara default akan muncul tulisan “Hello world!”, kita bisa menghapusnya karena tidak memerlukannya dalam pembuatan aplikasi kali ini.

8. Setelah itu, ketikan kode program dibawah ini pada activity_main.xml:

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

   

<TabHost

    android:id="@android:id/tabhost"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:layout_alignParentLeft="true"

    android:layout_alignParentTop="true" >

    <LinearLayout

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:orientation="vertical" >

        <TabWidget

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

            android:layout_width="match_parent"

            android:layout_height="wrap_content" >

        </TabWidget>

        <FrameLayout

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

            android:layout_width="match_parent"

            android:layout_height="match_parent" >

            <LinearLayout

                android:id="@+id/tab1"

                android:layout_width="match_parent"

                android:layout_height="match_parent" >

                <TextView

                    android:id="@+id/textView1"

                    android:layout_width="wrap_content"

                    android:layout_height="wrap_content"

                    android:text="SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER (STMIK) AMIKOM Purwokerto memiliki 2 program studi strata 1 (S1) yaitu Sistem Informasi dan Teknik Informatika. " />

               

            </LinearLayout>

            <LinearLayout

                android:id="@+id/tab2"

                android:layout_width="match_parent"

                android:layout_height="match_parent" >

                <TextView

                    android:id="@+id/textView2"

                    android:layout_width="wrap_content"

                    android:layout_height="wrap_content"

                    android:text="HALLO ^^ Nama saya Benedicta Bella Adityana, lahir di Banyumas, 12 Februari 1995. Twitter : @bdcbella " />                        

            </LinearLayout>

           

        </FrameLayout>

    </LinearLayout>

</TabHost>

</RelativeLayout>

9. Setelah kita menuliskan kode program pada activity_main.xml , selanjutnya tuliskan kode program berikut pada Package Explorer – src - (package) benedicta.tabmenu - MainActivity.java

 package benedicta.tabmenu;

import android.os.Bundle;

import android.app.Activity;

import android.view.Menu;

import android.widget.TabHost;

public class MainActivity extends Activity {

       TabHost mTabHost;

   

       @Override

       public void onCreate(Bundle savedInstanceState) {

              super.onCreate(savedInstanceState);

              setContentView(R.layout.activity_main);

             

              mTabHost = (TabHost) findViewById(android.R.id.tabhost);

        mTabHost.setup();

       

       // pemberian nama indicator tab mTabHost.addTab(mTabHost.newTabSpec("tab1").setIndicator("AMIKOM").setContent(R.id.tab1));

        mTabHost.addTab(mTabHost.newTabSpec("tab2").setIndicator("DATA DIRI ^^").setContent(R.id.tab2));

       

        mTabHost.setCurrentTab(0);

             

             

       }

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

       }

}

10. Setelah kode program yang dituliskan berhasil, jalankan emulator aplikasi android. Tampilan pada saat kita membuka menu utama emulator yaitu seperti gambar di bawah ini. Untuk menjalankan aplikasi, pilih icon menu Tab Menu’Desc.

Di bawah ini adalah tampilan ketika aplikasi tab menu dijalankan.