Module IV.

Komponen Adroid :
Spinner, RadioButton, Checkbox, Toggle Button dan
EditText
A. Tujuan
Agar mahasiswa dapat memahami karakteristik komponen android : Spinner,
Radio Button, Checkbox, Toggle Button dan EditText.
B. Bahan
1. Software Android Studio
2. Koneksi Internet
3. Smartphone
C. Teori
Spinner
Spinner adalah salah satu view yang cukup sering digunakan aplikasi Android.
Spinner berbentuk list dropdown berisi item-item yang bisa dipilih. Spinner
biasa digunakan untuk memudahkan pengguna memilih salah satu value dari
sebuah list/array yang disajikan dengan cepat.
Ada dua cara membuat Spinner yang berdasarkan sumber data yang ingin
ditampilkan. Cara pertama, data array disimpan pada file resource xml dalam
bentuk string-array. Cara ini berguna jika value list pada Spinner bersifat
statis/tidak sering diubah-ubah.
Cara kedua adalah data array disimpan langsung pada file Java, dalam bentuk
String array ataupun String ArrayList. Cara kedua ini berguna jika data yang
mau disajikan bersifat dinamis atau dapat berubah-ubah. Misal harus dilakukan
fetch array dari server terlebih dahulu sebelum menampilkannya pada Spinner.
Radio Button
Radio Button adalah salah satu elemen layout yang berfungsi untuk meng-
inputkan data yang berupa pilihan dan hanya satu saja yang bisa dipilih.
Contoh seperti input-an “Jenis Kelamin”, dan pilihan Yes/No/Toggle
lainnya. Di Android, dapat menggunakan class android.widget.RadioButton,
untuk membuat elemen layout radio button. Radio Button biasanya digrup/
dibungkus dengan kelas android.widget.RadioGroup, jika salah satu
RadioButton di dalam RadioGroup sudah dipilih/ dicentang, maka RadioButton
yang lainnya akan otomatis statenya berubah menjadi unselected/tidak terpilih.
Checkbox
CheckBox yang akan dibuat mengikuti standar dari Android Material Design.
CheckBox dibuat melibatkan class android.widget.CheckBox untuk
menampilkan CheckBox view. CheckBox sendiri biasa digunakan untuk
menampilkan pilihan, dimana kita bisa memilih lebih dari satu (multiple
choices), berbeda dengan Spinner atau RadioButton dimana hanya bisa memilih
satu item saja (single choice).
 Toggle Button
Pada dasarnya Toggle Button adalah tombol/Button yang dimodifikasi sehingga
mempunyai dua buah state, yaitu ON atau OFF. Toggle Button mirip seperti
saklar lampu, dimana bisa dinyalakan atau dimatikan saklar tersebut.
EditText
EditText sangat berguna sebagai interface atau tempat untuk menerima inputan
berupa text/kata-kata di aplikasi. Karena itu, jenis-jenis text yang bisa diterima oleh
EditText pun bermacam-macam. Contohnya seperti password, nomor telepon,
email address, dan sebagainya.

D. Praktikum
Pertama adalah buatlah project baru di Android Studio terlebih dahulu.

Spinner dengan Data Statis

Setelah proyek dibuat, buka file strings.xml pada folder res/values, dan
masukkan string-array sebagai berikut :
<string-array name="nama_matakuliah">
<item>Matematika Diskrit</item>
<item>Statistika Dasar</item>
<item>Basis Data</item>
<item>Rekayasa Perangkatt Lunak</item>
<item>Sistem Informasi</item>
<item>Pemrograman Web</item>
<item>Interaksi Manusia Komputer</item>
<item>Jaringan Komputer</item>
<item>Otomasi Perkantoran</item>
<item>Logika Pemrograman</item>
<item>Sistem Operasi</item>
</string-array>

Langkah selanjutnya, pada layout activity_main.xml, tambahkan sebuah

Spinner view dan sebuah tombol, hingga menjadi seperti di bawah ini :

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:paddingStart="50dp"
android:paddingEnd="50dp"
android:paddingLeft="50dp"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">

<Spinner
android:padding="20dp"
android:id="@+id/sp_name"
android:entries="@array/nama_matakuliah"
android:layout_width="match_parent"
android:layout_height="wrap_content"></Spinner>
 <Button
