Seri Belajar Java For Android : Mengambil String dari Komponen EditText dan Menampilkannya ke Komponen TextView

Tutorial pemrograman Java for Android kali ini akan membahas tentang bagaimana melakukan handling pertukaran data antar komponen UI (User Interface) saat runtime. Komponen yang akan dibahas adalah komponen EditText (ada di Pallete ‘TextFields’ di  Eclipse), komponen TextView (Pallete ‘Form Widget’) dan komponen Button (Pallete ‘Form Widget’). Secara umum komponen EditText fungsi utamanya adalah ‘menangkap’ input yang diketikkan user, komponen TextView adalah untuk menampilkan sembarang teks di layar dan komponen Button adalah semacam tombol yang bisa diklik dan akan melakukan suatu ‘aksi’ sesuai event handler-nya. [AdSense-A]

Kali ini kita akan membuat sebuah program Android yang dapat mengambil data input user di komponen EditText dan menampilkannya di komponen TextView melalui event onClick komponen Button. Jadi mudahnya, kalau user meng-klik tombol Button, maka input (tulisan) yang ada di EditText akan berpindah ke TextView. Melalui program sederhana ini saya harapkan Anda dapat lebih mengerti tentang interaksi komponen UI (User Interface) dalam Android dan bagaimana cara meng-handle-nya.

Buka IDE (Integrated Development Environment) Eclipse Anda (bisa di-download di developer.android.com), dan buat project Android Application baru melalui menu File | New | Android Application Project. Jika tertampil jendela wizard pembuatan project baru, ikuti saja sampai selesai. Berikutnya klik tab ‘activity_main.xml’ di jendela tengah di Eclipse dan klik tab ‘Graphical Layout’ di pojok kiri bawah di jendela tengah tersebut. Untuk lebih jelasnya perhatikan gambar di bawah. 

Selanjutnya ambil (drag and drop) komponen TextView (di Pallete ‘Form Widget’), Button (Pallete ‘Form Widget’) dan EditText (Pallete ‘TextFields’) di Form Designer dan atur peletakannya sesuai gambar di atas. Double click komponen Button, dan tambahkan properti onClick untuk meng-handle event onClick dari user (perhatikan kode XML di bawah yang di-bold dan di-underline)

<Button

        android:id=“@+id/button1”

        android:layout_width=“wrap_content”

        android:layout_height=“wrap_content”

        android:layout_below=“@+id/textView1”

        android:layout_marginLeft=“14dp”

        android:layout_marginTop=“55dp”

        android:layout_toRightOf=“@+id/textView1”

        android:onClick=“tombolonclick”

        android:text=“Button” />

Kemudian klik tab ‘MainActivity.Java’ untuk mulai mengisikan program utamanya

package com.example.ui;
import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.widget.EditText;
import android.widget.TextView;
public class MainActivity extends Activity {
       @Override
       protected void onCreate(Bundle savedInstanceState) {
              super.onCreate(savedInstanceState);
              setContentView(R.layout.activity_main);
       }
       @Override
       public boolean onCreateOptionsMenu(Menu menu) {
              // Inflate the menu; this adds items to the action bar if it is present.
              getMenuInflater().inflate(R.menu.main, menu);
              return true;
       }

       public void tombolonclick (View arg0) {
              EditText teksedit = (EditText) findViewById (R.id.editText1);
              TextView teks = (TextView) findViewById (R.id.textView1);
              teks.setText(teksedit.getText());
       }
}

Perhatikan baris 1 sampai dengan 19 adalah script yang otomatis dibuat oleh Eclipse (kecuali baris 5 s/d 7 harus ditambahkan sendiri) dan baris 21 sampai dengan 25 adalah script yang harus Anda tambahkan sendiri. Jadi script inilah (baris 21 s/d  25 yang sesungguhnya meng-handle aktivitas user, yakni jika tombol diklik maka tulisan dari kotak Edit (komponen EditText) akan berpindah ke tulisan TextView. Berikut penjelasannya :

Baris 21 : menciptakan procedure baru dengan nama ‘tombolonclick’ sesuai yang didefinisikan di file activity_main.xml

Baris 22 dan 23 : menciptakan instance baru dari object (komponen) EditText dan TextView. ‘teksedit’ adalah instance dari object EditText yang di-refer oleh komponen ‘editText1’ di file activity_main.xml dan ‘teks’ adalah instance dari object TextView yang di-refer oleh komponen ‘textView1’ di file activity_main.xml. Instance ini berikutnya dapat Anda manipulasi (dioperasikan) sesuai dengan tujuan pembuatan program. Perhatikan baris selanjutnya (baris ..). Pada baris ini instance ‘teks’ dan ‘teksedit’ dioperasikan sedemikian rupa supaya tulisan yang ada di kotak edit (instance ‘teksedit’) di-copy-kan (berpindah) ke instance ‘teks’ (yang merupakan turunan object TextView). Cara mendapatkan isi dari instance teksedit adalah dengan memanggil fuction ‘getText() dan berikutnya adalah langsung mengesetnya ke instance ‘teks’ (TextView) dengan memanggil fuction ‘setText()’. Efek dari pemanggilan kedua function tadi adalah sama seperti halnya ‘meng-copy’ dari kotak Edit ke TextView’. Berikut adalah script lengkapnya.

teks.setText(teksedit.getText());

Berikutnya siapkan AVD (Android Virtual Device) atau device Android sesungguhnya untuk menjalankan program yang Anda buat tadi. Kalau untuk saya pribadi, saya lebih suka menggunakan device android yang riil karena lebih cepat dalam proses compile-run setiap program yang kita buat.

Jika berhasil run program, seharusnya dalam layar android Anda akan muncul tampilan seperti di bawah :

Saat pertama kali running 

Saat kotak edit diisi sembarang string 

Saat tombol Button diklik 

Semoga artikel ini bermanfaat buat Anda. Program selengkapnya dapat Anda download di sini, tapi saya sarankan untuk tetap membuat program sendiri karena akan lebih mengena di hati :). Ohya, jika masih bingung tentang event onClick komponen Button dapat membaca artikel saya sebelumnya di sini. [AdSense-A]