미리보는 완성결과

• slider의 step마다 하단에 value값이 적혀있는 slider이다.
• 안드로이드는 하단에 value를 적는 속성이 없기 때문에 slider 하단에 value TextView를 붙여서 만들 것이다.

slider 꾸미기

• 일단 해당 스펙을 보고 디자인대로 꾸며보자

<style name="Widget.App.Slider" parent="Widget.MaterialComponents.Slider">
        <item name="labelStyle">@style/Widget.App.Tooltip</item>
        <item name="thumbColor">@color/white</item>
        <item name="thumbStrokeColor">@color/primary_color</item>
        <item name="thumbStrokeWidth">4dp</item>
        <item name="trackHeight">7dp</item>
        <item name="thumbRadius">8dp</item>
        <item name="trackColorActive">@color/primary_color</item>
        <item name="trackColorInactive">@color/gray1</item>
        <item name="trackCornerRadius">4dp</item>
        <item name="tickVisible">false</item>
    </style>

 <style name="Widget.App.Tooltip" parent="Widget.MaterialComponents.Tooltip">
        <item name="android:textAppearance">@style/TextAppearance.App.Regular10</item>
        <item name="android:textColor">@color/white</item>
        <item name="backgroundTint">@color/primary_color</item>
    </style>

여기서 Tooltip은 완성본에서처럼 thumb을 선택했을 때 위에 뜨는 말풍선이다.
나는 간단하게 폰트랑 배경색상 정도만 변경하였다.
tickVisible은 slider의 step마다 track에 칸이 나눠져있는 것을 보여줄 것인지 아닌지인데 나는 하단에 보여줄 거라서 false로 설정해줬다.

이렇게 선언하고 style을 적용하면

이렇게 뚱뚱한? slider가 된다. 하단의 저 textView가 slider에 딱 붙어야 하기 때문에 slier의 크기를 track에 딱 맞게 설정해줘야 한다.

slider 크기 track에 맞추기

values 파일을 따라 올라가봤지만 padding에 관련된 속성은 찾을 수 없었다..😢
그래서 구글에게 물어봤더니 stackoverflow에서 답을 찾을 수 있었다.

여기 링크에 들어가면 slider에 적용되어 있는 dimen 값들을 볼 수 있는데 난 여기서

  <dimen name="mtrl_slider_track_side_padding">16dp</dimen>
  <dimen name="mtrl_slider_widget_height">48dp</dimen>

이 두 dimen을 사용하였다.

이 값을 그냥 내 프로젝트의 dimens 폴더에

  <dimen name="mtrl_slider_track_side_padding" tools:override="true">4dp</dimen>
  <dimen name="mtrl_slider_widget_height" tools:override="true">12dp</dimen>

이렇게 오버라이드해서 선언해주었다. dimen 값이 private이라서 override = "true"라고 해줘야 한다.

side padding을 넣어줄 때 조심할 점

그냥 딱 붙일 거니까 0dp 해야지~~ 하면 radius 값 넣은 게 없어지고 각지게 될 것이다. radius 값만큼은 남겨둬야지 둥근 모서리를 유지할 수 있다.

slider가 여러개면?

나의 경우, 프로젝트에서 slider가 하나라 그냥 오버라이드 했지만 이렇게 오버라이드를 하면 모든 프로젝트 내 slider에 적용이 된다. 여러 slider 중 하나만 이렇게 변경해주고 싶은 경우는 아마 일단 0dp로 없애주고 나머지를 padding을 넣어주는 방식으로 해야 하지 않을까..

value 붙여주기

각 step별로 하단에 붙어있는 |표시는 View로 만들었다.
0분과 30분 이상에 있는 View를 기준으로 가운데 View들은 chain을 걸어서 동일 간격을 가지게 하면 slider의 step과 value가 동일한 위치에 자리하게 된다.

<View
            android:id="@+id/sliderDivider1"
            android:layout_width="1dp"
            android:layout_height="6dp"
            android:layout_marginStart="4dp"
            android:background="@color/charcoal_color"
            app:layout_constraintStart_toStartOf="@id/timeSlider"
            app:layout_constraintTop_toBottomOf="@id/timeSlider" />

텍스트뷰는 그냥 view 바로 아래 붙여주면 된다.

<TextView
            android:id="@+id/sliderTextView1"
            style="@style/TextAppearance.GoBong.Regular10"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="0분"
            android:textColor="@color/charcoal_color"
            app:layout_constraintEnd_toEndOf="@id/sliderDivider1"
            app:layout_constraintStart_toStartOf="@id/sliderDivider1"
            app:layout_constraintTop_toBottomOf="@id/sliderDivider1" />

세줄 요약

1. material slider에서 내가 변경하고 싶은 color, radius, height 등등을 속성을 변경해준다.
2. slider의 padding과 height에 해당하는 dimen값을 오버라이딩 해준다.
3. slider 크기를 기준으로 chain을 걸어서 slider의 각 step 위치와 텍스트의 위치를 동일하게 맞춰준다.