Tugas 2 (Modul 3) PAPB - Komponen UI Pada Android Studio

Membuat Tampilan Komponen UI Sederhana Pada Android Studio

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.

Berikut langkah-langkah Mengerjakan Tugas Modul 3 (Komponen UI Sederhana)

1. Buka Aplikasi "Android Studio"

2. Klik "New Project"

3. Pilih "Phone and Tablet" > "Empty Activity" > "Next"

4. Isi kan Konfigurasi Project Seperti gambar dibawah, lalu klik "Finish".

5. pada  activity_main.xml, bagian Code.

    

    Ketikan kode seperti dibawah ini :

<?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>

6. Buka app > res > values > strings.xml

 Ketikan kode seperti dibawah ini :

<resources>
    <string name="app_name">Modul3LatihanTugas</string>
    <string name="selamat_datang">SELAMAT DATANG</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 Tinggal Anda :</string>
    <string name="kuningan">Kuningan</string>
    <string name="cirebon_kota">Cirebon Kota</string>
    <string name="kab_cirebon">Kab. Cirebon</string>
    <string name="indramayu">Indramayu</string>
    <string name="majalengka">Majalengka</string>
    <string name="klik">KLIK</string>
</resources>

7. Pada MainAktivity.java, di sebelah activity_main.xml.

    Ketikkan kode seperti dibawah ini :

package mattmaull.blogspot.com.modul3latihantugas;

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());
        });


    }}

8. Berikut Tampilan Design pada activiy_main.xml, agar sebelum dijalankan kita tau 

   bagaimana hasil tampilan aplikasinya untuk mengetahui apakah sudah sesuai atau belum.

9. Setelah itu klik Run 'app', Untuk menjalankan Aplikasi yang kita buat pada emulator android.

10. Berikut Hasil Akhir Aplikasi ketika berhasil dijalankan.