MERANCANG ANTARMUKA PENGGUNA (USER INTERFACE)
Teori Dasar Singkat :
User interface dapat dirancang menggunakan salah satu dari 2 cara, yaitu melalui perancangan procedural (procedural design) dan deklaratif (declarative design) . Disain prosedural mengandung arti dengan kode. Sebagai contoh, pada saat Anda membuat aplikasi Swing, Anda harus menulis kode untuk membuat dan memanipulasi semua objek user interface seperti JFrame dan JButton.
Dengan demikian Swing adalah prosedural. Sebaliknya, disain deklaratif tidak melibatkan kode. Misal, ketika Anda mendesain halaman Web, Anda menggunakan HTML, yakni markup language berbasis XML yang mendeskripsikan apa yang ingin Anda lihat pada halaman Web Anda. Bukan pada bagaimana yang ingin Anda lakukan untuk hal itu. Jadi HTML adalah deklaratif.
Android diciptakan untuk menghilangkan gap antara disain prosedural dan deklaratif dengan cara membolehkan Anda untuk membuat user interface melalui salah satu saja diantaranya. Artinya, Anda dapat menggunakan hampir seluruh disain dalam kode Java saja atau dalam XML descriptor. Jika Anda amati dokumentasi dari beberapa komponen user interface android, Anda akan temukan baik yang menggunakan API Java maupun deklarasi atribut XML, akan menghasilkan effek atau output yang sama.
Google menyarankan Anda untuk menggunakan deklarasi XML, karena kode XML lebih pendek dan lebih mudah dipahami daripada kode Java, serta memiliki kemungkinan yang kecil untuk berubah dalam versi-versi baru berikutnya.
Pada waktu Anda membuat sebuah projek android baru, Android eclipse plug-in secara default meng-create beberapa file yang dibutuhkan (Lihat Gambar 1). File-file tersebut selain file Java juga terdapat file lain seperti file grafik dan XML yang merupakan resource untuk aplikasi android Anda. Misalnya untuk mendefinisikan layout aplikasi, maka disediakan main.xml dan resource lain yang dapat Anda tambahkan tergantung keperluan atau jumlah activity yang akan membentuk aplikasi.
Semua file XML selalu diawali dengan baris <?xml version="1.0" encoding="utf-8"?>, baris ini memberitahukan kompiler bahwa file dalam format XML, ditulis dalam kode UTF-8. Selanjutnya, Anda akan temukan referensi ke <LinerLayout> :
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<-- ... -->
</LinearLayout>
Layout adalah container untuk satu atau lebih objek anak (child object) dan perilaku (behavior) untuk menempatkan atau mengatur posisi objek-ojek tersebut pada screen dalam area empat persegi panjang objek induk (parent object). Beberapa layout penting yang sering digunakan yang disediakan Android antara lain adalah :
o FrameLayout. Mengaturobjek anak sehingga seluruh objek diawali dari sudut kiri atas layar (screen). Layout ini biasanya digunakan untuk View Tab atau Image switcher
o LinearLayout. Menyusun objek anak dalam bentuk baris atau kolom tunggal. RelativeLayout. Mengatur objek anak dalam kaitannya dengan objek lain atau objek induk. Biasanya digunakan dalam Form.
o TableLayout. Mengatur objek anak dalam baris dan kolom, sama persis dengan tabel HTML.
Beberapa parameter atau atribut penting yang sering digunakan dalam layout adalah:
o xmlns:android = http://schemas.android.com/apk/res/android Mendefinisikan namespace XML untuk Android.
o android:layout_width, android:layout_height Menentukan lebar dan tinggi objek induk (dalam hal ini, window dari screen). Nilai yang mungkin adalah "fill_parent" atau "wrap_content"
o android:orientation Mendefinisikan orintasi layout, apakah layout akan berbasis kolom atau baris. Nilai "vertical" untuk kolom dan "horizontal" untuk baris.
o android:layout_gravity Konstanta gravity standar yang dapat diberikan objek anak ke objek induk.
o android:padding Setting empat sisi padding dalam pixel.
Latihan percobaan #1 :
1. Buatlah sebuah projek dengan nilai-nilai berikut :
Project name : MyGameUserInterface
Build Target : Android 2.2
Aplication name : MyGame #1
Package name : coba.praktikum.mygame
Create Activity : MyGameActivity
Min SDK Version : 8
Beberapa folder dan file yang di-generate secara otomatis :
Gambar 1. Initial resource untuk projek MyGameUserInterface
Default Source File : MyGameActivity.java
package coba.praktikum.mygame;
import android.app.Activity;
import android.os.Bundle;
public class MyGameActivity extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}
}
Default Auto Generate File : R.java, mencatat semua resource ID yang digunakan aplikasi.
package coba.praktikum.mygame;
public final class R {
public static final class attr {
}
public static final class drawable {
public static final int icon=0x7f020000;
}
public static final class layout {
public static final int main=0x7f030000;
}
public static final class string {
public static final int app_name=0x7f040001;
public static final int hello=0x7f040000;
}
}
2. Ubah layout default main.xml :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout mlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello"/>
</LinearLayout>
Tambahkan beberapa tombol (button) dan teks, sehingga main.xml untuk aplikasi user interface Anda terlihat menjadi seperti berikut :
<?xml version="1.0"encoding="utf-8"?>
<LinearLayout mlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/main_title"/>
<Button android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/continue_label">
</Button>
<Button android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/new_game_label">
</Button>
<Button android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/about_label">
</Button>
<Button android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/exit_label">
</Button>
</LinearLayout>
3. Ubahlah nilai default pada strings.xml :
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="hello">Hello World, MyGameActivity!</string>
<string name="app_name">MyGame #1</string>
</resources>
Hapus string bernama hello, gantilah dengan string-string berikut :
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">MyGame #1</string>
<string name="main_title">ANDROID GAME</string>
<string name="continue_label">Continue Game</string>
<string name="new_game_label">New Game</string>
<string name="about_label">About Game</string>
<string name="exit_label">Exit Game</string>
</resources>
Simpan string.xml sehingga eclipse akan me-rebuild projek Anda. Pastikan bahwa ID string baru ditambahkan Android eclipse plug-in secara otomatis pada R.java. Dalam file akan terlihat seperti berikut :
public static final int about_label=0x7f040004;
public static final int app_name=0x7f040000;
public static final int continue_label=0x7f040002;
public static final int exit_label=0x7f040005;
public static final int main_title=0x7f040001;
public static final int new_game_label=0x7f040003;
4. Jalankan program
Gambar. 2 Versi pertama opening screen aplikasi MyGame #1
Latihan percobaan #2 :
Pada latihan percobaan lalu Anda telah membuat user interface untuk game Anda, cukup menarik, tetapi Anda dapat membuatnya lebih menarik lagi dengan menggunakan beberapa perubahan kosmetik seperti yang akan Anda lakukan latihan ini.
Agar tampilan user interface menjadi lebih menarik, Anda harus mengubah teks judul menjadi berwarna, lebih besar dan center, membuat tombol (button) lebih kecil, serta warna background yang lain. Oleh karena itu, berikut ini adalah pendefinisian warna dan dimensi huruf yang harus Anda letakkan di dalam /res/values/color.xml dan /res/values/dimen.xml.
color.xml :
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="background">#1a1a48</color>
<color name="title_color">#ffff0f</color>
</resources>
dimen.xml :
<?xml version="1.0" encoding="utf-8" ?>
<resources>
<dimen name="title_size">10pt</dimen>
</resources>
1. Buatlah file color.xml dalam subdirektori /res/values. Buka file dan salin kode di atas ke dalam file, dan Save file.
2. Buatlah file dimen.xml dalam subdirektori /res/value. Buka file dan salin kode di atas ke dalam file, dan Save file.
3. Modifikasi main.xml sehingga isinya terlihat seperti berikut :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:background="@color/background"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="30dip" >
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="@string/main_title"
android:textColor="@color/title_color"
android:textSize="@dimen/title_size"
android:layout_marginBottom="25dip" />
<Button
android:id="@+id/continue_button"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/continue_label" >
</Button>
<Button
android:id="@+id/new_button"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/new_game_label" >
</Button>
<Button
android:id="@+id/about_button"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/about_label" >
</Button>
<Button
android:id="@+id/exit_button"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/exit_label" >
</Button>
</LinearLayout>
</LinearLayout>
Pada latihan ini Anda diperkenalkan dengan sebuah sintaks baru @+id/resid, digunakan untuk membuat resource ID sebuah objek yang dapat diacu objek lain. Misal @+id/about_button, artinya Anda mendefinisikan resource ID untuk tombol About, yang nantinya akan Anda gunakan untuk membuat sesuatu akan terjadi jika user memilih atau menekan tombol tersebut.
4. Jalankan program. Hasilnya akan tampak seperti Gambar. 3 di bawah :
Gambar. 3 Opening screen dengan layout baru
Screen baru ini dalam modus portrait, tampak lebih bagus, namun terlihat antara lebar dan tinggi screen tidak seimbang. Bagaimana jika orientasi screen tersebut Anda ubah ke dalam modus landscape (wide screen)?. Coba tekan Ctrl + F11. Apa yang yang Anda lihat? Bujubuneng!. Untuk memperbaiki keadaan ini, maka disain layout aplikasi Anda harus disesuaikan, sehingga cocok untuk berbagai orientasi baik dalam modus portrait maupun wide screen. Silahkan lakukan latihan percobaan berikutnya.
Latihan percobaan #3 :
Pada latihan sebelumnya, Anda telah membuat antarmuka untuk opening screen aplikasi dalam satu kolom button secara vertikal. Pada latihan percobaan ini Anda akan menggunakan control , TableLayout untuk membuat button antarmuka opening screen aplikasi game Anda menjadi dua kolom.
Modifikasi main.xml sehingga terlihat seperti berikut :
<?xml version= "1.0" encoding= "utf-8" ?>
<LinearLayout xmlns:android= "http://schemas.android.com/apk/res/android"
android:background = "@color/background"
android:orientation = "horizontal"
android:layout_width = "fill_parent"
android:layout_height = "fill_parent"
android:padding = "15dip" >
<LinearLayout
android:orientation = "vertical"
android:layout_width = "fill_parent"
android:layout_height = "wrap_content"
android:layout_gravity = "center"
android:paddingLeft = "20dip"
android:paddingRight = "20dip" >
<TextView
android:layout_width= "wrap_content"
android:layout_height = "wrap_content"
android:layout_gravity = "center"
android:text = "@string/main_title"
android:textColor = "@color/title_color"
android:textSize = "@dimen/title_size"
android:layout_marginBottom = "20dip" />
<TableLayout
android:layout_width= "wrap_content"
android:layout_height= "wrap_content"
android:layout_gravity= "center"
android:stretchColumns= "*" >
<TableRow>
<Button
android:id = "@+id/continue_button"
android:text = "@string/continue_label" >
</Button>
<Button
android:id = "@+id/new_button"
android:text = "@string/new_game_label" >
</Button>
</TableRow>
<TableRow>
<Button
android:id = "@+id/about_button"
android:text = "@string/about_label" >
</Button>
<Button
android:id = "@+id/exit_button"
android:text = "@string/exit_label" >
</Button>
</TableRow>
</TableLayout>
</LinearLayout>
</LinearLayout>
Jalankan program dan pastikan opening screen Anda seperti Gambar 4 berikut:
Gambar. 4 Opening screen dengan layout baru dalam modus portrait
Tugas Praktikum :
Tampilkan teks pada opening screen yang menunjukkan version dari aplikasi game Anda seperti yang
terlihat pada Gambar berikut :
Gunakan kontrol TextView dengan atribut-atribut sebagai berikut :
Attribute Value
android:layout_width ”fill_parent”
android:layout_height ”fill_parent”
android:layout_gravity ”center”
android:gravity ”center”
android:text ”@string/version_label”
android:textColor ”@color/version_color”
android:textSize ”@dimen/version_size”
android:lineSpacingExtra ”@dimen/version_spacing”
android:layout_marginTop ”20dip”
Menjalankan tombol About Game
Ketika user memilih tombol about, anda akan menampilkan pop-up windows yg disertai keterangan mengenai game anda. Untuk keperluan ini anda harus mendefinisikan sebuah activity baru ( About Activity ).
Langkahnya sbb:
1. Membuat AboutActivity.java
a. pada eclipse package explorer, sorot/src/coba.praktikum.mygame, klik kanan, pilih new -> class. Kemudian pd kotak dialog New Java Class isi name dgn AboutActivity. Kemudian finish.
b. Buka AboutActivity.java, selanjutnya override onCreate() dan panggil setContentView() sehingga seperti berikut ini :
Package coba.praktikum.mygame;
Import android.app.activity;
Import android.os.Bundle;
Public class AboutActivity extends Activity {
@Override
Protected void onCreate(Bundle savedInstanceState) {
Super.onCreateView(R.layout.about);
}
}
2. Buat file layout baru dlm dir. res/layout dgn nama about.xml, modifikasi file ini hingga terlihat 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”
android:padding=”10dip” >
<TextView
android:id=”@+id/about_dialog_box”
android:layout_width= "wrap_content"
android:layout_height = "wrap_content"
android:text = "@string/about_text" >
</TextView>
</ScrollView>
3. Buka file res/values/string.xml, tambahkan string untuk judul dan isi kotak dialog About atau pop-up windows anda :
<string name=”about_title”>Tentang Android Game</string>
<string name=”about_text”> Android Game merupakan sebuah permainan yang dibuat oleh komunitas mahasiswa STMIK KHARISMA KARAWANG pecinta Android…</string>
Selanjutnya hubungkan dengan activity utama MyGameActivity dgn cara menambahkan import kedlm MyGame Activity.java, dan dlm method onCreate() tambahkan kode untuk memanggil findViewById() untuk menetukan view android yg akan diberikan resource-ID masing-masing tombol, dan setOnClickListener() untuk memberitahukan android mengenai objek-objek manasaja yg tergelitik ketika user menyentuh dan menekan tombol.
4. Buka MyGameActivity.java, edit file sehingga hasilnya seperti ini :
import android.app.Activity;
import android.os.Bundle;
import android.content.Intent;
import android.view.view;
import android.view.view.onClickListener;
public class MyGameActivity extends Activity implements onClickListener {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
//**menyiapkan click listener untuk semua tombol dgn view
View contenueButton = findViewById(R.id.contenue_button);
continueButton.setOnClickListener(this);
View newButton = findViewById(R.id.new_button);
newButton.setOnClickListener(this);
View aboutButton = findViewById(R.id.about_button);
aboutButton.setOnClickListener(this);
View exitButton = findViewById(R.id.exit_button);
exitButton.setOnClickListener(this);
}
//**User memilih tombol menu
Public void onClick(view v) {
Switch (v.getId()) {
//tombol about
Case R.id.about_button :
Intent I = new Intent (this, About.class);
startActivity(i);
break;
//untuk tombol menu lain disini (jika masih ada)…
}
}
}
Setiap activity harus dideklarasikan dalam file manifest. Ikuti langkah berikutnya..!
5. Buka file AndroidManifest.xml, tambahkan tag <activity> baru setelah penutup tag <activity> sebelumnya. Deklarasikan AboutActivity dgn kode xml seperti berikut :
<activity android:name”.AboutActivity”
android:label=”@string/about_title” >
android:theme=”@android:style/Theme.Dialog”
</activity>
Save file dan jalankan program…!
Memulai Game baru
1. Buka string xml, tambahkan string ini untuk membuat judul dan isi dialog box :
<string name=”judul_game_baru”>Tingkat Kesukaran</string>
<string name=”label_mudah”>Mudah</string>
<string name=”label_sedang”>Sedang</string>
<string name=”label_sukar”>Sukar</string>
2. String dari detail tingkat kesukaran (isi dialog) akan di definisikan sbgai resource array. Buat resource array baru pada directori /res/values dg nama arrays.xml, tulis kode :
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string-array name=”tingkat_kesukaran”>
<item>@string/label_mudah</item>
<item>@string/label_sedang</item>
<item>@string/label_sukar</item>
</string-array>
</resource>
3. Buka main launch activity MyGameActivity.java, tambahkan beberapa import berikut :
import android.app.AlertDialog;
import android.content.DialogInterface;
4. Tambahkan kode dlm statemen switch dr method onClick() untuk menerima penekanan tombol New Game :
Case R.id.new_button :
openGameDialogBaru();
break;
5. Method openGameDialogBaru() digunakan untuk menangani pembuatan antarmuka untuk detail tingkat kesukaran (mudah,sedang,sukar) :
private void openGameDialogBaru() {
new AlertDialog.Builder(this).setTitle(R.string.judul_game_baru)
.setItems(R.array.tingkat_kesukaran,
new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialoginterface, int i) {
mulaiGame(i);
}
//memulai game baru sesuai tingkat kesukararan yg dipilih
private void mulaiGame(int i) {
//Game akan dimulai disini…
}
}).show();
}
Method setTitle() untuk mmberi judul kotak dialog menggunakan resource ID yaitu R.string.judul_game.baru..
Method setItem() untuk setting daftar item (mudah,sedang,sukar) yg akan ditampilkan sbg kotak dialog. Item harus didefinisikan sbg array string(lihat langkah2). Method ini menggunakan dua buah parameter yaitu resource ID dr daftar item dan listener yg akan dipanggil ketika salah satu item dipilih.
6. Keluar dari game
Tambahkan kode pd statemen switch dr method onClick() :
case R.id.new_button:
finish();
break;
Pada saat user memilih tombol Exit, maka method finish() akan dipanggil sehingga activity utama MyGameActivity menjadi shut down dan control akan kembali ke activity lain didlm stack aplikasi android (biasanya Home Screen).
SOAL TUGAS PRAKTIKUM :
Buatlah sebuah projek baru untuk membuat aplikasi yg menampilkan out put tampilan pada screen seperti berikut :
Petunjuk :
- Mulailah dengan menambahkan 4 resource grafik baru kedalam direktori /res/drawable (buat direktrori baru) : gambar1.png, gambar2.png, gambar3.png dan gambar4.png. resource grafik ini ditampilkan dalam control TabelLayout ditengah (center) pada output tampilan screen.
- Kemudian tambahkan 3 string baru kedalam /res/value/string.xml : untuk judul atas (Mengapa Begini), untuk judul bawah (Mengapa Begitu) dan untuk informasi seperti pada desain layout diatas.
- Buatlah file resource baru /res/value/colors.xml untuk mewarnai ketiga resource yg anda butuhkan, text judul (golden yellow #FFFF0F), text informasi versi (putih grayish #F0F0F0) dan warna background untuk text informasi versi (dark blue #1A1A48).
- Buatlah beberapa resource dimensi dlm file baru /res/values/dimens.xml tambahkan 3 nilai dimensi baru font judul (16pt), font informasi versi (5pt), spasi antar baris dr text informasi versi (3pt).
- Gunakan file2 yg telah dibuat dalam /res/layout/splash.xml (hapus main.xml buat file baru splash.xml)
Meng-Update screen layout :
1. Tambahkan control LinearLayout baru dan string :
Atribut LinearLayout Nilai Atribut
Background @android:color/black (warna dasar seluruh tampilan hitam)
Orientation vertical
Layout_width fill_parent
Layout_height fill_parent
2. Tambahkan control TextView dan beri nama id-nya dg textViewTopTitle dan seting layout_width ke fill_parent dan layout height ke wrap_content. Set control atribut text ke resource string dgn atribut textControl berwarna kuning emas (golden yellow) dan size ke resource dimensi yg telah anda buat
3. Tambahkan control Tablelayout dan beri nama id-nya dg TableLayout01, seting layout_width ke fill_parent dan layout height ke wrap_content. Set atribut stretchColumn ke “*”, untuk melebarkan kolom sesuai dg kebutuhan (modus fit screen).
4. Didalam TableLayout tambahkan control TableRow dg nama id TableRow01 (seting atribut lainnya hingga sesuai rancangan). Kemudian didalam control TableRow tambahkan 2 kontrol ImageView dgn masing2 nama id ImageView01 dn ImageView02. Untuk ImageView01 set atribut src @drwable/gambar1.png,
Untuk ImageView02 set atribut src @drwable/gambar2.png
5. Ulangi langkah 4 buat control TableRow kedua, tambahkan control ImageView untuk gambar3.png dan gambar4.png
6. Tambahkan control TextView dan beri nama id-nya dg textViewBottomTitle dan seting layout_width ke fill_parent dan layout height ke wrap_content. Set control atribut text ke resource string dgn atribut textControl berwarna kuning emas (golden yellow) dan size ke resource dimensi yg telah anda buat
7. Untuk informasi versi, buatlah control TextView dan beri nama id-nya dg textViewbottomVersion dan seting layout_width ke fill_parent dan layout height ke wrap_content. Set control atribut text ke string yang sesuai, atribut textcolor ke warna putih Grayish, dan atribut textsize ke resource dimensi yg telah dibuat juga set atribut background ke dark blue dan LineSpacingExtra kenilai resource dimensi.
8. Aturlah string layout_gravity dan gravity dr kontrol2 diatas ke posisi yg sesuai.
Postingan
