Basic View Komponen UI— Android Studio

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:

1. Layout
   Layout merupakan perluasan dari kelas ViewGroup, berfungsi sebagai wadah komponen lainnya serta mengatur bagaimana komponen akan ditampilkan.
   Jenis-jenis layout: LinearLayout, RelativeLayout, FrameLayout, TableLayout, dan GridLayout.
2. Widget
   Widget merupakan UI Control yang terdiri dari TextView, EditText, ImageView, Button, Checkbox, Switches, Progressbar, Spinner, dan Webview.
3. Text Field
   Text Field merupakan komponen input text.
4. Container
   Contanier merupakan komponen untuk menampilkan komponen-komponen yang sama, seperti RadioGroup, ListView, dan ScrollView.
5. Date & Time
   Date & Time merupakan komponen untuk menampilkan tanggal dan waktu.

Ada beberapa terminologi User Interface Android, yaitu:

1. Views
   View adalah base class untuk semua komponen visual.
2. Views Group
   ViewGroup adalah perluasan dari kelas View yang berfungsi untuk menampung beberapa child view.
3. Fragments
   Fragment berfungsi sebagai pembungkus layout dan mengoptimasi tampilan layout pada ukuran perangkat yang berbeda-beda.
4. Activities
   Activity adalah sesuatu yang ditampilkan yang merepresentasikan window atau layar.

Views dikelompokkan menjadi:

1. Basic Views: objek View dasar yang meliputi Widget dan Text Field.
2. Picker Views: View yang menyediakan list input, seperti TimePicker dan DatePicker.
3. List Views: View yang menampilkan item list, seperti ListView dan SpinnerView.

Komponen Basic Vew

• TextView: elemen untuk menampilkan text.
• EditText: elemen untuk memasukkan dan memodifikasi text.
• Button: elemen untuk menghasilkan sebuah action dengan
• ImageView: elemen untuk menampilkan sebuah image.
• RadioGroup: elemen yang membungkus widget RadioButton.
• RadioButton: elemen untuk menampilkan pilihan.

Pada object view memeliki:

• Atribut: untuk menentukan bagaimana objek View akan ditampilkan di layar.
• ID: untuk mengidentifikasi object View secara unik di dalam struktur pohon.

Membuat Project Menggunakan Komponen Basic View

Pada kasus ini, kita akan mengambil masukan dari pengguna melalui widget EditText dan RadioButton yang nantinya akan mengubah text pada TextView ketika widget Button dipicu.

Jadi mari kita mulai. Buat Proyek Aplikasi Android baru.

Pada file activity_main.xml kita menulis tata letak seperi berikut:

<?xml version="1.0" encoding="utf-8"?>
<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"
    android:padding="20dp"
    tools:context=".MainActivity">
    <TextView
        android:id="@+id/title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginVertical="20dp"
        android:padding="8dp"
        android:text="@string/title"
        android:textSize="20sp"
        android:textAlignment="center" />
    <EditText
        android:id="@+id/editText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="20dp"
        android:paddingVertical="16dp"
        android:hint="@string/hint"
        android:inputType="text"
        android:autofillHints=""
        tools:ignore="VisualLintTextFieldSize" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/label" />
    <RadioGroup
        android:id="@+id/address"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >
        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/kuningan" />
        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/cirebon_kota" />
        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/kab_cirebon" />
        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/majalengka" />
        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/indramayu" />
    </RadioGroup>
    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="20dp"
        android:text="@string/button"
        android:backgroundTint="@color/primary" />
</LinearLayout>

strings.xml

<resources>
    <string name="app_name">Komponen UI - Basic View</string>
    <string name="title">Selamat Datang</string>
    <string name="hint">Masukan nama anda</string>
    <string name="label">Pilih alamat tinggal 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="button">Klik</string>
</resources>

Kode diatas akan menghasilkan antarmuka seperti berikut:

Preview

Pada file MainActivity.java kita menyetel tata letak seperi berikut:

package tri.deno.dev.component;

import android.annotation.SuppressLint;
import android.os.Bundle;
import android.widget.Button;
import android.widget.EditText;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.TextView;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {
    // Variabel global
    TextView result;
    EditText editName;
    RadioGroup radioGroup;
    RadioButton selectedAddress;
    Button button;

    @SuppressLint("SetTextI18n")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // Inisialiasi menggunakan method findViewById(idWidget)
        editName = findViewById(R.id.editText);
        radioGroup = findViewById(R.id.address);
        button = findViewById(R.id.button);
        result = findViewById(R.id.title);

        // Melampirkan pendengar OnClick ke tombol
        button.setOnClickListener(view -> {
            // Mengambil nilai text dari EditText
            String nama = editName.getText().toString();
            // Mendapatkan id tombol radio yang dipilih dari RadioGroup
            selectedAddress = findViewById(radioGroup.getCheckedRadioButtonId());
            // Mengambil nilai text dari tombol radio yang dipilih
            String address = selectedAddress.getText().toString();

            // Mengubah isi TextView dengan masukan pengguna
            result.setText("Halo, " + nama + " anda dari " + address);

            // Mengosongkan isi dari EditText dan RadioButton
            editName.setText("");
            selectedAddress.setChecked(false);
        });
    }
}

Run Project

Final Project