android:id="@+id/bt_check"
android:text="Submit"
android:layout_width="match_parent"
android:layout_height="wrap_content" />

</LinearLayout>

Kemudian, cara mengambil value yang terpilih pada Spinner, buka

file MainActivity.java. Jadi flow nya adalah dipilih value yang ada pada Spinner
tersebut, kemudian ketika Button diklik, maka akan memunculkan nama value
yang dipilih.
Berikut adalah contoh codingannya pada MainActivity.java.

package id.ac.unair.fst.si.modul4spinner;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.Spinner;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

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

// ---------------- kode Tambahan : mulai ----------------------------

final Spinner spName = (Spinner) findViewById(R.id.sp_name);

Button btSpinner = (Button) findViewById(R.id.bt_check);

btSpinner.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Toast.makeText(MainActivity.this, "SELECTED : "+
spName.getSelectedItem().toString(), Toast.LENGTH_SHORT).show();
}
});

// ---------------- kode Tambahan : akhir ----------------------------

}
}

Karena Spinner tersebut sudah terisi list dari XML, saat klik Button, maka akan
memanggil method getSelectedItem() yang otomatis akan mengambil item
mana yang sedang dipilih pengguna dan mengubahnya ke String dengan
method toString().
Catatan :
Toast merupakan sebuah class yang digunakan untuk menampilkan
pesan/peringatan pada Android dan muncul hanya sepersekian detik.
Perhatikan tampilannya.

Spinner dengan Data Dinamis

Spinner dengan data dinamais, perlu ditambahkan string-array pada xml
resource, karena data list untuk Spinner akan didapatkan dari Activity nya
langsung berupa Array/ArrayList. Namun sebagai gantinya, digunakan
SpinnerAdapter, yang berfungsi untuk mengolah data array string tersebut
supaya bisa ditampilkan di Spinner.

Pertama-tama, tambahkan satu lagi Spinner view pada activity_main.xml :

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="id.ac.unair.fst.si.modul4spinnerdinamis.MainActivity">

<Spinner
android:id="@+id/sp_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="20dp">
</Spinner>

</android.support.constraint.ConstraintLayout>

Perlu diperhatikan, Spinner di atas tidak mempunyai atribut android:entries

karena kita tidak menggunakan atribut itu untuk memasukkan data di Spinner,
berbeda seperti di cara spinner data statis.
Adapun main codingannya pada file MainActivity.java adalah seperti berikut :

package id.ac.unair.fst.si.modul4spinnerdinamis;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.Spinner;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

// ------------ kode tambahan 1 : mulai ----------

 private Spinner spName;
private String[] namaMatakuliah = {
"Bahasa Indonesia",
"Bahasa Inggris",
"Sistem Operasi",
"Sistem Informasi",
"Logika dan Pemrograman",
"Matematika Diskrit",
"Rekayasa Perangkat Lunak",
"Jaringan Komputer",
"Pemrograman Berbasis Web",
"Pemrograman Berbasis Mobile",
"Pemrograman Berorientasi Obyek",
};

//------------- kode tambahan 1 : akhir -----------

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

// ------------ kode tambahan 2 : mulai -----------

spName = (Spinner) findViewById(R.id.sp_name);

// inisialiasi Array Adapter dengan memasukkan string array di atas

final ArrayAdapter<String> adapter = new ArrayAdapter<>(this,
android.R.layout.simple_spinner_item, namaMatakuliah);

// mengeset Array Adapter tersebut ke Spinner

spName.setAdapter(adapter);

// mengeset listener untuk mengetahui saat item dipilih

spName.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
@Override
public void onItemSelected(AdapterView<?> adapterView, View view, int i, long l) {
// memunculkan toast + value Spinner yang dipilih (diambil dari adapter)
Toast.makeText(MainActivity.this, "SELECTED : " +
adapter.getItem(i), Toast.LENGTH_SHORT).show();
}

@Override
public void onNothingSelected(AdapterView<?> adapterView) {
}
});

// ------------ kode tambahan 2 : akhir -----------

}
}

Jika dilihat pada codingan di atas, hal yang baru adalah adanya String[] array
yang berisi data yang nantinya akan digunakan di Spinner. Untuk memasukkan
array String tersebut ke dalam Spinner, harus menggunakan ArrayAdapter.
Setelah itu akan diset OnItemSelectedListener() pada Spinner. Supaya dapat
dimonitor state Spinner saat user selesai memilih sebuah item pada Spinner.

