Mata Kuliah : Pemrograman Mobile

Pertemuan : 3

MEMBUAT USER INTERFACE

 Membuat User Interface

Pertemuan kali ini, kita akan membahas bagaimana menggunakan view untuk membuat berbagai
macam bentuk user interface dalam sebuah aplikasi.
 TextView
TextView merupakan salah satu bagian user interface yang digunakan untuk menampilkan teks
atau tulisan pada layar monitor smartphone. Secara default, TextView tidaklah dapat diubah atau
diedit, namun secara optional dapat diubah atau diedit. Untuk mengedit diperlukan fungsi untuk
manampilkan isi TextView tersebut. Sintaks untuk menampilkan Text adalah <TextView />.
Membuat TextView sebenarnya sudah dilakukan pada pertemuan kedua pada saat latihan
membuat program Android pertama. Namun, kita akan ulangi sekali lagi pembuatan TextView
sebagai berikut :
 Membuat TextView dengan Android Studio
Langkah-langkah membuat TextView pada Android Studio adalah sebagai berikut :
1. Jalankan Android Studio dan buat Android Project baru dengan pengaturan seperti berikut.

2. Kemudian ketikkan kode berikut pada activity_main.xml.

==========
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Ini adalah contoh TextView"
android:id="@+id/text1" />
==========

3. Run aplikasi, maka hasilnya akan tampak seperti berikut.

Mata Kuliah : Pemrograman Mobile
Pertemuan : 3

 Membuat TextView dengan Kodular

1. Ketikkan url https://www.kodular.io/ pada browser untuk membuka kodular.
2. Lakukan login menggunakan akun Google.
3. Klik Create Project dan namakan Textview.
4. Lakukan drag and drop Label ke dalam Screen seperti berikut.

5. Kemudian pada bagian Text ketikkan “Ini adalah contoh Latihan Textview”, seperti gambar
berikut.

6. Sehingga tampilannya akan tampak seperti berikut.

 Button
ViewButton adalah sebuah tampilan tombol atau button. Fungsi ViewButton adalah untuk
melakukan eksekusi sebuah fungsi atau perintah berdasarkan algoritma didalamnya. Perintah
untuk menampilkan button cukup dengan mengetikan <Button />.
 Membuat Button dengan Android Studio
1. Jalankan Android Studio dan buat Android Project baru dengan pengaturan seperti berikut.
Mata Kuliah : Pemrograman Mobile
Pertemuan : 3

2. Ketikkan kode berikut pada activity_main.xml.

==========
<Button
android:id="@+id/button1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="STIKOM Ambon" />
==========

3. Run aplikasi, maka tampak seperti berikut.

 Membuat Button dengan Kodular

1. Ketikkan url https://www.kodular.io/ pada browser untuk membuka kodular.
2. Lakukan login menggunakan akun Google.
3. Klik Create Project dan namakan Button.
4. Lakukan drag and drop Button ke dalam Screen.
5. Untuk mengubah teks pada Button, dapat dilakukan dengan mengubah teks pada bagian
Text, seperti berikut.

6. Sehingga aplikasi akan tampak seperti berikut.

 ImageButton
ImageButton adalah sebuah tombol yang diberi image atau gambar. Fungsi image pada button
adalah untuk memperindah dan memberikan daya tarik atau bahkan memperjelas sebuah
informasi didalamnya. Perintah untuk menampilkan ImageButton pada Android yaitu
<ImageButton android:src=@drawable/gambar” />.
Mata Kuliah : Pemrograman Mobile
Pertemuan : 3

 Membuat ImageButton dengan Android Studio

1. Jalankan Android Studio dan buat Android Project baru dengan pengaturan seperti berikut.

2. paste gambar yang sama, pada lokasi C >> Users >> (nama Laptop) >>
AndroidStudioProjects >> ImageButton >> app >> src >> main >> res >> drawable (atau
lokasi penyimpanan project Android Studio anda).

3. Kemudian ketikkan kode berikut pada activity_main.xml.

==========
<ImageButton
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="@+id/textView1"
android:layout_centerHorizontal="true"
android:src="@drawable/bintang" />
==========

4. Jalankan aplikasi, dan hasilnya tampak seperti berikut.

 Membuat ImageButton dengan Kodular

1. Ketikkan url https://www.kodular.io/ pada browser untuk membuka kodular.
2. Lakukan login menggunakan akun Google.
3. Klik Create Project dan namakan ImageButton.
4. Lakukan drag and drop Button ke dalam Screen.
5. Klik pada component Button1 dan klik Upload file pada bagian Image di Button1 Properties.
Mata Kuliah : Pemrograman Mobile
Pertemuan : 3

