Pong Droid Series – Part 3

Oleh: Krishna.W

Hi alll… Pada postingan kali ini, gw akan melanjutkan tutorial Pong Droid yang akan membahas tentang pemrograman tombol-tombol yang ada di layar menu awal, yaitu Start Game, About Game dan Exit Game.

Oiya, untuk yang ingin melihat kembali postingan sebelumnya tentang tutorial Pong Droid ini, bisa dilihat disini Pong Droid Series – Part 1 dan disini Pong Droid Series – Part 2.

Oke.. sekarang kita akan langsung kembali terjun ke coding..  (^^,)

“Show me the exit, please?” – Implementasi tombol Exit

Gw akan mulai dengan membahas tentang implementasi tombol Exit pada layar menu. Sebenarnya suatu aplikasi android tidak harus menyediakan tombol Exit, karena user bisa saja menggunakan tombol Back atau Home untuk berpindah ke aplikasi lain. Ketika user menekan tombol Back, maka sistem android akan menampilkan layar aplikasi sebelumnya, sedangkan ketika user menekan tombol Home maka sistem android akan langsung menampilkan layar Home. Setelah itu, aplikasi tersebut akan dipindahkan oleh sistem android ke background untuk kemudian dihapus dari memory.

Namun, untuk aplikasi PongDroid ini, gw tetap akan menampilkan tombol Exit, karena dengan adanya implementasi tombol Exit kita bisa mengetahui cara untuk menghentikan suatu Activity dalam aplikasi android.

Oke..  untuk implementasi tombol Exit ini, pertama kita buka file main.xml yang ada di direktori res/layout, lalu kita tambahkan id untuk button exit seperti berikut:

<Button
    android:id="@+id/exit_button"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="@string/exit_game"
    />

Kemudian kita buka sourcecode dari class PongDroid yang ada di direktori src:

package krs.tutorial;

import android.app.Activity;
import android.os.Bundle;

public class PongDroid extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }
}

Kemudian kita import package dari class View, seperti berikut:

import android.view.View;
import android.view.View.OnClickListener;

Lalu pada method onCreate, kita tambahkan kode untuk memanggil objek Android view berdasarkan id-nya. Sekarang ini kita akan memanggil id dari tombol exit yang sudah kita deklarasikan tadi di main.xml. Kemudian kita akan gunakan method setOnClickListener untuk memberitahu sistem android, objek mana yang harus merespon ketika user menekan atau menyentuh objek view tadi.

Sourcecode dari class PongDroid.java akan menjadi seperti berikut:

package krs.tutorial;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;

public class PongDroid extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        View exitButton = findViewById(R.id.exit_button);
        exitButton.setOnClickListener(this);
    }
}

Upps.. ternyata eclipse memunculkan error. Itu karena kita belum menambahkan implementasi dari interface OnClickListener pada class PongDroid ini. Sekarang kita akan tambahkan implementasi OnClickListener dan method onClick dari interface tersebut.

Sourcecode-nya akan menjadi seperti berikut:

package krs.tutorial;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;

public class PongDroid extends Activity implements OnClickListener {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        View exitButton = findViewById(R.id.exit_button);
        exitButton.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {

    }
}

Kemudian pada method onClick, kita tambahkan switch-case untuk memilih perintah yang akan dijalankan sesuai dengan tombol yang ditekan/disentuh oleh user. Kali ini, kita akan menambahkan perintah untuk memanggil method finish() ketika user menekan/menyentuh tombol Exit.  Method finish() ini akan menghentikan Activity dari class PongDroid dan mengembalikan kontrol sistem ke aplikasi sebelumnya (biasanya aplikasi Home).

Sourcecode dari class PongDroid akan menjadi seperti ini:

package krs.tutorial;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;

public class PongDroid extends Activity implements OnClickListener {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        View exitButton = findViewById(R.id.exit_button);
        exitButton.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        // TODO Auto-generated method stub
        switch(v.getId()) {
	case R.id.exit_button: finish();
	break;
        }
    }
}

Apabila kita coba tes di emulator, maka ketika kita menekan/menyentuh tombol Exit maka aplikasi akan kembali ke layar Home.

“Tell more about me..” – Implementasi tombol About Game

Sekarang kita akan menambahkan sourcecode untuk implementasi tombol About Game. Seperti tadi, kita buka file main.xml untuk menambahkan id pada tombol About seperti berikut:

<Button
    android:id="@+id/about_button"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="@string/about_game"
    />

Kemudian pada method onCreate di class PongDroid kita tambahkan objek View yang akan memanggil tombol About Game ini:

View aboutButton = findViewById(R.id.about_button);
        aboutButton.setOnClickListener(this);

Oiya, ketika user menekan tombol About Game ini maka kita akan menampilkan layar baru yang berisi penjelasan singkat tentang game PongDroid ini. Maka kita perlu membuat Activitiy baru yang akan merepresentasikan layar About Game tersebut. Untuk membuat Activity baru, kita perlu membuat instans dari class Intent. Jadi, sekarang kita tambahkan import dari package Intent pada class PongDroid seperti berikut:

