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 :
- 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.
- Widget : Widget terdiri dari Button, Checkbox, Textview, Switches, Imageview, Progress bar, spinner, dan Webview. Widget disebut juga dengan UI Control.
Text Field : Dengan komponen ini user dapat melakukan input teks.
Container : Merupakan komponen yang umum digunakan untuk menampilkan komponen-komponen yang sama. Beberapa container yaitu radio group, list view, scroll view.
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