Dalam kasus ini akan memunculkan sebuah Toast yang berisi value item
Spinner yang dipilih.

RadioButton
Buatlah project baru di Android Studio. Setelah itu pada file activity_main.xml ,
ubah seperti berikut.:

<?xml version="1.0" encoding="utf-8"?>

<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="id.ac.unair.fst.si.modul4radiobutton.MainActivity">

<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="24dp"
android:text="Select Gender : "
android:textColor="@android:color/black"
android:textSize="18sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />

<RadioGroup
android:id="@+id/rg_gender"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView">

<RadioButton
android:id="@+id/rb_male"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true"
android:text="Male" />

<RadioButton
android:id="@+id/rb_female"
android:layout_width="wrap_content"
 android:layout_height="wrap_content"
android:text="Female" />
</RadioGroup>

<Button
android:id="@+id/bt_submit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="24dp"
android:text="Submit"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/rg_gender" />

</android.support.constraint.ConstraintLayout>

Jika ingin membuat RadioButton otomatis terpilih secara default, kita bisa
menambahkan code
android:checked="true"
di dalam view RadioButton yang ingin dipilih secara otomatis, Pada kasus ini
ditambahkan pada pilihan Male, sehingga RadioButton dengan pilihan “Male”
akan otomatis terpilih secara default.
Setelah itu, buka file MainActivity.java nya. Disini akan diterapkan logicnya,
yaitu dipilih satu RadioButton, kemudian ketika klik tombol Submit maka akan
muncul Toast yang berisi value dari RadioButton yang dipilih.

package id.ac.unair.fst.si.modul4radiobutton;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

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

// -------------- kode tambahan : awal ----------------------

final RadioGroup rgGender = (RadioGroup) findViewById(R.id.rg_gender);

Button btSubmit = (Button) findViewById(R.id.bt_submit);

btSubmit.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
int id = rgGender.getCheckedRadioButtonId();
 switch (id){
case R.id.rb_male :
Toast.makeText(MainActivity.this,"CLICKED :
"+((RadioButton)findViewById(id)).getText(), Toast.LENGTH_SHORT).show();
break;
case R.id.rb_female :
Toast.makeText(MainActivity.this,"CLICKED :
"+((RadioButton)findViewById(id)).getText(), Toast.LENGTH_SHORT).show();
break;
}
}
});

// -------------- kode tambahan : akhir ---------------------

}
}

Pada kode diatas, ketika diklik tombol submit, maka kita akan mengambil id dari
RadioButton yang dipilih dari RadioGroup menggunakan
RadioGroup.getCheckedRadioButtonId(). Setelah itu dengan switch case, akan
ditentukan RadioButton mana yang dipilih dengan melihat dari id yang tadi
diambil.

CheckBox : Contoh 1
Buatlah project baru di Android Studio. Setelah itu pada file activity_main.xml ,
ubah seperti berikut :
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="id.ac.unair.fst.si.modul4checkbox.MainActivity">

<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="24dp"
android:text="PILIH GENRE MUSIK YANG DISUKAI : "
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />

<CheckBox
android:id="@+id/cb_dangdut"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:checked="true"
android:text="MUSIK DANGDUT"
 app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView" />

<CheckBox
android:id="@+id/cb_pop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:text="MUSIC POP"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/cb_dangdut" />

<CheckBox
android:id="@+id/cb_jazz"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:text="MUSIC JAZZ"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/cb_pop" />

<CheckBox
android:id="@+id/cb_rock"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:text="MUSIC ROCK"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/cb_jazz" />

<Button
android:id="@+id/bt_submit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="24dp"
android:text="Submit"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/cb_rock" />

</android.support.constraint.ConstraintLayout>

Jika ingin dibuat CheckBox otomatis terpilih secara default, bisa

ditambahkan code :
android:checked="true"
di dalam view CheckBox yang ingin dipilih secara otomatis, Pada kasus ini
ditambahkan pada pilihan MacOS, sehingga RadioButton dengan pilihan “Mac
OS” akan otomatis terpilih secara default.
Selanjutnya, buka file MainActivity.java nya. Logic yang akan diterapkan yaitu
memilih/mencentang CheckBox yang mana saja, kemudian ketika klik tombol
“Submit” maka akan muncul Toast yang berisi status dari semua CheckBox.
Kodenya seperti berikut :
package id.ac.unair.fst.si.modul4checkbox;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.CheckBox;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

