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.

Panduan dasar cara menerapkan seekBar pada android studio, progress, setOnSeekBarChangeListener, onProgressChanged, onStartTrackingTouch, onStopTrackingTouch, java programing, android studio. Dari WILDAN TECHNO ART.

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:

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:

WildanTechnoArt-SeekBar Example

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:

WildanTechnoArt-Screenshot_SeekBar Finish Example

Sekian dari Saya, Wassalamualaikum Warahmatullahi Wabarakatuh.


Berlangganan Untuk Menerima Update Terbaru:

Posting Komentar