Pada kesempatan kali ini, saya akan membagikan tutorial bagaimana membuat aplikasi android “Say Hello”. Aplikasi ini sangat simple sekali, pengguna cukup mengetikkan nama, lalu pengguna menyentuh tombol say hello, maka aplikasi akan menampilkan tulisan say hello. Misal pengguna mengetikkan nama “codenesia”, maka program akan menampilkan “Haloo codenesia”. Yang ingin saya tekankan dalam tutorial kali ini yaitu pengetahuan dasar bagaimana menggunakan editText, TextView dan button
Langsung saja, ayo kita mulai tutorialnya. Untuk membuat aplikasi android say hello, caranya cukup mudah yaitu :
- Buka software eclipse
- Pilih menu file kemudian klik new kemudian pilih android application project
- Isikan isiannya. Kemudian klik Next
- Kemudian klik Next
- Kemudian klik Next
- Lalu klik Next
- Kemudian klik Finish
Jika anda masih bingung cara diatas, silahkan lihat kembali artikel Membuat aplikasi android Hello World , Karena pada artikel tersebut telah dilengkapi gambar tutorial.
Ketika anda sudah selesai membuat new android application project, langkah selanjutnya yaitu ubah layout activiy_main.xml. Caranya double klik folder res, kemudian double klik folder layout, lalu double klik activiy_main.xml. Lalu ubah code nya seperti dibawah 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" >
<TextView
android:id="@+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="22dp"
android:layout_marginTop="20dp"
android:textSize="18sp"
android:text="Masukkan nama anda" />
<EditText
android:id="@+id/nama"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/text1"
android:layout_below="@+id/text1"
android:layout_marginTop="18dp"
android:ems="10"
android:inputType="textPersonName" >
<requestFocus />
</EditText>
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/nama"
android:layout_below="@+id/nama"
android:layout_marginTop="16dp"
android:text="Say Hello" />
<TextView
android:id="@+id/hasil"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/button1"
android:layout_below="@+id/button1"
android:layout_marginTop="15dp"
android:textSize="18sp" />
</RelativeLayout>
Pada kode diatas, akan menampilkan sebuah tampilan yang terdiri dari 2 TextView, 1 EditText dan 1 Button. Berikut penjelasan singkat untuk kode diatas.
#Penjelasan kode baris ke 7 – 15
android:id=”@+id/text1″ —> id dari sebuah Textview. Setiap editText, Textview, Button dan view lainnya mempunyai id yang unik dan berbeda
android:layout_width=”wrap_content” —> kode ini untuk mengatur ukuran lebar layout (wrap content berarti ukurannya sesuai dengan kontennya). Bisa juga diatur dengan angka, misal : android:layout_width=”76dp”
android:layout_height=”wrap_content” —> kode ini untuk mengatur ukuran tinggi layout
android:layout_alignParentLeft=”true” —> kode ini berarti bahwa posisi textview berada di pojok kiri dari layout
android:layout_alignParentTop=”true” —> kode ini berarti bahwa posisi textview berada di paling atas dari layout
android:layout_marginLeft=”22dp” —> dengan margin sebelah kiri sebesar 22 dp (density pixel)
android:layout_marginTop=”20dp” —> dengan margin sebelah atas sebesar 20 dp (density pixel)
android:textSize=”18sp” —> dengan ukuran tulisan sebesar 18 sp
android:text=”Masukkan nama anda” —> dan akan menampilkan tulisan “Masukkan nama anda”
#Penjelasan kode baris ke 21 – 22
android:layout_alignLeft=”@+id/text1″ —> posisi sebelah kiri dari EditText dengan id “nama” mengikuti posisi Textview dengan id “text1″
android:layout_below=”@+id/text1” —> EditText dengan id “nama” posisinya dibawah persis dari Textview dengan id “text1”
Setelah kita membahas mengenai layout, mari selanjutnya kita akan membahas logic programming. Bukalah MainActivity.java. Pertama-tama kita akan mendeklarasikan sebuah TextView, EditText dan Button seperti kode dibawah
EditText nama; Button tombol; TextView hasil;
Taruhlah kode diatas tepat dibawah kode public class MainActivity extends Activity {
Selanjutnya kita akan melakukan inisialisasi Textview, EditText dan Button yang akan menghubungkan variabel di java dengan view yang telah kita buat di xml
nama = (EditText) findViewById(R.id.nama); tombol = (Button) findViewById(R.id.button1); hasil = (TextView) findViewById(R.id.hasil);
Kode diatas silahkan taruh dibawah kode setContentView(R.layout.activity_main); . Kode diatas berarti bahwa, variabel nama di MainActivity.java telah terhubung dengan view dengan id “nama” di layout activity_main.xml. Begitupun juga dengan variabel tombol terhubung dengan view ber id “button1”, dan variabel hasil terhubung dengan view ber id “hasil”
Setelah kita melakukan inisialisasi, selanjutnya kita akan melakukan penanganan event (Event Handling). Penanganan event dimaksudkan untuk menangani jika tombol “Say Hello” pada aplikasi ditekan/disentuh oleh pengguna. Penanganan event ini, kita bisa mensetting aplikasi untuk berbuat sesuatu jika button “Say Hello” disentuh. Nah dalam tutorial ini kita akan mensetting aplikasi untuk menampilkan say hello jika pengguna memasukkan namanya dan menyentuh tombol say hello. Pertama-kita akan melakukan setonclicklistener pada variabel tombol
tombol.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
}
});
Kemudian kita akan melakukan perintah untuk mengambil inputan dari pengguna yang kemudian kita akan simpan dalam variabel “namaAnda” lalu kita akan tampilkan di Textview hasil dengan tampilan “Halooo (nama pengguna)”
tombol.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
String namaAnda= nama.getText().toString();
hasil.setText("Halooo "+namaAnda);
}
});
Kode diatas berarti bahwa, aplikasi akan melakukan perintah kode yang ada di dalam blok kode public void onClick(View v) { } jika pengguna menyentuh tombol dalam aplikasi yaitu tombol “Say Hello”. Berikut ini kode lengkap yang ada didalam MainActivity.java
package com.codenesia.sayhello;
import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;
public class MainActivity extends Activity {
EditText nama;
Button tombol;
TextView hasil;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
nama = (EditText) findViewById(R.id.nama);
tombol = (Button) findViewById(R.id.button1);
hasil = (TextView) findViewById(R.id.hasil);
tombol.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
String namaAnda= nama.getText().toString();
hasil.setText("Halooo "+namaAnda);
}
});
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.activity_main, menu);
return true;
}
}
Silahkan download project aplikasi dari tutorial ini disini
Screenshoot Aplikasi
@dwijanto10