private CheckBox cbDangdut, cbPop, cbJazz, cbRock;

private Button btSubmit;

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

setButtonListener();
}

// ------------------- kode tambahan : awal ------------------------------------

private void setButtonListener() {
cbDangdut = (CheckBox) findViewById(R.id.cb_dangdut);
cbPop = (CheckBox) findViewById(R.id.cb_pop);
cbJazz = (CheckBox) findViewById(R.id.cb_jazz);
cbRock = (CheckBox) findViewById(R.id.cb_rock);
btSubmit = (Button) findViewById(R.id.bt_submit);

btSubmit.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
StringBuilder result=new StringBuilder();
result.append("Genre Musik : ");
if(cbDangdut.isChecked()){
result.append("\nDangdut");
}
if(cbPop.isChecked()){
result.append("\nPop");
}
if(cbJazz.isChecked()){
result.append("\nJazz");
}
if(cbRock.isChecked()){
result.append("\nRock");
}
Toast.makeText(getApplicationContext(), result.toString(),
Toast.LENGTH_LONG).show();
 }
});
}
// ------------------- kode tambahan : akhir ------------------------------------
}

CheckBox : Contoh 2
Buatlah project baru di Android Studio. Setelah itu pada file activity_main.xml ,
ubah seperti berikut :
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="id.ac.unair.fst.si.modul4checkboxv2.MainActivity">

<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="24dp"
android:text="PILIH GENRE MUSIK YANG DISUKAI : "
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />

<CheckBox
android:id="@+id/cb_dangdut"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:text="MUSIK DANGDUT"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView" />

<CheckBox
android:id="@+id/cb_pop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:text="MUSIC POP"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/cb_dangdut" />

<CheckBox
android:id="@+id/cb_jazz"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
 android:layout_marginTop="16dp"
android:text="MUSIC JAZZ"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/cb_pop" />

<CheckBox
android:id="@+id/cb_rock"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:text="MUSIC ROCK"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/cb_jazz" />

</android.support.constraint.ConstraintLayout>

Selanjutnya, buka file MainActivity.java nya. Logic yang akan diterapkan yaitu
memilih/mencentang CheckBox yang mana saja, maka akan muncul Toast yang
berisi status dari semua CheckBox.
Kodenya seperti berikut :
package id.ac.unair.fst.si.modul4checkboxv2;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.CheckBox;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

private CheckBox cbDangdut, cbPop, cbJazz, cbRock;

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

private void setCheckBoxListener() {

cbDangdut = (CheckBox) findViewById(R.id.cb_dangdut);
cbPop = (CheckBox) findViewById(R.id.cb_pop);
cbJazz = (CheckBox) findViewById(R.id.cb_jazz);
cbRock = (CheckBox) findViewById(R.id.cb_rock);

cbDangdut.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
if (((CheckBox) view).isChecked())
Toast.makeText(MainActivity.this,"Genre Dangdut dipilih",
Toast.LENGTH_SHORT).show();
 else
Toast.makeText(MainActivity.this,"Genre Dangdut tidak dipilih",
Toast.LENGTH_SHORT).show();
}
});

cbPop.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
if (((CheckBox) view).isChecked())
Toast.makeText(MainActivity.this,"Genre Pop dipilih",
Toast.LENGTH_SHORT).show();
else
Toast.makeText(MainActivity.this,"Genre Pop tidak dipilih",
Toast.LENGTH_SHORT).show();
}
});

cbJazz.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
if (((CheckBox) view).isChecked())
Toast.makeText(MainActivity.this,"Genre Jazz dipilih",
Toast.LENGTH_SHORT).show();
else
Toast.makeText(MainActivity.this,"Genre Jazz tidak dipilih",
Toast.LENGTH_SHORT).show();
}
});

cbRock.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
if (((CheckBox) view).isChecked())
Toast.makeText(MainActivity.this,"Genre Rock dipilih",
Toast.LENGTH_SHORT).show();
else
Toast.makeText(MainActivity.this,"Genre Rock tidak dipilih",
Toast.LENGTH_SHORT).show();
}
});
}
}

