Praktikum Programming TextView dan EditText Pada Android

TextView pada Android digunakan untuk manampilkan teks atau tulisan pada layar atau perangkat android.Sedangkan
EditText digunakan oleh user untuk menginput atau memasukkan tulisan, teks atau angka. Pada tutorial kali ini kita
akan membuat aplikasi sederhana untuk memasukkan teks dan kemudian menampikanya di layar perangkatAndroid.

Langkah yang pertama kita jalankan Eclipse yang sudah terinstal Android SDK, buat proyek android baru dengan cara
mengklik File>New>Android Application Project.

Selanjutnya isi bidang-bidang yang harus diisi, nama aplikasi, minimum sdk, compile with dan sebagainya. Nama
aplikasi diisi sesuai dengan nama aplikasi yang kita inginkan. Tidak ada aturan baku mengenani penamaan aplikasi,
namun yang paling penting nama aplikasi yang kita buat harus mudah dii ngat dan mencirikan aplikasi kita. Misal pada
aplikasi ini saya namai Teks Input. Untuk bidang-bidang yang lain bisa memilih diantara pilihan yang sudah ada.

Klik next sampai finish. Selanjutnya kita akan membuat layout aplikasi kita. perlu diingat setiap aplikasi androidterdiri
dari dua komponen utama yaitu layout dan logika program. Layout aplikasi android dibuat menggunakan baha xml,
sedangkan logika program menggunakan bahasa pemrograman java. Layout aplikasi android terletak pada
res/layout/activity_main.xml. Buka file activity_main.xml tersebut, ganti kodenya menjadi seperti berikut.
<LinearLayout 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"
 android:orientation="vertical" >

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/nm" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/edt"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/btn"
android:id="@+id/btn"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text=""
android:id="@+id/tampil"/>

</LinearLayout>

Selanjutnya buka file strings.xml yang terletak pada folder res/values/, file ini berisi nilai-nilai string yang digunakan
pada aplikasi yang kita buat. Ganti kodenya menjadi seperti berikut.
<?xml version="1.0" encoding="utf-8"?>
<resources>

<string name="app_name">Text Input</string>

<string name="action_settings">Settings</string>
<string name="nm">Nama:</string>
<string name="btn">OK</string>

</resources>

Selanjutnya kita akan membuat logika program yang secara otomatis tersimpan pada
src/com.example.textinput/MainActivity.java. Buka file tersebut dan ganti kodenya menjadi:
package com.example.textinput;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.widget.TextView;
import android.widget.EditText;
import android.widget.Button;

public class MainActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final EditText edt=(EditText)findViewById(R.id.edt);
Button btn=(Button)findViewById(R.id.btn);
 final TextView tampil=(TextView)findViewById(R.id.tampil);
btn.setOnClickListener(new View.OnClickListener() {

@Override
public void onClick(View arg0) {
// TODO Auto-generated method stub
tampil.setText("Nama anda"+edt.getText().toString());
}
});
}

@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;
}

Setelah selesai mengedit kode program, jalankan emulator atau perangkat virtual android dengan cara klik dua kali
AVD Manager pada folder C/Program Files/Android/android sdk, tempat kita menginstal android sdk. Setelah itu
jalankan emulator.

Klik kanan nama proyek android yang kita buat pada Package Explorer Eclipse, pilih Run As, pilih Android Application.
Jika ada prompt no devive compatible, pilih yes, kemudian pilih nama emulator yang sedang berjalan, beri tanda
centang pada Use Same Device For Future Launches, klik OK.

Tunggu beberapa saat Eclipse mengupload dan menginstal aplikasi pada emulator. Setelah selesai diinstal pada
emulator akan langsung dijalankan, hasilnya sebagai berikut.
 Praktikum Programming Android : Edit Text and Button
Kali ini kita akan membahas tentang EditText dan Button. EditText dan Button ini nantinya akan menjadi
sebuah file .apk. Namun sebenarnya EditText dan Button adalah hanya sebagian dari keseluruhan komponenAndroid.
1. Langkah pertama adalah membuat project baru dengan cara pilih File>> New >>Other

2. Kemudian akan muncul kotak dialog “New”, lalu pilih Android>>Android Aplication Project seperti gambar
berikut:

Lalu akan muncul kotak dialog New Android Aplication.

3. Selanjutnya silahkan isi sesuai keinginan anda. Sebagai contoh gambar berikut adalah konfigurasi yang saya
gunakan:
 4. Lalu klik Next hingga Finish.
Pada Eclipse, Panel Package Explorer akan muncul sebuah file bernama Edit Text_and_Button. Klik kanan pada
file tersebut dan pilih Run As >>Android Aplication seperti gambar berikut:

