Cara Membuat SeekBar di Android Studio | PART 1

 

PENDAHULUAN

    SeekBar merupan salah satu komponen proses pada input di android yang penggunaannya adalah dengan cara menggeser komponen tersebut secara vertical atau secara horizontal. User bisa berinteraksi dengan komponen ini. Interaksi dari user tersebut menghasilkan nilai dalam bentuk Integer. Nilai tersebut memiliki rentang yang dapat di sesuaikan pada aplikasi.

    Penggunaan seekbar biasanya di gunakan pada mengatur tinggi rendah sebuah sound tapi tidak menutup kemungkinan di gunakan pada hal yang lain. Komponen seekbar di tulis dengan perintah <SeekBar> </SeekBar>. Sedangkan attributnya hampir menyerupai dengan komponen yang lain.

    Agar lebih paham lagi tentang seekbar ini mari kita uji coba sekarang.

Membuat Desain XML SeekBar

    Kita buat terlebih dahlu sebuah desain antarmuka dengan menggunakan layout Linear. Kemudian kita tambah komponen SeekBar di dalamnya. Silahkan buat projek baru, masuk ke halaman activity_main.xml dan ketikkan code 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:padding="10dp"
tools:context=".MainActivity">

<SeekBar
android:id="@+id/sb_seekbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:max="10"
android:min="1"
android:progress="3"/>

</LinearLayout>

    Penjelasan

• android:min=" " => Menentukan nilai minimal
• android:mx =" " =>menentukan nilai maksimal
• android: progress=" " => Menentukan nilai awal di mana seekbar mulai di proses

    Anda dapat mengganti masing-masing nilai di atas sesuai degan ke inginan anda. Berikut hasilnya jika di jalankan

    Lalu bagaimana kita tahu nilai yang di pilih dari seekbar? Kita bisa bermain-main di code sekarang. Kita perlu menambah konsep "onSekkBarChangeListener".     Masuk ke file MainActivity.kt. Kita panggil komponen seekbar dengan program. perhatikan code berikut;

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)

val sbSeekBar: SeekBar =findViewById(R.id.sb_seekbar)
}

    Sekarang kita tambahkan code Listenernya. 

val sbSeekBar: SeekBar =findViewById(R.id.sb_seekbar)

sbSeekBar.setOnSeekBarChangeListener(object :OnSeekBarChangeListener{} )

    Terjadi error pada object. Klik code tersebut hingga muncul list librarynya. Pilih "Implements Members" hingga muncul kotak dialog yang menampilkan 3 buah class. Pilih ke 3 class tersebut hingga di buat class sperti berikut:

sbSeekBar.setOnSeekBarChangeListener(object :OnSeekBarChangeListener{
override fun onProgressChanged(seekBar: SeekBar?, progress: Int, fromUser: Boolean) {
TODO("Not yet implemented")
}

override fun onStartTrackingTouch(seekBar: SeekBar?) {
TODO("Not yet implemented")
}

override fun onStopTrackingTouch(seekBar: SeekBar?) {
TODO("Not yet implemented")
}
} )

    Kegunaan dari fungsi diatas adalah:

• onProgressChanged()        => Nlai di tampilkan saat aksi sedang di pilih
• onStartTrackingTouch() => Nilai di tampilkan saat awal aksi dilakukan
  
• onStopTrackingTouch()   => Nlai di tampilkan saat aksi berhentidi pilih    

    Untuk uji coba kita coba tambahkan toast pada salah satu function di atas. Perhatikan code berikut:

override fun onStopTrackingTouch(seekBar: SeekBar?) {
if (seekBar != null) {
Toast.makeText(this@MainActivity, "Nilai :" + seekBar.progress, Toast.LENGTH_SHORT).show()
}
}

 Jalankan program anda dan perhatikan toast yang muncul saat anda menggeser seekBar.  Coba anda pindahkan Toast ke function yang lain dan jalankan program.

    Nah tampil nilai prosess pada bagian toast bukan. Tampilan ini berada pada bagian bawah layout.

Menampilkan nilai di TextView :

    Nah sekarang kita tidak akan menampilkan nilai di Toast tapi kita set ke TextView. Anda mausuk kembali ke desain xml tadi dan tambahkan komponen TexView sebanyak 2 komponen. Berikut bentuk code yang perlu di tambahkan.

<?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:padding="10dp"
android:gravity="center"
android:orientation="vertical"
tools:context=".MainActivity">
<TextView
android:id="@+id/tv_nilai_proses"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" 0 "
android:padding="20dp"/>
<TextView
android:id="@+id/tv_status_proses"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="- -"
android:padding="20dp"/>
<SeekBar
android:id="@+id/sb_seekbar"
android:layout_width="match_parent"
android:padding="15dp"
android:min="1"
android:max="10"
android:progress="3"
android:layout_height="wrap_content" />
</LinearLayout>

    Selanjutnya masuk ke file MainActivity.kt. Kita panggi ke du kompoenen tersebut dengan menambahkan code berikut:

val tvNilai:TextView = findViewById(R.id.tv_nilai_proses)
val tvStatus:TextView= findViewById(R.id.tv_status_proses)
val sbSeekBar: SeekBar =findViewById(R.id.sb_seekbar)

    Sekarang lengkapi kode function seperti berikut:

sbSeekBar.setOnSeekBarChangeListener(object : OnSeekBarChangeListener {
override fun onProgressChanged(seekBar: SeekBar, progress: Int, fromUser: Boolean) {
tvNilai.text = progress.toString()
}

override fun onStartTrackingTouch(seekBar: SeekBar) {
tvStatus.text = "Anda Mulai menggeser"
}

override fun onStopTrackingTouch(seekBar: SeekBar?) {
tvStatus.text = "Anda berhenti menggeser"
}
})

    

Terakhir jalankan projek anda. Coba geser seekbar ke kiri atau kanan. Perhatikan perubahannya.

Nah sampai di sini pembahasan kita tentang bagaimana menggunakan seekbar.