Membuat Slider Keren Dengan Fluid Slider Android [Kotlin]

the lightning story will make a cool slider

Fiqih Firdaus Maulana
2 min readJan 31, 2021

Hay semua, ketemu lagi kita, kali ini beda dari yang biasanya ya, jadi ada series baru yaitu lightning story, apa itu lightning story yaa seperti namanya lighting dan story, ini akan membahas hal hal kecil tapi seru untuk dibahas.

Fluid Slider, kita akan mencoba membuat slider yang keren. Untuk langkah langkah nya bisa dilihat di bawah ini.

Step by Step

  1. Buat project baru di Android Studio.
  2. Tambahkan dependency Fluid Slider dari Ramotion.
  3. Membuat layout di activity_main.xml
  4. Menambahkan beberapa baris kode di MainActivity.kt

Practice

Sampai disini seharusnya sudah membuat project baru di android studio kalian ya.

Lanjut, tambahkan dependency dari Ramotion, di build.gradle (Module) kalian

implementation 'com.ramotion.fluidslider:fluid-slider:0.3.1'

Selanjutnya buka res➡layout➡activity_main.xml dan buat layout nya dengan kode berikut.

Layout tersebut akan membuat tampilan seperti digambar. jika tidak puas dengan slider yang saya contohkan kalian bisa modifikasi sendiri sesuai mau kalian.
Ramotion sudah memberikan beberapa atribut yang bisa kalian pakai untuk merubah tampilan slidernya, dan berikut atribut nya.

  • bar_color - Warna Slider.
  • bubble_color - Warna lingkaran didalam bar.
  • bar_text_color - Warna teks di awal dan akhir slider.
  • bubble_text_color - Warna teks didalam lingkaran.
  • start_text - Teks mulai.
  • end_text - Teks akhir.
  • text_size - Ukuran teks.
  • duration - Durasi dalam milidetik.
  • initial_position - Titik awal mulai slider 0.0 sampai 1.0.
  • size - Ketinggian slider. Contoh small (40dp) dannormal (56dp).

Oke, sudah ya dan terakhir buka MainActivity kalian dan tambahkan beberapa kode berikut.

Output

Last Words

Dan yaa, sampai disini berarti kita sudah membuat slider yang keren lah yaa.
Untuk full project di github saya: https://github.com/FiqSky/sample-fluid-slider

sampai jumpa di story berikut nya, learn-doing-anything.🔥

--

--