Tunggu beberapa saat hingga muncul tampilan Android Emulator seperti gambar berikut:
 Kali ini kita hanya memastikan saja bahwa aplikasi dapat dijalankan di emulator untuk seterusnya. Kemudian
tutup saja emulator Android dengan memilih tanda X di pojok kanan atas.
Sekarang kita akan menambahkan beberapa komponen pada aplikasi android EditText_and_Button.
Komponen pertama adalah Praktikum interface. Double klik pada main.xml seperti gambar berikut:

Akan muncul tab main.xml. Pastikan Tab Graphical Layout terpilih pada pojok kiri bawah.
 Selanjutnya ubah sesuaikan dengan kebutuhan pada bagian yang diberi kotak berwarna merah. Kotak yang
berwarna kuning adalah Button dan yang berwarna hijau adalah EditText. Masukan 1 Edit Text dan 3 Button ke dalam
Layout dengan cara menggesernya dari kotak berwarna biru di sebelah kiri. Simpan pekerjaan sementara agar tidak
hilang apabila terjadi error. Tekan CTRL + S.

Pastikan terlebih dahulu bahwa projek berjalan lancar sejauh ini dengan melakukan Run As >>Android
Aplication seperti tahapan yang telah dijabarkan sebelumnya. Apabila tidak ada error, maka akan muncul tampilan
home Android. Cobalah pilih pada bagian EditText dan ketik apapun disana dan pastikan berhasil.
 Selanjutnya tutup dahulu Emulator Android. Lalu kita akan membuat dan menggunakan atribut. Buka file
String.xml seperti gambar berikut:

Selanjutnya akan muncul tab Resources Elements. Pilih tombol Add.

Akan muncul seperti gambar berikut, pilih Color, lalu tekan OK.

Pada tab Resources Elements akan tercipta Color. Pilih lalu akan muncul tab Attributes for Color. Isikan sesuai
selera. Bisa memilih untuk mengisikan black dengan value #000000.
Klik kembali pada Color sehingga berubah menjadi black (Color).

Jangan lupa tekan CTRL + S untuk menyimpan file. Ulangi langkah pembuatan elemen color tersebut namun
dengan nama white dan value #FFFFFF.
Jangan lupa untuk menyimpan file dengan menekan CTRL + S. Sekarang Element black tersebut akandijadikan
sebagai background emulator. Kembalilah pada file main.xml. Pada area berwarna putih klik kanan lalu pilih Edit
Background. Pilih Color>>black seperti gambar berikut:

Pilih OK. Maka tampilan akan berubah menjadi berwarna hitam. Pada bagian Edit Text kita ubah warnanya
menjadi putih agar terlihat. Klik pada EditText.
 Pada Tab Properti scroll ke bawah hingga mencapai bagian View. Pada bagian Background klik gambar maka
akan muncul tab dialog Reference Chooser seperti sebelumnya. Pilih Color>>white. Maka tampilan EditText akan
berwarna putih seperti gambar berikut:

Kita juga akan mengubah warna text pada ketiga Button. Dengan langkah yang sama seperti EditText hanya
saja menu yang dipilih pada tab Properties adalah TextView>>TextColor. Pilih Color>>white. Lakukan hal yang sama
pada 2 Button yang lain.
akhirnya seperti gambar berikut:

Kamu dapat merubah lebar dan panjang dari elemen dengan mengubah-ubahnya pada Graphical Layout.
Simpan file dan pastikan dapat berjalan dengan melakukan Run As >>AndroidAplication.

Selanjutkan kita akan melakukan sedikit perubahan kode program. Caranya double klik pada Main.java seperti gambar
berikut:
Modifikasi isinya, kode sebelum dimodifikasi:

Kode setelah dimodifikasi.

 Jangan lupa untuk menyimpan file dengan menekan CTRL + S. Selanjutnya handler yang telah dibuat akan
dipasangkan pada Button. Klik main.xml lalu pilih Button1.

Kemudian pada tab Properties ketikkan value myClickHandler pada Property On Click seperti gambarberikut:
 Lakukan hal yang sama pada 2 Button yang lain. Jangan lupa untuk menyimpan file dengan menekan CTRL +
S. Sekarang lakukan Run As >>AndroidAplication. Mari kita cek hasilnya. Gambar ketika tidak ada tombol yangditekan.

Gambar ketika Button 1 ditekan

Gambar ketika Button 2 ditekan

 Gambar ketika Button 3 ditekan

