Komponen UI — Android Studio

User Interface

Pada kesempatan kali ini kita akan melanjutkan membahas tentang komponen user interface yang ada di Android Studio.

Spinner

Komponen Spinner biasa digunakan untuk menampilkan list data yang salah satu dari data yang ditampilkan, nantinya akan dipilih.

<Spinner
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:entries="@array/hari">
</Spinner>

Toggle Button

Komponen toggle button biasa digunakan untuk menampilkan status dicentang atau tidak, dicentang (aktif/nonaktif) pada tombol.

<ToggleButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/toggleButton"
    android:textOff="@string/off"
    android:textOn="@string/on" />

Switch

Switch adalah widget sakelar dua keadaan yang dapat memilih diantara dua opsi atau pilihan.

<Switch
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:showText="true"
    android:text="@string/switch"
    android:textOff="@string/off"
    android:textOn="@string/on" />

ProgressBar

ProgressBar adalah indikator tampilan grafis yang menunjukkan seberapa lama progress.

<ProgressBar
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:indeterminate="false"
    android:max="100"
    android:progress="1" />

SeekBar

SeekBar adalah sejenis ProgressBar dengan ibu jari yang dapat diseret.

<SeekBar
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:scrollbarSize="10dp" />

RatingBar

RatingBar biasa digunakan untuk mendapatkan peringkat dari user. Peringkat mengembalikan angka ploating-point.

<RatingBar
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

ScrollView

<ScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    tools:context=".MainActivity">
</ScrollView>

Membuat Form

Untuk latihan kali ini kita akan membuat form input sederhana menggunakan komponen TextView, EditText, RadioGroup, RadioButton, dan Button.

Jadi mari kita mulai. Buat Proyek Aplikasi Android baru seperti biasa.

Pada file activity_main.xml kita menulis tata letak seperti 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">
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/username"
        android:inputType="text" />
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/password"
        android:inputType="textPassword" />
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/email"
        android:inputType="textEmailAddress" />
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/phone"
        android:inputType="phone" />
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/website"
        android:inputType="text" />
    <RadioGroup
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_marginVertical="20dp">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="16dp"
            android:text="@string/jenisKelamin"
            android:textSize="16sp" />
        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/laki_laki" />
        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/perempuan" />
    </RadioGroup>
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingVertical="16dp"
        android:text="@string/register"
        android:backgroundTint="@color/primary" />
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingVertical="16dp"
        android:text="@string/login"
        android:backgroundTint="@color/secondary" />
</LinearLayout>

Pada file strings.xml kita menuliskan data string untuk komponen.

<resources>
    <string name="app_name">Komponen UI - Lanjutan</string>
    <string name="username">Username</string>
    <string name="password">Password</string>
    <string name="email">Email</string>
    <string name="phone">Phone</string>
    <string name="website">Website</string>
    <string name="jenisKelamin">Jenis Kelamin</string>
    <string name="laki_laki">Laki-laki</string>
    <string name="perempuan">Perempuan</string>
    <string name="register">Register</string>
    <string name="login">Login</string>
</resources>

Run Project

Kode diatas akan menghasilkan interface berikut: