BAGIAN

HELLO ANDROID
Sekarang kita akan membuat program pertama kita pada android , seperti belajar bahasa
pemrograman yang lainnya, biasanya program pertama yang dibuat adalah program
untuk menampilkan tulisan hello word, lebih sering dikenal dengan program hello
word.
Program HelloAndroid1
Jalankan IDE Eclipse, pilih File-New-Android Project,sehingga muncul pilihan seperti
berikut :

Gambar 3.1. Create New Project Android.

19
Hello Android

Selanjutnya ada pemilihan opsi custom launcher dan activity class seperti gambar
berikut ini :

20
Hello Android

Selanjutnya menentukan launcher icon serta warna background tampilan seperti gambar
berikut :

21
Hello Android

Untuk menjalankan programnya adalah click kanan dinama project di jendela project
explorer (menampilkan project explorer dengan menu windows show view - project
explorer), kemudian pilih menu Run As-Android Aplications atau dengan cara singkat
click tombol run yang berbentuk segitiga ke kanan pilih Run As-Android Aplications
sehingga muncul tampilan seperti berikut :

Gambar 3.2. Program HelloAndroid1

Ketika anda merunning aplikasi android, membutuhkan waktu untuk proses loading
emulatornya, dianjurkan setelah anda berhasil merunning program tidak perlu menutup
emulatornya apabila ada program aplikasi yang lain yang akan di running, sehingga
tidak membutuhkan waktu lagi untuk booting emulator tetapi langsung mengesksekusi
project android yang akan kita jalankan. Tampilkan project explorer untuk melihat
semua elemen-elemen yang ada pada program HelloAndroid seperti gambar dibawah
ini.

22
Hello Android

Gambar 3.3 View Project HelloAndroid1

Dari gambar view diatas, dapat kita lihat susunannya, file java berada dalam folder src,
file generate java file (R.java) berada pada folder gen, file Libraries android platform
aplikasi berada pada folder Android2.3 dimana versi 2.3 adalah target platform aplikasi
yang kita bangun. file xml berada pada folder res(layout/values), serta file
Android.Manifest.xml serta default.properties.
hello.java
package com.wilis.hello;
import android.app.Activity;
import android.os.Bundle;
public class hello extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}
}

Activity adalah merupakan basic class untuk sebuah user interface. Dimana kita lihat
bahwa di dalam Activity terdapat sebuah method onCreate yang berfungsi untuk
memanggil setContenView. sementara setContenView memanggil sebuah file main.xml
(R.layout.main), main.xml ini yang bertindak sebagai user interface.
Double click file main.xml dan pilih tab main.xml untuk melihat kode main.xml.
main.xml
<?xml version="1.0" encoding="utf-8"?>

23
Hello Android

<LinearLayout
xmlns: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>

Dari source coding main.xml diatas, dapat kita lihat bahwa untuk menampilkan text
adalah dengan coding android:text=@string/hello kode ini menunjukkan bahwa
android:text berasal dari string.xml pada directory res/values, melalui pointer yang
berada pada file R.java.
File R.java ini digenerate oleh sistem secara otomatis, dan tidak diperkenankan diubah
secara langsung.
R.java
package com.wilis.hello;
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;
}
}

Berarti string yang ditunjuk yaitu string yang berada dalam file string.xml, string dalam
file inilah yang akan ditampilkan ke user interface.
string.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="hello">Hello World, hello!</string>
<string name="app_name">hello</string>
</resources>

24
Hello Android

Sebagai latihan, Anda dapat ubah isi dari string menjadi <string name=hello>Hai,
ini program pertama saya diandroid!</string>. Kemudian running ulang
aplikasinya dan lihat hasilnya.
Program HelloAndroid2
Buatlah project baru dengan ketentuan berikut ini :
Project Name
Buitl Target
Application name
Package name
Activity
Min SDK

: HelloAndroid2
: Android 2.3
: hello
: com.wilis.hello
: hello
:9

Dari program sebelumnya dapat kita lihat bahwa coding aplikasi untuk menampilkan
hello nya adalah melalui file xml yaitu main.xmlstring.xml (coding seperti inilah yang
direkomendasikan),untuk lebih mendalami sekarang kita akan coba membuat hello
android dengan coding melalui file java.
Pertama hapus beberapa dari file main.xml sehingga menjadi seperti berikut :
<?xml version=1.0 encoding=utf-8?>
<LinearLayout
xmlns:android=http://schemas.android.com/apk/res/android
android:orientation=vertical
android:layout_width=fill_parent
android:layout_height=fill_parent
>
</LinearLayout>

Kalau kita perhatikan dalam main.xml ini tidak memiliki TextView seperti pada
main.xml HelloAndroid1, ini artinya bahwa main.xml tidak memiliki komponen yang
mau ditampilkan sebagai layout User Interface(UI). Sehingga coding di hello.java kita
tidak memerlukan untuk memanggil R.layout.main, ubah file hello.java menjadi seperti
coding dibawah ini:
package com.wilis.hello;
import android.app.Activity;
import android.os.Bundle;
import android.widget.TextView;
public class hello extends Activity {
/** Called when the activity is first created. */
@Override

25
Hello Android

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);
TextView hello = new TextView(this);
hello.setText("Hello Android");
setContentView(hello);
}
}

Jalankan aplikasi dan lihat hasilnya seperti apa.

Program HelloAndroid3
Berikut kita akan coba memodifikasi tampilan layar program HelloAndroid dengan
warna tulisan dan warna background. Buatlah project baru dengan ketentuan berikut ini :
Project Name
Buitl Target
Application name
Package name
Activity
Min SDK

: HelloAndroid3
: Android 2.3
: hello
: com.wilis.hello
: hello
:9

hello.java
package com.wilis.hello;
import android.app.Activity;
import android.os.Bundle;
public class hello extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}
}

main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background ="#ff00ff00"
>
<TextView

26
Hello Android

android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:color ="#ffffff00"
android:background ="#ff0000ff"
android:text="Nazruddin Safaat H."
/>
</LinearLayout>

Dalam coding diatas berarti program dalam menampilkan isi text langsung dari
main.xml, tidak menampilkan berdasarkan string.xml karena dalam main.xlm tidak ada
statement yang memanggil string.xml (seperti contoh ke-2 kita yang telah dibahas
sebelumnya),
android:background
=#ff00ff00
dan android:color
=#ffffff00 adalah untuk memberikan warna background dan memberikan warna text yang

akan ditampilkan pada layar aplikasi android kita. Untuk pemilihan jenis-jenis warna pada layar
dapat
lihat
di
:

http://developer.android.com/reference/android/graphics/Color.html.
Berikut ini adalah tampilan dari coding diatas :

Gambar 3.4. Program HelloAndroid3

Program HelloAndroid4
Untuk mempermahir dalam pemahaman sturuktur aplikasi Android, kita akan membahas
lagi program HelloAndroid, tapi kali ini menggunakan gambar, baik itu dengan coding
java maupun coding xml. Buatlah project baru dengan ketentuan berikut ini :
Project Name
Buitl Target
Application name
Package name
Activity
Min SDK

: HelloAndroid4
: Android 2.3
: hello
: com.wilis.hello
: hello
:9

Sediakan file gambar android.png seperti dibawah ini. (file dalam format png)

27
Hello Android

Gambar 3.5. android.png

Simpan file itu di folder HelloAndroid/res/drawable-mdpi (project android kita biasanya
berada dalam folder workspace di folder user), sehingga tampilan project view kita
seperti ini. (jika file belum tampil lakukan refresh atau tekan F5). Cara memasukkan
filenya bisa juga anda lakukan dengan click kanan file di windows explorer pilih copy,
kemudian bukan project view di eclipse, pilih drawable-mdpi, kemudian click kanan dan
pilih paste.

Gambar 3.6 HelloAndroid view drawable

Berikut coding HelloAndroid gambar dengan kode java
hello.java
package com.wilis.hello;
import android.app.Activity;
import android.os.Bundle;
import android.widget.ImageView;
public class hello extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
ImageView HelloWord = new ImageView(this);
HelloWord.setImageResource(R.drawable.android);
setContentView(HelloWord);
}
}

28
Hello Android

Image dipanggil dengan R.drawable.android (android adalah nama file tanpa ekstensi
png dalam pemanggilannya)
main.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
</LinearLayout>

Perhatikan coding java dimana kita menggunakan statetement setContentView

(HelloWord); untuk menampilkan ke layar dimana HelloWord itu sendiri
didefenisikan sebagai image android, tentunya ini memerlukan libraries yaitu dengan
mengimport paket widgets dengan perintah import android.widget.ImageView;
Penjelasan tentang android.widget akan dijelaskan pada bagian Widget. Ketika
program diatas di jalankan akan menghasilkan gambar sebagai berikut :

Gambar 3.7. Program HelloAndroid4

File gambar yang ditampilkan umumnya harus file bertipe png dan ukuran sizenya 64 x
64 pixel, apabila anda memiliki gambar yang tipenya jpg, anda dapat convert dengan
tools converter image atau membuka file itu dengan mspaint dan menyimpannya dengan
save as format sebagai png.
Program HelloAndroid5
Proram HelloAndroid4 menggunakan coding java dalam menampilkan gambarnya, pada
program HelloAndroid5 ini kita akan mencoba menampilkan gambar sebagai
HelloAndroid dengan coding xml. Buatlah project baru dengan ketentuan berikut ini :
Project Name
Buitl Target
Application name
Package name
Activity

: HelloAndroid5
: Android 2.3
: hello
: com.wilis.hello
: hello

29
Hello Android

Min SDK
:9
Masukkan kembali file gambar seperti pada bahasan HelloAndroid4.
hello.java
package com.wilis.hello;
import android.app.Activity;
import android.os.Bundle;
public class hello extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}
}

Perhatikan dalam hello.java di atas kita tidak memerlukan libraries

android.widget.ImageView, hal ini dikarenakan kita menampilkan gambarnya
menggunakan coding xml bukan melaui coding java.
main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<ImageView android:id="@+id/imageview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:src="@drawable/android"
/>
</LinearLayout>

Lakukan run program, sehingga menghasilkan hasil yang sama dengan gambar 3.7 ditas,
sekarang coba dengan menampilkan imageView dengan format wrap_content, artinya
setiap coding fill_parent diganti dengan wrap_content dan perhatikan apakah
ada perbedaan hasil tampilan programnya.

30
Hello Android