Setelah melihat gambar diatas mengartikan bahwa aplikasi Android EditText_and_Button yang telah kitabuat
berhasil dijalankan secara sempurna pada emulator.
 Programming Android : CheckBox
Apa itu CheckBox? CheckBox sendiri dapat kita artikan sebagai komponen Android yang berfungsi sebagai
selektor.
CheckBox akan bernilai TRUE/YES apabila CheckBox menampilkan tanda “Centang”. Apabila tidak
menampilkan tanda tersebut berarti CheckBox bernilai FALSE/NO. Buat Project baru dengan cara File >> New >>
Android Application Project. Lihat gambar berikut:

Akan muncul kotak dialog New Android Application. Silahkan isi sesuai keinginan anda. Berikut adalah konfigurasi
yang bisa dipilih:

Anda dapat menentukan konfigurasi seperti diatas agar lebih mudah nantinya dalam pembuatan CheckBox.
Klik Next saja hingga Finish.
Akan muncul file baru bernama CheckBox seperti gambar berikut:
 Coba jalankan CheckBox di Emulator untuk memastikan bahwa sampai saat ini tidak ada masalah pada Project
CheckBox. Klik kanan CheckBox lalu Run As >> Android Application. Tunggu hingga emulator mencapai home
screen Android dan pastikan pada menu terdapat aplikasi bernama CheckBox seperti gambar berikut:

Jika sudah tutup saja emulatornya lalu kembali lagi pada Eclipse.
Selanjutnya bukalah file main.xml seperti gambar berikut. Kita akan membuat User Interface.
 Pada bar Palette, klik dan drag 3 buah checkbox, 1 Button, dan 1 EditText ke dalam Layout. Lihat gambar
berikut:

Jangan lupa menyimpan file hasil modifikasi dengan menekan tombol CTRL + S.
Jalankan CheckBox pada emulator Android untuk memastikan bahwa project berjalan dengan baik sejauh ini. Jika
berhasil, coba lakukan klik pada CheckBox.
 Jika sudah tutup saja emulatornya dan kembali lagi menuju Eclipse. Sekarang kita akan menambahkan 2
atribut baru yaitu Color white dan black. Buka lah file string.xml seperti gambar berikut:

Akan muncul kotak dialog Resources Elements seperti gambar berikut:

 Klik Add dan akan muncul kotak dialog baru, pilih Color lalu pilih OK seperti gambar berikut:

Akan muncul elemen baru yaitu Color.

Klik Color dan akan muncul tab disebelah kanan yaitu tab Attributes for Color. Isikan Name dengan black dan
Value berupa #000000.

Klik kembali Color maka akan berubah menjadi black (Color).

Lakukan kembali metode diatas namun dengan Value #FFFFFF dan Name white. Sehingga menghasilkan
seperti gambar berikut:
 hasil perubahan string.xml dengan menekan CTRL + S. Sekarang elemen tersebut akan dipasangkan pada
Layout CheckBox. Kembalilah pada file main.xml lalu klik kanan pada background. Pilih Edit Background lalupilihColor
>> black seperti gambar berikut:

Tekan OK maka background akan berubah warna menjadi seperti berikut:

Selanjutnya kita akan merubah Text pada Checkbox sekaligus merubah warnanya menjadi putih agar dapat
terbaca. Caranya klik kanan pada CheckBox pilih Edit Text. Akan muncul kotak dialog lalu isikan sesuai keinginan
anda. Lihat gambar berikut:
 Jika sudah pilih OK. Sekarang kita akan merubah warnanya. Caranya klik CheckBoxnya, lalu pada tab Properties
klik gambar pada TextView >> Text Color. Seperti gambar berikut:

Akan muncul kotak dialog dan pilih Color >> white lalu tekan OK. Maka perubahan yang terjadi seperti gambar
berikut:

Lakukan hal yang sama pada dua checkbox yang lain dan lakukan juga pada TextView >> Text Color Button dan
EditText. Maka hasilnya seperti gambar berikut:
 Simpan FIle dengan menekan CTRL +S. Lalu coba jalankan pada emulator Android dengan cara klik kanan
CheckBox lalu pilih Run As >> Android Application. Jika berhasil maka akan seperti gambar berikut:

Tutup saja emulator dan kembali lagi ke Eclipse. Kali ini kita akan merubah sedikit perubahan pada file
Main.java. Bukalah file Main.java seperti gambar berikut:

Berikut adalah gambar kode program sebelum dimodifikasi:

