Modul Ini berfokus pada pengenalan User Interface. User Interface merupakan sesuatu yang bisa dilihat oleh user dan berfungsi sebagai media bagi user berinteraksi dengan perangkat. Activity menggunakan method setContentView(R.layout.namafilexml) untuk merender tampilan pada layar perangkat. Komponen User Interface terbagi menjadi beberapa kategori :
1. Layout
Layout merupakan perluasan dari kelas ViewGroup. Layout berfungsi sebagai wadah komponen lainnya. Layout mengatur bagaimana komponen lainnya akan ditampilkan. Jenis-jenis layout yaitu LinearLayout, RelativeLayout, FrameLayout, TableLayout, dan GridLayout.
2. Widget
Widget terdiri dari Button, Checkbox, Textview, Switches, Imageview, Progress bar, spinner, dan Webview. Widget disebut juga dengan UI Control.
3. Text Field
Dengan komponen ini user dapat melakukan input teks.
4. Container
Merupakan komponen yang umum digunakan untuk menampilkan komponen-komponen yang sama. Beberapa container yaitu radio group, list view, scrollview.
5. Date & Time
Komponen ini digunakan untuk menampilkan tanggal dan waktu.
Oke langsung saja kita praktikan cara membuat UI sederhana dengan menggunakan Android Studio yang hasilnya akan seperti gambar dibawah ini
- Seperti biasa yang pertama buat projek baru, berikut spesifikasi yang saya gunakan untuk membuat UI nya :
- API 16 : Android 4.1 (Jelly Bean)
- Java
- Kemudian masuk ke bagian activity_main.xml lalu rubah code nya, disini saya menggunakan code sendiri. berikut source codenya :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:orientation="vertical"
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"
tools:context=".MainActivity">
<TextView
android:id="@+id/lbl_datang"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/s_datang"
android:textStyle="bold"
android:textColor="#808080"
android:textSize="25sp"
android:textAlignment="center"
android:layout_marginTop="25dp"
android:layout_marginBottom="25dp"/>
<EditText
android:id="@+id/nama"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="25dp"
android:hint="@string/masukan_nama_anda"
android:textSize="18sp"
tools:ignore="TouchTargetSizeCheck"
android:autofillHints=""
android:inputType="" />
<TextView
android:id="@+id/lbl_tinggal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/pilih_alamat_tinggal_anda"
android:textColor="#808080"
android:textSize="15sp"/>
<RadioGroup
android:id="@+id/pilihan_kota"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<RadioButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="15sp"
android:text="@string/kuningan" />
<RadioButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="15sp"
android:text="@string/cirebon_kota" />
<RadioButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="15sp"
android:text="@string/kab_cirebon" />
<RadioButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="15sp"
android:text="@string/majalengka" />
<RadioButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="15sp"
android:text="@string/indramayu" />
</RadioGroup>
<Button
android:id="@+id/klik"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/klik"
android:layout_gravity="center" />
</LinearLayout>
- Kemudian masuk ke bagian app > res > values > string.xml lalu ubah source code nya, gunanya agar fungsi string yang ada pada source code activity_main.xml dideklarasikan sehingga fungsinya dapat dipanggail saat proses run. Berikut source codenya :
<resources>
<string name="app_name">Latihan Modul 3</string>
<string name="s_datang">Selamat Datang</string>
<string name="masukan_nama_anda">Masukan Nama Anda</string>
<string name="pilih_alamat_tinggal_anda">Pilih Alamat Anda</string>
<string name="kuningan">Kuningan</string>
<string name="cirebon_kota">Cirebon Kota</string>
<string name="kab_cirebon">Kab Cirebon</string>
<string name="majalengka">Majalengka</string>
<string name="indramayu">Indramayu</string>
<string name="klik">Klik</string>
</resources>
<EditText
android:id="@+id/myTextfield2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/fieldpassword"
android:textSize="12sp" />
</LinearLayout>
- Setelah itu pergi kebagian Mainactivity.java lalu masukkan source code sebagai berikut guna untuk menggunakan beberapa widget seperti button , EditText, RadioButton, RadioGroup, dan TextView yang kemudian dijalankan fungsinya masing-masing. Berikut source codenya :
package com.example.tugaspapb2;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.Button;
import android.widget.EditText;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//Mendapatkan Referensi Objek yang telah ditambahkan pada activity_main.xml
final TextView myTextView = (TextView) findViewById(R.id.lbl_datang);
final EditText textField = (EditText) findViewById(R.id.nama);
final RadioGroup myRadioGroup = (RadioGroup) findViewById(R.id.pilihan_kota);
Button myButton = (Button) findViewById(R.id.klik);
//Menambahkan Event listener ketika Objek Button Dengan "ID Klik" di Klik
//On Click(View V) akan di jalankan pada saat Tombol di tekan
myButton.setOnClickListener(v -> {
//Mendapakan posisi Pilihan, dimana posisi pilihan dimulai dari O
int id_pilihan = myRadioGroup.getCheckedRadioButtonId();
//Mendapatkan Object Radio Pilihan Menggu nakan ID
RadioButton pilihankota = (RadioButton) findViewById(id_pilihan);
//Mengubah nilai Teks dari Objek TextView dengan id SDatang
myTextView.setText("Hallo, " + textField.getText().toString() + "\n Anda dari " + pilihankota.getText().toString());
});
}}
Jika sudah diinputkan semuanya kemudian kita run programnya dan pembuatan UI sederhana pun telah selesai. Disini saya menggunakan smartphone saya sendiri untuk menampilkan hasil UI yang saya buat dan hasil tampilannya akan tampak seperti berikut
Komentar
Posting Komentar