Contoh Penerapan SeekBar Android

SeekBar adalah perpanjangan dari ProgressBar yang menambahkan thumb (jempol) yang dapat ditarik ke kanan atau kiri untuk menyetel tingkat kemajuan sesuatu. Dalam tutorial ini akan dicontohkan penerapan SeekBar untuk menyetel ukuran dari sebuah TextView.

Berikut contoh pemanggilan komponen SeekBar pada layout XML :

<SeekBar
    android:id="@+id/seekBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:max="100"/>

Atribut android:max="100" akan membatasi nilai maksimum dari progress, sehingga bila thumb sudah mencapai nilai 100, thumb tidak akan bergeser lagi ke kanan. Nilai dapat di atur sesuai dengan yang dibutuhkan.

Dalam contoh ini kita akan memiliki 3 komponen TextView, 2 komponen ImageView sebagai tombol untuk mengurangi dan menambah progress disamping dari menggeser thumb, dan tentunya komponen Seekbar itu sendiri. Berikut isi lengkap XML activity_main :

 

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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=".MainActivity"
    tools:ignore="UnusedAttribute">

    <LinearLayout
        android:id="@+id/layoutSeekBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:orientation="horizontal"
        android:padding="10dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" >

        <TextView
            android:id="@+id/teksKurang"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="10dp"
            android:layout_marginStart="10dp"
            android:fontFamily="serif"
            android:textColor="@color/hitam"
            android:text="0"
            android:textSize="20sp" />

        <ImageView
            android:id="@+id/tombolKurang"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:contentDescription="@string/app_name"
            android:src="@drawable/ic_remove"
            android:background="@drawable/bg_tombol"
            android:foreground="?selectableItemBackground" />

        <SeekBar
            android:id="@+id/seekBar"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:paddingTop="5dp"
            android:paddingBottom="5dp"
            android:layout_marginStart="10dp"
            android:layout_marginEnd="10dp"
            android:max="100"/>

        <ImageView
            android:id="@+id/tombolTambah"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:contentDescription="@string/app_name"
            android:src="@drawable/ic_add"
            android:background="@drawable/bg_tombol"
            android:foreground="?selectableItemBackground" />

        <TextView
            android:id="@+id/teksTambah"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="10dp"
            android:layout_marginEnd="10dp"
            android:fontFamily="serif"
            android:textColor="@color/hitam"
            android:text="25"
            android:textSize="20sp" />
    </LinearLayout>

    <TextView
        android:id="@+id/hasil"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_marginTop="20dp"
        android:text="Ukuran Teks"
        android:textSize="25sp"
        android:fontFamily="serif"
        android:textColor="@color/hitam"
        app:layout_constraintTop_toBottomOf="@id/layoutSeekBar"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

Untuk icon source ImageView tombol kurang dan tambah, dapat dibuat melalui Vector Asset pada Android Studio, kemudian background drawable bulat bg_tombol untuk kedua tombol tersebut dapat dibuat melalui Drawable Resource File pada Android Studio, isi file nya seperti dibawah ini :

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <stroke android:width="1dp"/>

</shape>

Selanjutnya pada MainActivity.java, tentunya pertama-tama dengan menentukan variabel-variabel untuk komponen-komponen diatas, dan variabel untuk sebuah integer atau int. Integer adalah bilangan bulat digunakan tentunya sebagai ukuran TextView nantinya saat Seekbar digeser atau tombol di tekan.

Berikut isi selengkapnya dari activity MainActivity.java dengan sedikit penjelasan "java comment" di dalamnya :

package com.gwnbs.seekbar;

import androidx.appcompat.app.AppCompatActivity;

import android.annotation.SuppressLint;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.SeekBar;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    //Variabel Global privat Komponen
    private TextView  teksTambah, hasil;
    private SeekBar seekBar;
    private int kemajuan;


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

        //view ID
        teksTambah = findViewById(R.id.teksTambah);
        hasil = findViewById(R.id.hasil);
        seekBar = findViewById(R.id.seekBar);

        //lokal variabel dan View ID
        ImageView tombolKurang = findViewById(R.id.tombolKurang);
        ImageView tombolTambah = findViewById(R.id.tombolTambah);

        //Metode untuk seekbar saat digeser
        seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                teksTambah.setText(String.valueOf(progress));
                hasil.setText("Ukuran Teks " + progress);
                hasil.setTextSize((float) progress);
                kemajuan = progress;
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {

            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {

            }
        });

        //Konversi dari nilai textview teksTambah ke int
        kemajuan = Integer.parseInt(teksTambah.getText().toString());

        //metode klik untuk imageView tombol tambah
        tombolTambah.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //Setiap kali tombol tambah di klik, nilai bertambah 1
                kemajuan = kemajuan + 1;
                teksTambah.setText("" + kemajuan);
                hasil.setText("Ukuran Teks " + kemajuan);
                hasil.setTextSize((float) kemajuan);
                seekBar.setProgress(kemajuan);
            }
        });

        //metode klik untuk imageView tombol kurang
        tombolKurang.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //Setiap kali tombol kurang di klik, nilai berkurang 1
                kemajuan = kemajuan - 1;
                teksTambah.setText("" + kemajuan);
                hasil.setText("Ukuran Teks " + kemajuan);
                hasil.setTextSize((float) kemajuan);
                seekBar.setProgress(kemajuan);
            }
        });
    }
}

Sekian dan terima kasih atas waktu Anda mampir di artikel ini. Jika ada yang ingin ditanyakan silahkan diposting melalui komentar.