Atau lebih jelasnya, berikut adalah kode program sebelum dimodifikasi:
Simpan modifikasi dengan menekan CTRL + S.
Kita akan memasangkan hasil modifikasi tadi pada Layout. Kembalilah pada file main.xml. Lalu klik Button.
Setelah itu pada menu Properties masukan value “clicker” pada menu on Click seperti gambar berikut:
 Nah, sekarang kita telah sampai tahap akhir pembuatan, cobalah jalankan CheckBox tersebut pada emulator
dengan cara klik kanan pada CheckBox lalu pilih Run As >> Android Application. Tunggu hingga aplikasi CheckBox
terbuka secara otomatis pada emulator.

Cobalah tekan Checkbox “Pilihan 1” lalu tekan Button, maka hasilnya seperti gambar berikut:

Selanjutnya tekan Checkbox “Pilihan 2” lalu tekan Button maka hasilnya seperti gambar berikut:
Kemudian cobalah tekan Checkbox “Pilihan 3” lalu tekan Button, maka hasilnya seperti gambar berikut:

Ketika kita menekan suatu Checkbox dan kemudian menekan Button, Button tersebut berfungsi menampilkan
kalimat yang tersimpan pada suatu checkbox dan menampilkannya pada EditText.
Jika tidak ada checkbox yang aktif maka button tidak akan mengirimkan perintah pada EditText untuk
menampilkan kalimat sebab tidak ada kalimat yang aktif. Ketika kita menekan lebih dari 1 Checkbox ternyata antara
kalimat Checkbox yang ditampilkan berpindah baris. Itu terjadi karena kode pogram pada Main.java, sebagai berikut
yang ditandai dengan seleksi:
 Jika kita hilangkan itu, maka kalimat yang muncul tidak akan berganti baris namun akan menempel satu sama
lain. Lalu bagaimana caranya untuk menampilkan disampingnya tetapi tidak menempel? Lihatlah gambarberikut,kode
“\n” saya ganti dengan kode “ “ yang berarti spasi.

Hasilnya seperti gambar berikut:

Akhirnya kita telah selesai belajar mengenai salah satu komponen Android yaitu “CheckBox

TUGAS !!
Buat program seperti tampilan berikut !!
Ketika di klik tombol hasil maka pada textview dibagian paling bawah
akan muncul pilihan yang kita pilih
 RadioButton

Pada radioButton, hanya satu pilihan yang boleh aktif (mutual exclusive) di dalam satu group yang disebutradioGroup.
Modifikasi program checkbox diatas, tambahkan radio group (bukan radiobutton) yang ada di Form Widget

Hasilnya:

Tambahkan button dan textview, lalu gunakan property untuk mengedit sehingga hasilnya seperti berikut. Ganti id
RadioGroup dengan rgJenisKel, radiobutton dengan rbLaki dan rbPerempuan dan id TextView dengan
tvHasilRadio. Tambahkan property onClick pada button dengan nama klikHasilRadio

Catatan: Anda dapat mengeset atribut android:orientation pada RadioGroup menjadi horizontal agar radio button
tersusun secara mendatar.

Jangan lupa save. Kemudian code saat tombol diklik adalah sebagai berikut. Perhatikan pengunaan
getCheckRadioButtonId yang mengambil idRadio yang dipilih oleh pengguna:
Catatan: Menggeser radio button dapat berakibat radiobutton tidak berada lagi di dalam radio group. Pada XML,
radiobutton harus berada di dalam radiogroup.

TUGAS!! Buat Tampilan Seperti Gambar Di bawah ini!

Ketika Di klik Tombol cek Jawaban maka pilihan akan muncul pada TOAST
 Praktikum Programming Android (IV): Spinner
Pada tutorial Android Programming sebelumnya kita telah membahas mengenai EditText dan Button yang
merupakan bagian dari aplikasi android, kali ini kita akan membahas mengenai Android Programming komponenlain
yaitu Spinner
Tahukah anda, apa itu Spinner?
Spinner adalah aplikasi sederhana dalam Android yang memiliki fungsi sebagai penyusun pilihandari berbagai
jawaban yang disusun dalam satu kotak dialog. Ketika Spinner ini kita pilih, maka akan mu ncul pop-up menu yang
isinya adalah Options dari semua jawaban yang ada didalamnya. langsung saja kita praktekan agar anda dapat lebih
mudah memahami apa itu Spinner.
Buatlah Project baru dengan cara File>> New >>Android Application Project seperti gambar berikut:

Akan muncul kotak dialog New Android Application. Isikan Application Name dan Project name seperti gambar
berikut dan isikan yang lainnya sesuai selera anda.
 Pilih Next dan isikan sisanya sesuai selera dan Next terus hingga Finish. Lalu akan muncul file bernamaSpinner
pada bagian Package Explorer dibawah file EditText_and_Button. Lihat gambar berikut

