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.

Comments

Post Terpopuler Sepanjang Masa

Cara Memasang Iklan Interstitial AdMob

Cara Memasang Iklan Banner AdMob di Android Studio

Aplikasi Pengingat Tugas (To Do Reminder) Android

Tutorial Menerapkan Animasi Lottie di Android Studio

Cara Merubah Package Name di Android Studio

Membuat Custom Listview di Android Studio

Cara Membuat Custom Icon Vector Asset di Android Studio