[안드로이드] Slider에서 간격을 일정하지 않게 사용하고 싶을때 사용하는 라이브러리 (FlexibleStepRangeSlider)

Youngjik Yoon

Published in

PRND

5 min readNov 12, 2021

SeekBar, MaterialSlider를 쓰면서 간격이 일정해서 아쉬우셨던 분 필독 !

안녕하세요.
헤이딜러 안드로이드팀의 윤영직입니다.

우리는 안드로이드 개발을 하면서 범위 선택 컴포넌트를 만들기 위해 SeekBar와 머티리얼 컴포넌트의 Slider를 사용하고는 합니다.

또한 오픈소스로 나와있는 다양한 SeekBar 라이브러리가 있습니다.

헤이딜러에서 범위형 필터를 설정할 때는
범위에 대한 구간이 일정하지 않고 점점 커지게끔 구성되어 있습니다.

위 UI의 요구사항은 아래와 같습니다.

요구사항

범위를 드래그 할 수 있는 버튼은 구간이 2개 이상이여도 최대 2개로 한다.
드래그 하면 일정한 간격에서 멈추지 않고 전체 범위를 기준으로 실제 값에 비례한 곳에서 멈추어야 한다.

1번은 값을 두개만 넣어두고 value를 format 하는 방법으로 어느정도 해결이 가능합니다.

그런데 2번 요구사항은 머티리얼 컴포넌트를 비롯해 모든 라이브러리를 둘러보았지만 항상 일정한 간격으로 구현이 되어 있었습니다.

(https://github.com/Jay-Goo/RangeSeekBar)

그래서 간격을 유연하게 설정할 수 있는 컴포넌트를 직접 만들었습니다. 😃

GitHub - PRNDcompany/FlexibleStepRangeSlider

We use RangeSlider in Material Components for range filter as below But it has fixed step size so we have to render…

github.com

사용 방법은 머티리얼 컴포넌트의 RangeSlider와 유사합니다

XML

<kr.co.prnd.slider.FlexibleStepRangeSlider
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:valueFrom="float" 
    android:valueTo="float"
    app:thumbColorActive="color"
    app:thumbColorInactive="color"
    app:thumbElevationActive="dimension"
    app:thumbElevationInactive="dimension"
    app:thumbRadiusActive="dimension"
    app:thumbRadiusInactive="dimension"
    app:thumbStrokeColorActive="color"
    app:thumbStrokeColorInactive="color"
    app:thumbStrokeWidthActive="dimension"
    app:thumbStrokeWidthInactive="dimension"
    app:tickColorActive="color"
    app:tickColorInactive="color"
    app:tickVisible="boolean"
    app:trackColorActive="color"
    app:trackColorInactive="color"
    app:trackHeight="dimension"
    app:values="floatArray" />