Lalu bukalah filemain.xml seperti gambar berikut

Sehingga akan muncul tampilan seperti berikut:

Pada bar Form Widgets disebelah kiri, klik dan drag 1 buah Spinner ke dalam Layout. Lakukan hal yang sama
pada Edit Text dan Button. Sebagai hasil, lihat gambar berikut:
Pastikan simpan perubahan yang telah dilakukan. Tekan CTRL + S.
Pastikan juga bahwa aplikasi Spinner sejauh ini dapat dijalankan pada Android Emulator. Klik kanan pada file Spinner
lalu Run As >>AndroidApplication.

Lalu akan muncul tampilan seperti ini pada menu dalam emulator Android. Tutup kembali emulator Android
karena sudah dipastikan Spinner dapat berjalan pada Emulator Android.
 Sekarang kita akan membuat membuat atribut Color seperti pada tutorial Edit Text and Button. Kita akan
membuat 2 buah yaitu black dan white. Ini diperlukan sesuai selera saja untuk memperoleh komposisi warna yang
kontras agar semua komponen dapat terlihat dengan jelas. Jalankan Spinner>>res>>values>>strings.xml seperti
gambar berikut:

Akan muncul tampilan seperti gambar berikut lalu tekan Add.

 Setelah memilih Add, akan ditampilkan kotak dialog seperti berikut dan pilih Color. Setelah memilihlalutekan
OK.

Pada tab Resources Elements pilih Color dan akan muncul tab Attributtes For Color pada sebelah kanan.Isikan
black pada Name dan #000000 pada Value. Jika sudah klik Color pada tab Resources Elements.
 Ulangi langkah diatas untuk membuat white (Color). Isikan Name white dan Value #FFFFFF. Jika sudah akan
ditampilkan 2 file baru pada tab Resources Elements seperti berikut:

Simpan file dengan menekan CTRL + S.

Pastikan lagi hingga saat ini aplikasi Spinner depan dijalankan pada emulator dengan cara klik kanan
Spinner>>Run As >>AndroidApplication. Jika emulator muncul, langsung saja tutup kembali karena berarti telah
berhasil dijalankan dengan sempurna.
Kemudian pasang black (Color) tersebut sebagai Background pada Layout Spinner. Buka kembali ke
filemain.xml lalu pada area putih klik kanan lalu pilih Edit Background. Akan muncul kotak dialog Reference Chooser.
Pilih Color>>black lalu tekan OK. Lihat gambar berikut:

Akan terjadi perubahan pada Layout seperti gambar berikut:

 Selanjutnya kita akan melakukan sedikit perubahan pada kode program Main.java. Modifikasi ini bertujuan
seperti pada tutorial sebelumnya yang membuat myClickHandler. Namun kali ini bukanlah myClickHandler yang kita
buat.
Berikut adalah gambar kode program sebelum dimodifikasi
Berikut adalah gambar setelah dimodifikasi.

Jika sudah, jangan lupa simpan file dengan menekan CTRL + S.

Selanjutnya kita akan memasangkan handler yang telah kita buat dengan button widget. Kembali ke file
main.xml lalu pilih Button.

Pada tab Properties, ketikkan value On Click menjadi clicker seperti gambar berikut:

Simpan file dengan menekan CTRL + S.

Sampai saat ini kita telah selesai membuat Spinner. Saatnya kita untuk mencoba apakah Spinner yang telah
kita buat berhasil atau tidak dengan menjalankannya pada emulator. Klik kanan pada spinner lalu Run As >>Android
Application. Tunggu hingga emulator berjalan dan masuk sampai Home.
Berikut adalah gambar Spinner yang telah kita buat

Berikut adalah perubahan ketika Tombol Button diklik

Pada bagian Edit Text muncul “April”. Hal ini terjadi karena telah dipilih “April” pada menu pop-upSpinner
seperti gambar sebelumnya.
Okay. Dengan ini berakhir sudah pembahasan mengenai Spinner dalam Android. Semoga anda dapat
memahaminya dengan jelas. Apabila ada gambar yang kurang jelas, silahkan tinggalkan komentar dan saya akan
perbaiki/mengirimkan gambar yang lebih jelas untuk anda. Hal ini berlaku juga untuk tutorial yang sebelumnya.
Untuk tutorial Android Programming selanjutnya, akan dibahas elemen lain dalam aplikasi android yaitu CheckBox.
 TUGAS !!
Buat aplikasi seperti di bawah ini, ketika tombol proses di klik
maka nama, alamat, email, jenis kelamin dan hobi muncul pada
“textview” muncul Informasi