PAPB 2 - Component Ui (EditText, Radio Button, Button)

User interface merupakan sesuatu yang bisa dilihat oleh user dan berfungsi sebagai media bagi user dan berfungsi sebagai media bagi user berinteraksi dengan perangkat. Activity menggunakan method setContentView (R.layout.namafile.xml) 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 lainny. 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, scroll view.

5. Date & Time : Komponen ini digunakan untuk menampilkan tanggal dan waktu

Tugas Praktikum

1. Create new Project Empty Activity 

2. Buka activity_main.xml, dan masukan code seperti ini

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/selamat"
        android:layout_gravity="center"
        android:layout_marginTop="20dp"
        android:layout_marginBottom="20dp"
        android:textSize="20sp"
        android:textStyle="bold"
        />

    <EditText
        android:id="@+id/txtfield"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Nama"
        android:textSize="20dp"
        />

    <TextView
        android:id="@+id/text2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Pilih Alamat Tinggal : "
        android:textSize="20dp"
        android:layout_marginTop="20dp"
        android:layout_marginBottom="20dp"
        android:layout_marginLeft="20dp"
        />

    <RadioGroup
        android:id="@+id/radioGrup"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <RadioButton
            android:id="@+id/rdKuningan"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="20dp"
            android:text="@string/kota1" />

        <RadioButton
            android:id="@+id/rdCirebon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="20dp"
            android:text="@string/kota2" />

        <RadioButton
            android:id="@+id/rdKabCirebon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="20dp"
            android:text="@string/kota3" />

        <RadioButton
            android:id="@+id/rdMajalengka"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="20dp"
            android:text="@string/kota4" />

        <RadioButton
            android:id="@+id/rdIndramayu"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="20dp"
            android:text="@string/kota5" />
    </RadioGroup>

    <Button
        android:id="@+id/buttonKlik"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Klik"
        />

</LinearLayout>

3. lalu untuk file string (app -> res -> values -> string.xml)

<resources>
    <string name="app_name">Modul3LatihanTugas</string>

    <string name="selamat">Selamat Datang!</string>
    <string name="kota1">Kuningan</string>
    <string name="kota2">Kota Cirebon</string>
    <string name="kota3">Kab.Cirebon</string>
    <string name="kota4">Majalengka</string>
    <string name="kota5">Indramayu</string>

</resources>

4. Setelah kedua code selesai di masukan, kita ke bagian code untuk proses mengubah text sesuai input     yang di masukan. Code ini dimasukan pada file MainActivity.java (app -> java ->     com.namapackage.namaproject -> MainActivity.java)

package com.litszakhra.modul3latihantugas;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
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 {

    Button buttonKlik;
    TextView text;
    EditText txtfield;
    RadioButton radiobtn;
    RadioGroup radio;

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

        text = (TextView) findViewById(R.id.text);
        buttonKlik = (Button) findViewById(R.id.buttonKlik);
        txtfield = (EditText) findViewById(R.id.txtfield);
        radio = (RadioGroup) findViewById(R.id.radioGrup);

        buttonKlik.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                text.setText("");
                int selectedId = radio.getCheckedRadioButtonId();
                radiobtn = findViewById(selectedId);

                text.setText("Halo " + txtfield.getText().toString() + ", Anda dari " +
                        radiobtn.getText().toString());
            }
        });
    }
}

5. Setelah itu Project dapat di run, dan menghasilkan output seperti ini