import android.content.Intent;

Ada dua tipe dari Intent, yaitu intent public yang terdaftar di sistem android dan dapat dipanggil oleh aplikasi manapun dan intent private (anonymous) yang hanya digunakan oleh satu aplikasi saja. Untuk implementasi layar About Game ini, kita akan menggunakan tipe intent private.

Sekarang pada method onClick kita tambahkan kode berikut untuk menbuat objek intent untuk menciptakan Activity baru ketika user menekan tombol About Game

case R.id.about_button:
    Intent i = new Intent(this, About.class);
    startActivity(i);
break;

Upps.. eclipse memunculkan error yang memberitahukan kalau class About tidak ditemukan. Error ini muncul karena kita belum menambahkan class About. Class About ini akan digunakan untuk membuat Activity yang merepresentasikan layar About Game.

Sekarang kita akan membuat dulu class About tersebut. Klik kanan pada package yang kita buat di direktori src, lalu pilih New Class. Lalu kita beri nama class tersebut About. Kemudian kita tambahkan import dari package Activity dan Bundle. Lalu kita buat class About ini sebagai subclass dari class Activity dan kita tambahkan method onCreate. Sourcecode-nya adalah seperti berikut:

package krs.tutorial;

import android.app.Activity;
import android.os.Bundle;

public class About extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }
}

Setelah itu, kita akan menambahkan layout yang akan digunakan untuk layar About Game ini. Kita buat file xml baru pada direktori res/layout, yang kita beri nama about.xml. File about.xml yang di-generate oleh eclipse adalah sebagai berikut:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent">
</LinearLayout>

Kemudian kita modifikasi file about.xml tersebut menjadi seperti berikut:

<?xml version="1.0" encoding="utf-8"?>
<ScrollView
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent">

  <TextView
      android:id="@+id/about_content"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="@string/about_content"
  />
</ScrollView>

Apabila muncul error, itu karena kita belum manambahkan elemen about_content pada file string.xml. Sekarang kita buka file string.xml lalu kita modifikasi menjadi seperti berikut:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">Pong</string>
    <string name="main_title">Pong Tutorial</string>
    <string name="start_game">Start Play</string>
    <string name="about_game">About Game</string>
    <string name="exit_game">Exit Game</string>
    <string name="about_title">About PongDroid</string>
    <string name="about_content">\
    This is an Android version of Pong. Have fun..!</string>
</resources>

Oiya, untuk isi dari about_content, kalian bisa mengisinya dengan teks sesuai dengan keinginan masing-masing. (^^,)

Setelah itu kita tambahkan method setContentView pada class About untuk menentukan layout yang akan digunakan untuk menampilkan layar About Game. Sourcecode pada class About akan menjadi seperti berikut:

package krs.tutorial;

import android.app.Activity;
import android.os.Bundle;

public class About extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.about);
    }
}

Nah, sekarang error yang muncul pada class PongDroid tadi sudah hilang. Sekarang kita coba jalankan aplikasi PongDroid ini di emulator. Kemudian coba tekan tombol About Game. Upps.. ternyata pada emulator muncul layar seperti berikut:

Error ini muncul karena kita belum mendeklarasikan Activity yang baru ini di AndroidManifest.xml. Sekarang kita buka file xml tersebut dan kita tambahkan kode seperti berikut:

<activity android:name=".About"
     android:label="@string/about_title">
 </activity>

Sourcecode pada AndroidManifest.xml akan menjadi seperti berikut:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
      package="krs.tutorial"
      android:versionCode="1"
      android:versionName="1.0">
    <uses-sdk android:minSdkVersion="8" />

    <application android:icon="@drawable/icon" android:label="@string/app_name">
        <activity android:name=".PongDroid"
                  android:label="@string/app_name">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

        <activity android:name=".About"
                  android:label="@string/about_title">
        </activity>

    </application>
</manifest>

Sekarang coba jalankan aplikasi ini di emulator, setelah kita menekan tombol About Game maka akan muncul tampilan seperti berikut:

Apabila kita menekan tombol Back, ,maka akan ditampilkan layar sebelumnya yaitu layar menu awal PongDroid.

“Now.. Let’s make the Pong Droid”

Oke.. Selesai sudah pembahasan gw tentang dua tombol yang ada di layar menu awal, yaitu tombol About Game dan Exit Game. Semoga tutorial singkat gw ini bisa membantu untuk kalian yang sedang mempelajari development di platform android, khususnya untuk development game. (^^,)

Di postingan berikutnya gw akan membahas tentang layar Game Pong dan mulai membahas tentang implementasi game Pong pada platform android.
Have fun coding for you all.. See you in the next post..

 (O-O,)
(        )
[___]__]