Slide IST205 10 Mobile Device Programming Android Studio 3 Widget TextView EditText Button Event Handler

Mobile Programming
UI Controls dengan Widget
TextView,
EditText dan Button

Augury El Rayeb, S.Kom., MMSI.
Mobile Device Programming Technology (Android Studio) | IST205

Capaian Pembelajaran
• Memahami Widget TextView
• Mampu membuat UI Control TextView pada activity layout (.xml)
• Mampu membuat event handling untuk UI Control TextView
• Memahami Widget EditText
• Mampu membuat UI Control EditText pada activity layout (.xml)
• Mampu membuat event handling untuk UI Control EditText
• Memahami Widget Button
• Mampu membuat UI Control Button pada activity layout (.xml)
• Mampu membuat event handling untuk UI Control Button

Augury El Rayeb, S.Kom., MMSI.
Mobile Device Programming Technology (Android Studio) | IST205

Widget
• Untuk membuat widget pada activity layout
(.xml):


Contoh:


Attributes

Augury El Rayeb, S.Kom., MMSI.
Mobile Device Programming Technology (Android Studio) | IST205

• Berikut adalah beberapa attribut yang secara
umum sering di-setting pada Widget UI Controls:
Nama Attribute
android:id
android:text
android:textColor

android:hint
android:layout_width
android:layout_height
android:layout_gravity

Deskripsi
ID yang digunakan untuk mengidentifikasi UI Control secara
unique.
Teks yang akan ditampilkan.
Warna teks
Diisi dengan format: “#rgb”
Teks bantuan yang akan ditampilkan jika teks pada input kosong.
Ukuran lebar layout dari UI Control (wrap_content,
wrap_parent, nilai lebar)
Ukuran tinggi layout dari UI Control (wrap_content,
wrap_parent, nilai lebar)
Menentukan bagaimana posisi layout UI Control terhadap main
layout (induknya). (spt: left, right, top, bottom,
center_horizontal, center_vertical, dst).

Widget

Augury El Rayeb, S.Kom., MMSI.
Mobile Device Programming Technology (Android Studio) | IST205

• Langkah yang harus dilakukan untuk menggunakan
widget activity class (.java) yang sudah dibuat pada
activity layout (.xml):
1. import class widget yang ingin digunakan:
android.widget.nama-widget;

2. Buat object di dalam method onCreate() pada class:
nama-widget nama-object = (nama-widget) findViewById(R.id.id-ui-pada-layout)

3. Setelah itu kita dapat menggunakan method yang dimiliki
widget tersebut, dengan cara:
nama-object.nama-method();
Contoh, misal: activity_main.xml
berisi:
Contoh: MainActivity.java

.. ..

.. ..


1

import android.widget.TextView;
...
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
...
...
TextView judul=(TextView) findViewById(R.id.lblJudul);
judul.setText(“Form Login");
...

2

3

TextView Widget

TextView

Augury El Rayeb, S.Kom., MMSI.
Mobile Device Programming Technology (Android Studio) | IST205

• Berikut atribut TextView yang umum di-setting:
Nama Attribute
android:id
android:text
android:textColor

Deskripsi

android:layout_width

Ukuran lebar layout dari UI Control (wrap_content, wrap_parent, nilai

lebar)

android:layout_height

Ukuran tinggi layout dari UI Control (wrap_content, wrap_parent, nilai
lebar)

android:layout_gravity

Menentukan bagaimana posisi layout UI Control terhadap main layout
(induknya). (spt: left, right, top, bottom, center_horizontal,
center_vertical, dst).

android:textSize

Ukuran teks dalam satuan sp (scaled pixels).
Contoh: 15sp

android:textStyle

Style teks : 0 – normal , 1 – bold, 2 – italic .

ID yang digunakan untuk mengidentifikasi UI Control secara unique.
Teks yang akan ditampilkan.
Warna teks
Diisi dengan format: “#rgb”

Augury El Rayeb, S.Kom., MMSI.
Mobile Device Programming Technology (Android Studio) | IST205

Membuat TextView pada activity layout
(.xml) dan Menggunakan TextView pada
Activity Class (.java)



android:text=“BACA INPUT"/>