6. Klik Upload asset untuk melakukan upload file gambar dan pilih file gambar tersebut, lalu
close jendela Assets Manager.

7. Pilih gambar yang telah diupload tersebut pada bagian Image.

8. Maka aplikasi akan tampak seperti berikut.

Mata Kuliah : Pemrograman Mobile
Pertemuan : 3

 ToggleButton
ToggleButton adalah sebuah tombol yang menggunakan algoritma boolean yaitu on dan off.
ToogleButton berfungsi untuk melakukan eksekusi berdasarkan algoritma boolean, atau dapat
dikatakan bekerja seperti saklar lampu atau switch. Perintah untuk menampilkan ToggleButton
pada Android yaitu <ToggleButton />.
 Membuat ToggleButton dengan Android Studio
1. Jalankan Android Studio dan buat Android Project baru dengan pengaturan seperti berikut.

2. Ketikkan kode berikut pada activity_main.xml.

==========
<ToggleButton
android:id="@+id/toggle_boolean"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
==========

3. Run aplikasi, maka hasilnya tampak seperti berikut.

 Membuat ToogleButton dengan Kodular

1. Ketikkan url https://www.kodular.io/ pada browser untuk membuka kodular.
2. Lakukan login menggunakan akun Google.
3. Klik Create Project dan namakan ToggleButton.
4. Lakukan drag and drop Switch ke dalam Screen.
5. Maka aplikasi akan tampak seperti berikut.
Mata Kuliah : Pemrograman Mobile
Pertemuan : 3

 RadioButton
RadioButton adalah sebuah button berbentuk bulat. Prinsip kerja dari RadioButton sebenarnya
sama seperti ToggleButton yaitu menggunakan algoritma boolean. Untuk menampilkan
RadioButton pada Android digunakan perintah <RadioButton />.
 Membuat RadioButton dengan Android Studio
1. Jalankan Android Studio dan buat Android Project baru dengan pengaturan seperti berikut.

2. Ketikkan kode berikut pada activity_main.xml.

==========
<RadioButton
android:id="@+id/radioButton1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Jus Sirsak" />

<RadioButton
android:id="@+id/radioButton2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/radioButton1"
android:text="Jus Jeruk" />

<RadioButton
android:id="@+id/radioButton3"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/radioButton2"
android:text="Jus Mangga" />
==========

3. Run aplikasi, dan hasilnya akan tampak seperti berikut.

Mata Kuliah : Pemrograman Mobile
Pertemuan : 3

 Membuat RadioButton dengan Kodular

1. Ketikkan url https://www.kodular.io/ pada browser untuk membuka kodular.
2. Lakukan login menggunakan akun Google.
3. Klik Create Project dan namakan RadioButton
4. Lakukan drag and drop RadioButton ke dalam Screen.
5. Maka aplikasi akan tampak seperti berikut.

 RadioGroup
Fungsi dari RadioGroup yaitu membuat RadioButton hanya dapat dipilih salah satu dari sekian
banyak pilihan yang tersedia. Perintah yang digunakan untuk menampilkan RadioGroup pada
Android yaitu <RadioGroup> … </RadioGroup>.
 Membuat RadioGroup dengan Android Studio
1. Jalankan Android Studio dan buat Android Project baru dengan pengaturan seperti berikut.

2. Ketikkan koding berikut pada activity_main.xml.

==========
<TextView
android:id="@+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Jenis Kelamin :" />

<RadioGroup
android:id="@+id/radiogroup1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/text1"
android:orientation="vertical">

<RadioButton
android:id="@+id/radiobutton1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Laki-Laki"/>
Mata Kuliah : Pemrograman Mobile
Pertemuan : 3

<RadioButton
android:id="@+id/radiobutton1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Perempuan"/>
</RadioGroup>
==========

3. Run aplikasi maka hasilnya tampak seperti berikut.

 Membuat RadioGrup dengan Kodular

1. Ketikkan url https://www.kodular.io/ pada browser untuk membuka kodular.
2. Lakukan login menggunakan akun Google.
3. Klik Create Project dan namakan RadioButton
4. Lakukan drag and drop RadioButton ke dalam Screen.
5. Klik Blocks untuk melakukan pengaturan.

6. Pilih RadioButton1 dan drag koding berikut ke area blocks.

Mata Kuliah : Pemrograman Mobile
Pertemuan : 3

7. Sehingga akan tampak seperti berikut.

8. Lakukan drag and drop baris koding lainnya sehingga tampilan blocks akan tampak seperti
gambar berikut.

9. Jika dijalankan maka aplikasi akan tampak seperti gambar berikut.