Cara Membuat dan Menggunakan Sliders (Seekbar) di Aplikasi Android

Tutorial Cara Menggunakan sliders (Seekbar) di Aplikasi Android

Halo semuanya. bagaimana kabar kalian hari ini? saya harap kalian baik-baik saja. Pada kesempatan kali ini, saya akan membagikan tutorial tentang bagaimana cara membuat dan menggunakan slider (seekbar) di aplikasi android.

Sliders atau bisa juga disebut SeekBar adalah salah satu komponen yang penting dalam aplikasi, baik itu android maupun iOS. Komponen ini mencerminkan rentang nilai di sepanjang bilah (bar), tempat user dapat memilih suatu nilai. Perubahan yang dilakukan dengan seekbar bersifat instan, memungkinkan user untuk melakukan penyesuaian sliders sampai menemukan apa yang mereka inginkan.

Contoh komponen sliders yang sering kita temui pada smartphone kita adalah ketika kita ingin mengubah ukuran volume. Komponen ini juga bisa digunakan untuk keperluan lainnya seperti mencari rentang harga pada aplikasi e-commerce, menerapkan suatu filter pada gambar, mengubah ukuran teks dan lainnya.

- Advertisement -

Pada tutorial ini kalian akan belajar bagaimana cara membuat dan menggunakan sliders atau seekbar di aplikasi android untuk mengubah ukuran teks.

Tutorial Cara Membuat dan Menggunakan Sliders di Aplikasi Android Dengan Widget AppCompatSeekBar

Buatlah projek android studio baru dengan informasi sebagai berikut:

Application Name:Sliders App
Company Name:androidrion.com
Package Name:com.androidrion.slidersapp
Language:Java
Minimum SDK:API 15: Android 4.0.3 (IceCreamSandwich)

Daftar file xml layout yang digunakan dalam projek ini:

  1. activity_main.xml

Daftar file java activity yang digunakan dalam projek ini:

  1. MainActivity.java

Berikut ini adalah langkah-langkah dalam pembuatan aplikasi Sliders App.

XML Layout File

Buka file activity_main.xml pada projek android studio kalian lalu ubah layout default menjadi layout RelativeLayout. Di dalam layout tersebut, tambahkan widget TextView yang berfungsi sebagai contoh bawah sliders berfungsi dengan benar. Lalu tambahkan lagi widget AppCompatSeekBar yang berfungsi sebagai sliders itu sendiri. Berikut adalah kode lengkap untuk file activity_main.xml

<RelativeLayout 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="16dp"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_centerHorizontal="true"
        android:text="Android Rion"
        android:textAlignment="center"
        android:textColor="@android:color/black"
        android:textSize="20sp" />

    <TextView
        android:id="@+id/textView2"
        style="@style/TextAppearance.AppCompat.Subhead"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/seekBar"
        android:layout_marginBottom="8dp"
        android:hint="0/10" />

    <androidx.appcompat.widget.AppCompatSeekBar
        android:id="@+id/seekBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:max="10" />

</RelativeLayout>

Java Activity File

Setelah kalian mendesain layout aplikasi, sekarang saatnya kita memprogram widget yang telah kita pasang pada file activity_main.xml. Buka file MainActivity.java pada projek kalian lalu tambahkan kode di bawah ini.

package com.androidrion.myapplication;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.widget.SeekBar;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    int textSize = 20;

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

        final TextView txtSeekBar = findViewById(R.id.textView);
        final TextView textView2 = findViewById(R.id.textView2);
        SeekBar seekBar = findViewById(R.id.seekBar);

        txtSeekBar.setTextSize(textSize);
        textView2.setText(seekBar.getProgress() + "/" + seekBar.getMax());
        seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {

            int progress = 0;

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {
                textView2.setText(progress + "/" + seekBar.getMax());
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {

            }

            @Override
            public void onProgressChanged(SeekBar seekBar, int progressValue, boolean fromUser) {
                textSize = textSize + (progressValue - progress);
                progress = progressValue;
                txtSeekBar.setTextSize(textSize);
            }
        });

    }
}

Run ‘app’

Sekarang jalankan projek android studio kalian. Pada tampilan awal aplikasi, kalian melihat di bagian bawah layar aplikasi terlihat sliders. Jika kalian menscroll widget tersebut ke arah kanan, maka secara otomatis teks yang berada di tengah-tengah aplikasi akan membesar. Begitu pun sebaliknya jika kalian menggeserkan sliders ke arah kiri maka teks yang berada di tengah-tengah layar aplikasi akan mengecil. Jika kode pada tutorial ini tidak terjadi masalah, maka aplikasi akan terlihat seperti pada gambar di bawah ini.

AKHIR KATA

Itulah tadi tutorial singkat dan mudah tentang bagaimana cara membuat dan menggunakan sliders atau seekbar di aplikasi android. Tutorial di atas sangatlah mudah untuk dikerjakan karena tidak begitu banyak kode yang digunakan.

Apabila kalian mengalami kendala pada tutorial ini, silahkan komentar pada artikel ini. Jangan lupa untuk like dan subscribe Channel YouTube Android Rion. Semoga artikel ini membantu kalian. terima kasih.

- Advertisement -

Get real time updates directly on you device, subscribe now.

You might also like

- Advertisement -

Leave A Reply

Your email address will not be published.