Last Updated on 7 years by Mas Herdi
Halo semua, kali ini kita akan belajar tentang salah satu elemen dasar di Android yaitu Toggle Button. Pada dasarnya Toggle Button adalah tombol/Button di Android yang dimodifikasi sehingga mempunyai dua buah state, yaitu ON atau OFF. Toggle Button sifatnya di dunia nyata mirip seperti saklar lampu, dimana kita bisa menyalakan atau mematikan saklar tersebut.
Cara Membuat Toggle Button di Android Menggunakan Android Studio
Oke, langsung saja, seperti biasa kita akan membuat sebuah project baru di Android Studio terlebih dahulu. Setelah itu pada file activity_main.xml kita 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:gravity="center_horizontal|center_vertical"
android:background="@drawable/bg2"
android:orientation="vertical">
<TextView
android:text="Tutorial Toggle Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<ToggleButton
android:id="@+id/tgl_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Toogle 1" />
<ToggleButton
android:id="@+id/tgl_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Toogle 2"
android:textOff="Mati"
android:textOn="Nyala" />
<Button
android:id="@+id/bt_toggle"
android:text="Button Toggle"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
Jika kalian lihat, pada layout di atas terdapat dua buah Toggle Button, yaitu sebut saja toggleButton 1 dan toggleButton 2.
Pada toggleButton 1, kita akan menggunakan label text default dari Toggle Button tersebut. Sedangkan pada Toggle Button 2, kita akan ubah 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 dia ON, atau OFF.
Kemudian, masukkan kode berikut pada MainActivity di project Android Studio kalian :
/**
* Created by Hafizh Herdi on 1/3/2017.
*/
public class MainActivity extends AppCompatActivity {
ToggleButton toggleButton1, toggleButton2;
Button btState;
@Override
protected void onCreate(@Nullable 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(TWOHLayoutToggle.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.
Jangan lupa juga tambahkan import2 yang kurang pada file di atas dengan cara menekan ALT-ENTER.
DEMO
Jika sudah, langsung saja kita demokan project-nya :
Toggle Button Android | (c) Instagram
Bisa diperhatikan pada gambar di atas, Toggle Button atas menggunakan label default sehingga tulisan untuk setiap state adalah ON atau OFF. Sedangkan Toggle Button di bawah adalah Toggle yang sudah kita edit label text nya menjadi NYALA / MATI. Dari Toast bisa kita lihat statusnya, apabila tombolnya OFF maka statusnya FALSE, dan jika ON maka statusnya TRUE.
That’s all ! Semoga membantu. ? Dan jangan lupa untuk clone project nya sebagai Android Studio module di GitHub saya, dengan terlebih dahulu follow dan star project tersebut. ?Silahkan bertanya di bagian komentar jika ada yang kurang jelas.
