Cara Menerapkan Widget SeekBar Android Studio
Assalamualaikum Warahmatullahi Wabarakatuh.
Di kesempatan kali ini saya akan berbagi tutorial mengenai cara penerapan widget control SeekBar pada Android Studio, SeekBar merupakan turunan dari ProgressBar yang digunakan untuk menampilkan indikasi kemajuan suatu proses, hampir sama dengan progressBar biasanya, yang membedakan hanyalah indikasi kemajuan pada SeekBar dapat kita geser maju atau mundur dengan cara di drag dengan jadi.
Widget ini umumya digunakan untuk mengatur volume, kecerahan, dan juga digunakan saat memutar musik atau video, dimana user dapat mengeser progress, maju atau mundur sesuai kehendak.
Materi Sebelumnya Yang Direkomendarikan Untuk Kalian:
- Cara Menerapkan ProgressBar pada Android Studio
- Tutorial Menggunakan RadionButton dan RadioGroup
- Tutorial Dasar Penggunaan Thread pada Java
Menerapkan Widget SeekBar
1) Buat Project baru pada Android Studio kalian, lalu buat activity baru, berinama "MainActivity".
2) Buka file activity_main.xml pada project tersebut, kita akan menggunakan 2 buah widget, yaitu SeekBar dan TextView, SeekBar akan kita gunakan agar user bisa mengatur indikasi kemajuan yang sedang diproses dan TextView digunakan untuk menampilkan persentase dari progres tersebut.
<?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:layout_margin="14dp"
android:gravity="center"
android:orientation="vertical"
tools:context="android.cianjur.developer.net.basicandroid.MainActivity">
<SeekBar
android:id="@+id/seekBar"
style="@style/Widget.AppCompat.SeekBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:max="100"
android:progress="0" />
<TextView
android:id="@+id/persentase"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="0%"
android:textSize="15sp"
android:textStyle="bold" />
</LinearLayout>
Disana kita mengset maximum value pada seekBar menjadi 100 dan memulai progres tersebut dari 0, pada atribut style, kalian dapat mengatur memilih gaya dan tampilan seekBar tersebut sesuai keinginan.
Jika tidak menggunakan kode xml secara manual, kalian dapat mendrag/drop pada bagian Pallet dibagian layout, seperti ini:
3) Selanjutnya masukan souce code berikut ini pada MainActivity.java kalian:
package android.cianjur.developer.net.basicandroid;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.SeekBar;
import android.widget.TextView;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity implements SeekBar.OnSeekBarChangeListener{
private SeekBar seekBar;
private TextView Persentase;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
seekBar = findViewById(R.id.seekBar);
Persentase = findViewById(R.id.persentase);
seekBar.setOnSeekBarChangeListener(this); // Menambahkan Listener Pada SeekBar
}
@Override
public void onProgressChanged(SeekBar seekBar, int value, boolean b) {
// Pemberitahuan Bahwa Nilai Pada Progress Telah Berubah
Persentase.setText(String.valueOf(value));
}
@Override
public void onStartTrackingTouch(SeekBar seekBar) {
// Pemberitahuan Bahwa User Telah Menyentuh/Mengendalikan Progress Pada SeekBar
Toast.makeText(this, "Progress Dimulai", Toast.LENGTH_SHORT).show();
}
@Override
public void onStopTrackingTouch(SeekBar seekBar) {
// Pemberitahuan Bahwa User Telah Selesai Mengendalikan Progress Pada SeekBar
Toast.makeText(this, "Progress Berhenti", Toast.LENGTH_SHORT).show();
}
}
Terakhir jalankan project tersebut, kurang lebih hasilnya akan seperti berikut ini:
Sekian dari Saya, Wassalamualaikum Warahmatullahi Wabarakatuh.