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]
a Technopreneur – writer – Enthusiastic about learning AI, IoT, Robotics, Raspberry Pi, Arduino, ESP8266, Delphi, Python, Javascript, PHP, etc. Founder of startup Indomaker.com
hmm mau tanya nih kx, saya bikin program client-server (antara android dan textpad) nah kalo mau ngambil tulisan trus nampilinnya di UI client gimana ya? Aku udh coba2 tpi blom bisa, mungkin kakk punya contohnya? boleh donk dishare.. makasih kx sbelumnya..
untuk aplikasi client server menggunakan device mobile sebaiknya menggunakan teknologi restful (post/get) atau bisa juga menggunakan protokol MQTT yg biasa dipakai di IoT (internet of Things)
teknologi restful (post/get) yg sya tahu ada di bhasa php, memang itu yg dmksud bkan kx?
tpi yg sya buat antar java.. ada solusi lain kx?
sya mencoba membuat code dlm bhsa java untuk mnerima informasi dari server dan code tsb bisa bkerja jika menggunakn netbeans (sbg client) dan textpad (sbg server).. namun ketika code client sya pindah ke Android Studio, tidak ada info appun dri server yg masuk..
Codenya:
String result = socket.readLine();
textView.setText(result);
internet permission nya udah di-allow belum mas?
di java juga bisa mas
sudah kx.. tpi ttap tidak ada respon dri server yg masuk, apa saya slah penulisan dalm programnya atw ada yg kurang ya?
di server code mngirim datanya :
out.writeBytes(“string”+ “\n”);
dan clientnya nerima respon seperti code yg sudh sya up sblumnya.
apa ad yg kurang dlm progrm pengirim respon atw pnerimanya?
tlong bntuannya kx..
sy juga bingung yg dimaksud, he he he. Server pake textpad maksudnya gimana? Method server dalam merespon request dari client gimana?
Hmm ribet klo di comment gini, bisa langsung chatting gak kak? lewat email mungkin…
maaf, tidak menerima konsultasi via japri. Kalo merasa ribet dipersilahkan mencari orang lain yang mau diajak utk free konsultasi sesuai keinginan, saya juga ngga memaksa untuk konsultasi sama sy
mksudnya program server itu sya jlankan lewat textpad (buat smentara) biar bisa di uji coba,
Method server dlm nerima datanya bgini:
ServerSocket ss = new ServerSocket (NO_PORT);
socket = ss.accept();
in = new BufferedReader (new InputStreamReader (ss.getInputStream()));
out = new DataOutputStream (ss.getOutputStream);
boolean input = false;
while (!input){
data = in.readLine();
if(data.startsWhit(“ON”)){
out.writeBytes (“Lampu Nyala” +”\n”);
}
}
out.close(); in.close(); ss.close();
sy msh ga paham mengapa textpad bisa menjalankan app server. Tapi berdasarkan script server, kyknya kesalahan di baris ini : data = in.readLine(); –> analisa sy, ini kan data stream ya, jadi kalo statement-nya hanya ‘data = in.readLine();’ maka yang ditangkap variabel ‘data’ hanya sesaat saja, jadi ga bakalan nemu trapping pada statement baris di bawahnya ‘if(data.startsWhit(“ON”))’
Solusinya coba gini : data = data + in.readLine(); –> ini artinya data stream yang masuhk dikumpulin dulu di variabel ‘data’, baru diuji di baris dibawahnya
msih blom ad sttus yg masuk ke app androidnya kak..
prog.server dijlankan di textpad hnya smentara, nnti itu dipindah ke raspberry.
dri program client nerima status dr server ada yg kurang atau salah gak kak? krna klo program client di jlankan di netbeans, statusnya trbaca. 🙁
maaf soal konsltasi via japrinya kak.
sepintas sih program server udah bener. Sebentar saya mau nanya, ketika program client dijalankan di netbean, program server ada dimana? satu lokasi (satu laptop) ngga dengan program client?
iya kak, saya jalankan di satu laptop kedua programnya..
nah, di sini bedanya dengan Android, kalo hape android kan terpisah lokasinya dengan laptop, perlu diperhitungkan pula mau pake koneksi apa ke laptop sebagai server? Apakah bluetooth, kabel data, WIFI ataukah internet? Tentunya pemrogramannya akan berbeda
atau ada kemungkinan program client yang blom bener kak?
ini program clientku kak:
Socket s = new Socket (host, port);
DataOutputStream out = new DataOuptutStream (s.getOutputStream());
BufferedReader in = BufferedReader (new InputStreamReader (s.getInputStream()));
out.writeBytes(“ON” + “\n”);
String status = in.readLine();
textView,setText (status);
dijawab dulu pertanyaan saya sebelumnya
sya pakek jaringan wifi untuk komunikasinya kak
jadi kalo pemrograman socket via wifi, untuk sisi client yg perlu diperhatikan masalah ip address server dan listening port -nya. Coba di cek dulu apakah ip address server (host) dan listening port sudah sesuai atau blm? Khusus utk listening port jangan pake yg udah di-reserved ya, semacam port 22 (SSH), 23 (telnet), 80 (http), dll
Kemudian sisi server, coba dicek dulu apakah Firewall-nya aktif atau ngga (kalo pake windows ya : Windows Firewall). Kalo masih aktif coba di nonaktifkan sementara atau coba di-allow listing port yang digunakan dlm program
saya menggunakan nomor port 2525, dengan IP lokal 10.0.2.2, di server juga port 2525. Firewall dilaptop saya sudah off kak, saya coba untuk allow listing port 2525 dan mencoba menjalankan programnya, tpi blum berhasil.
Assalamuallaikum
mas mau tanya, kalau hasil output dari android langsung di parsing terus dikirim ke server memakai apa ya mas?
makasih
waalaikumsalam wr. wb. Ada banyak cara untuk parsing, salah satunya bisa pake kombinasi string.split, useDelimitier dan trim. Kalo kirim ke server bisa pake POST/GET pake HttpClient. Tapi di sisi server harus disiapin script handler-nya ya. Bisa pake PHP buat script servernya
mau nanya, gimana caranya misal kita input “aku” outputnya “gue”
if nya gmn ya?
Kak utk menampilkan tulisan text view stlah kita klik button, gmn ya ka?
di artikel di atas kan udah ada contohnya. Coba lihat di procedure tombolonclick(), terutama di bagian teks.setText(‘bla bla…’);
Itu sama gk kak ky :
Misal ada game tebak2 an. Lalu kita menjawab dgn klik button jawaban yg salah.. Kemudian muncul textview ‘jawaban salah’
Tanpa mnggunakan edit text dulu
langsung aja teks.setText(‘jawaban salah’);
Bs kash sourcode nya kak utk button td?
Trus utk webview bs gak kak di masukkan text to speech?
Mohon pencerahan nya kak.
di atas kan udah ada sourcecode nya, tinggal di copy aja
Trus utk webview bs gak kak di masukkan text to speech? –> bisa aja
Mas, kalau tanpa klik button tulisanya langsung tampil gimana ya, mohon bantuanya..
pengertiannya langsung tampil gimana mas?
apa trigger/pemicu tulisan tsb tampil? apakah event onClick, onMouseHover atau event yg lain?
Harus ditentukan dulu mas, baru bisa dibikin programnya