Toggle Button
Buatlah project baru di Android Studio. Setelah itu pada file activity_main.xml ,
ubah seperti berikut :
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
 tools:context="id.ac.unair.fst.si.modul4togglebutton.MainActivity">

<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:text="Contoh Toggle Button"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />

<ToggleButton
android:id="@+id/tgl_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:text="Toogle 1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView" />

<ToggleButton
android:id="@+id/tgl_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:text="Toogle 2"
android:textOff="MATI"
android:textOn="NYALA"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/tgl_1" />

<Button
android:id="@+id/bt_toggle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:text="Button Toggle"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/tgl_2" />

</android.support.constraint.ConstraintLayout>

Jika dilihat, pada layout di atas terdapat dua buah Toggle Button, yaitu sebut
saja toggleButton 1 dan toggleButton 2.

Pada toggleButton 1, digunakan label text default dari Toggle Button tersebut.
Sedangkan pada Toggle Button 2, diubah text label sesuai dengan state nya, jika
state nya ON maka label text nya adalah NYALA, sedangkan jika state nya OFF
maka labelnya adalah MATI.

Di bagian paling bawah ada sebuah Button/tombol state, yang ketika ditekan
akan mengecek status tiap-tiap Toggle Button apakah ON, atau OFF.

Kemudian, masukkan kode berikut pada MainActivity di project Android

Studio :

package id.ac.unair.fst.si.modul4togglebutton;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;
import android.widget.ToggleButton;

public class MainActivity extends AppCompatActivity {

ToggleButton toggleButton1, toggleButton2;

Button btState;

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

toggleButton1 = (ToggleButton) findViewById(R.id.tgl_1);

toggleButton2 = (ToggleButton) findViewById(R.id.tgl_2);
btState = (Button) findViewById(R.id.bt_toggle);

btState.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
StringBuilder result = new StringBuilder();
result.append("Status toggleButton1 : ").append(toggleButton1.isChecked());
result.append("\nStatus toggleButton2 : ").append(toggleButton2.isChecked());

Toast.makeText(MainActivity.this, result.toString(), Toast.LENGTH_SHORT).show();

}
});

}
}

Kode di atas cukup sederhana, hanya mengambil ToggleButton, dan kemudian

memasang fungsi OnClickListener sehingga apabila button state diklik, maka
akan ditampilkan status dari masing2 Toggle Button dalam bentuk Toast,
apakah itu ON atau OFF.
EditText
Pada praktikum ini, akan dipelajari cara format EditText supaya bisa menerima
inputan text berupa :
 text biasa
 angka
 nomor telepon
 password
 email
 url web

Buatlah project baru di Android Studio. Setelah itu pada file activity_main.xml ,
ubah seperti berikut :
<?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"
android:padding="15dp">

<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Masukkan Text Biasa"
android:inputType="text" />

<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Masukkan Angka"
android:inputType="number" />

<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Masukkan Nomor Telepon"
android:inputType="phone" />

<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Masukkan Password"
android:inputType="textPassword" />

<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Masukkan Email"
android:inputType="textEmailAddress" />

<EditText
android:layout_width="match_parent"
 android:layout_height="wrap_content"
android:hint="Masukkan URL"
android:inputType="textUri" />

</LinearLayout>

Penjelasan :
text biasa => inputType : text
angka => inputType : number
nomor telepon => inputType : phone
password => inputType : password
email => inputType : textEmailAddress
url web => inputType : textUri
Dengan menggunakan InputType, selain berfungsi untuk menspesifikasikan
data yang ingin diinputkan, InputType juga akan mengubah bermacam hal,
seperti layout keyboard, dan tampilan text. Untuk InputType number, maka
layout keyboard Android akan berubah hanya menampilkan angka, begitu
halnya dengan InputType email, layout keyboard kita akan menampilkan
simbol ‘@’ yang mudah diakses. Sedangkan untuk InputType password, maka
apa yang diketikkan tidak akan tampil pada EditText, hanya ada titik-titik.
Untuk membuat EditText yang sesuai dengan Android Material Design, kalian
bisa menambahkan TextInputLayout di EditText tersebut.
E. Tugas
F. Pustaka
https://developer.android.com/guide