Program Welcome Android Dengan Inputan User

Sesuai dengan tradisi, untuk membuat program pertama, biasanya programmer membuat program menampilkan kalimat “Hello World” atau sejenisnya. Untuk melestarikan tradisi, pada project android pertama ini, kita akan membuat sebuah program untuk menampilkan kalimat “welcome android” yang di inputkan oleh user.  sebelum membuat program welcome android, anda bisa melihat output dari program welcome android di bawah ini :

Dari program welcome android tersebut, kita membutuhkan beberapa komponen widged untuk membuat UI (User Interfacenya) terlebih dahulu, diantaranya L Sesuaikan setiap variabel komponen widgednya sesuai Variabel Name pada tabel berikut ini”.

Widged	Variabel Name	Label
<TextView>	__	Project Welcome Android Dengan Inputan User
	TextView1	Ketikkan Kalimat
	TextView2	Kalimat yang telah anda ketik
<EditText>	txtInput	—————————————-
	TxtOutput	—————————————-
<Button>	btnShow	Show
	btnReset	Reset

Kemudian anda buka file main.xml, untuk membuat desain User Interfacenya dan mendefinisikan variabel id widgednya. Kemudian masuk kedalam mode Grapichal Layout untuk drag and drop widged ke container atau mode main.xml ke dalam mode text xml. Kemudian masuk ke dalam mode main.xml. Sehingga draft dari struktur main.xml adalah :

<?xml version=”1.0″ encoding=”utf-8″?>

<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android&#8221;

android:orientation=”vertical”

android:layout_width=”fill_parent”

android:layout_height=”fill_parent” >

<!– Widged TextView menciptakan PROJECT WELCOME ANDROID DENGAN INPUTAN USER –>

<TextView

( ……………………….. )

<!– Widged TextView menciptakan label Ketikkan Kalimat –>

<TextView

( ……………………….. )

</TextView>

<!– Membuat desain layout secara relative untuk mengatur komponen widged secara relative–>

<RelativeLayout android:layout_width=”match_parent” android:layout_height=”wrap_content”

android:id=”@+id/relativeLayout1″>

<!– Menciptakan EditText untuk input teks Input lebih dari satu baris –>

<EditText android:inputType=”textMultiLine”

( ……………………….. )

</EditText>

<!—Widged Tombol Menciptakan Tombol Reset –>

<Button android:text=”Reset”

(…………………………….)

</Button>

<!—Widged Tombol Menciptakan Tombol Show–>

<Button android:text=”Show”

(…………………………….)

</Button>

</RelativeLayout>

<!– Widged TextView menciptakan label Kalimat yang telah anda ketik –>

<TextView android:layout_marginLeft=”40dp”

(…………………………….)

</TextView>

<!– Menciptakan EditText untuk input teks Output lebih dari satu baris –>

<EditText android:layout_marginLeft=”40dp”

(…………………………….)

</EditText>

</LinearLayout>

Pada semua widged EditText kita gunakan inputnya bertipe “TextMultiLine”, untuk menginputkan kalimat lebih dari satu baris.

<EditText  android:inputType=” TextMultiLine” >

Pada widged EditText untuk Output-nya kita berikan nilai false untuk mencegah pengeditan teks.

<EditText android:enable=”false”>

Kemudian jalankan project HelloAndroid, untuk melihat basic desain yang baru kita buat di main.xml

Basic desain tersebut masih belum dapat digunakan untuk menampilkan input kalimat dari user, maka  harus diberikan aksi melalui tombol show dan reset ketika di tekan.  Untuk mendefinisikan aksi tombol,kita harus mengimplement method setOnClickListener(new View.OnClickListener(). Kemudian meng-overidenya berupa method public void onClick (View view), dimana pada method tersebut source code ditempatkan dan dieksekusi ketika tombol (mana) ditekan.

“KETIKA TOMBOL SHOW DITEKAN MAKA CODE YANG BERADA DALAM METHOD ONCLICK DIEKSEKUSI DAN KALIMAT YANG DI INPUTKAN DALAM EDITTEXT INPUT USER AKAN DITAMPILKAN PADA EDITTEXT OUTPUT”

Button tombol = (Button) findViewById(R.id.btnShow)

tombol.setOnClickListener(new View.OnClickListener() {

public void onClick(View view){

EditText input  = (EditText) findViewById(R.id.txtInput);

EditText output = (EditText) findViewById(R.id.TxtOutput);

String stInput1 = input.getText().toString();

/* Tampilkan teks menggunakan method setText */

output.setText(stInput1); }});

“KETIKA TOMBOL RESET DITEKAN MAKA CODE YANG BERADA DALAM METHOD ONCLICK DIEKSEKUSI DAN KALIMAT DI DALAM EDITTEXT DIHAPUS SEMUA (RESET)”

Button tombol = (Button) findViewById(R.id.btnShow){

reset.setOnClickListener(new View.OnClickListener() {

public void onClick(View arg0) {

EditText input  = (EditText) findViewById(R.id.txtInput);

EditText output = (EditText) findViewById(R.id.TxtOutput);

String stInput2   = input.getText().toString();

/* Reset Teks */

input.setText(“”);

output.setText(“”);

}});

Kemudian anda jalankan untuk melihat hasil ahkirnya :

Inputkan sebuah kalimat kemudian tekan tombol show, jika berhasil akan ditampilkan sesuai dengan kalimat yang anda inputkan.

Sekian untuk pembuatan tutorial yang singkat dan sederhana ini, anda bisa menggunakan complete project dan tutorialnya dengan mendownload link berikut : Project Welcome Android

Salam Hangat dan Assalamualaikum Wr.Wb