h4rz / EsIndicatorSeekBar

Custom Seekbar implementations

Indicator SeekBar version

this library contains two customizable views.

 EsSeekBar
 EsRangeBar

in project --> build.gradle

allprojects {
    repositories {
        google()
        jcenter()
        maven { url 'https://jitpack.io' }

    }

in app --> build.gradle file :

android {
...
  compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
...
}

 dependencies {

	        implementation 'com.github.EsmaeelNabil:EsIndicatorSeekBar:0.2.4'

 }

XML Example

<com.esmaeel.indicatorseekbar.EsSeekBar
			android:id="@+id/_seekbar"
			android:layout_width="match_parent"
			android:layout_height="wrap_content"/>

<com.esmaeel.rangeindicatorseekbar.EsRangeBar
			android:id="@+id/_rangebar"
			android:layout_width="match_parent"
			android:layout_height="wrap_content"/>

Kotlin Example

override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        //Simple EsSeekBar
        _seekbar.doTheMagicIn(this,::seekBarListener)
	
	//Simple EsRangeBar
	_rangebar.doTheMagicIn(this,::rangeBarListener)
    
    } 

OnChangeListeners

First we need this :

• write a function for the EsSeekBar that takes an Int .
• path it like this doTheMagicIn(this,::seekBarListener) .
• here it is Your Listener is up and ready! .
• now i guess you know how to make one for EsRangeBar Yes? , Pravo :)

    private fun seekBarListener(progress: Int) {    
	textView.text = " progress =  $progress "
    }
    
    private fun rangeBarListener(startRange: Int, endRange: Int) {
        textView.text = " start =  $startRange end =  $endRange"
    }

Custom EsSeekBar with default indicator background "BLACK"

        _seekbar.doTheMagicIn(this,::seekBarListener
            ,indicatorPrefix = "KM"
            ,prefixPositionStart = false)

Custom EsSeekBar

        _seekbar.doTheMagicIn(this,::seekBarListener
            ,indicatorBackground = EsSeekBar.WHITE
            ,indicatorPrefix = "$"
            ,prefixPositionStart = true)

Custom EsSeekBar with custom layout resource file

but it must have a TextView with id=progress_text

        _seekbar.doTheMagicIn(this,::rangeBarListener
            ,indicatorBackground = EsSeekBar.CUSTOM_LAYOUT
            ,indicatorLayoutResource = R.layout.indicator_black
            ,indicatorPrefix = "KM"
            ,prefixPositionStart = false)

rangeBar with indicator default white background

        _rangebar.doTheMagicIn(this,::rangeBarListener
            ,indicatorBackground = EsSeekBar.WHITE
            ,indicatorPrefix = "KM"
            ,prefixPositionStart = false)

Custom rangeBar with indicator custom layout

        _rangebar.doTheMagicIn(this,::rangeBarListener
            ,indicatorBackground = EsSeekBar.CUSTOM_LAYOUT
            ,indicatorLayoutResource = R.layout.indicator_black
            ,indicatorPrefix = "KM"
            ,prefixPositionStart = false)

Explaning Artical

https://www.linkedin.com/pulse/indicator-seekbar-android-kotlin-esmaeel-napil/

Thanks to

https://github.com/Jay-Goo/RangeSeekBar @Jay-Goo