[안드로이드]SeekBar 커스텀 하기

 안드로이드 앱 제작시에 제법 자주 사용하게 되는 위젯중의 하나가  SeekBar 입니다.
미디어플레이에서 재생 위치를 변경하기 위해서 라던가 수치값을 변경할 필요가 있을때
간단하게 쓸 수 있으면서 효율적이죠.

 기본적으로 그냥 위젯을 사용시에는 옵션 등에서 자주 보게 되는 노란색의 SeekBar가 생성됩니다. 하지만 모든 앱에 노란색이 어울리는건 아니죠;

  SeekBar를 커스텀할 때, 배경이미지부터 Progress이미지까지 새로 제작해서 완전히 새로운 SeekBar를 만드는 것도 가능하지만, 여기서는 복잡한 과정없이 색상 만을 바꾸는 법을 설명드리겠습니다.

 먼저 안드로이드 SDK를 설치한 폴더에서 원하는 플랫폼 폴더를 골라 data\res\drawable로
들어갑니다. (아니면 아래에 나올 xml 내용을 복사해서 새로 만드셔도 무관합니다.)

예) C:\android-sdk-windows\platforms\android-7\data\res\drawable

drawable 폴더에는 progress_horizontal.xml 이라는 파일이 있는데 이것을 복사해서 원하는 이름으로 수정한 뒤 제작중인 프로젝트의 drawable에 넣어줍니다.

파일의 내용은 다음과 같습니다.

<?xml version="1.0" encoding="utf-8" ?>

- <!--

 Copyright (C) 2008 The Android Open Source Project

     Licensed under the Apache License, Version 2.0 (the "License");
     you may not use this file except in compliance with the License.
     You may obtain a copy of the License at

          http://www.apache.org/licenses/LICENSE-2.0

     Unless required by applicable law or agreed to in writing, software
     distributed under the License is distributed on an "AS IS" BASIS,
     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
     See the License for the specific language governing permissions and
     limitations under the License.

  -->

- <layer-list xmlns:android="http://schemas.android.com/apk/res/android">

- <item android:id="@android:id/background">

- <shape>

  <corners android:radius="5dip" />

  <gradient android:startColor="#ff9d9e9d" android:centerColor="#ff5a5d5a" android:centerY="0.75" android:endColor="#ff747674" android:angle="270" />

  </shape>

  </item>

- <item android:id="@android:id/secondaryProgress">

- <clip>

- <shape>

  <corners android:radius="5dip" />

  <gradient android:startColor="#80ffd300" android:centerColor="#80ffb600" android:centerY="0.75" android:endColor="#a0ffcb00" android:angle="270" />

  </shape>

  </clip>

  </item>

- <item android:id="@android:id/progress">

- <clip>

- <shape>

  <corners android:radius="5dip" />

  <gradient android:startColor="#ffffd300" android:centerColor="#ffffb600" android:centerY="0.75" android:endColor="#ffffcb00" android:angle="270" />

  </shape>

  </clip>

  </item>

  </layer-list>

 

위에서 보면 Background, Secondary Progress, Progress의 3가지 항목이 보입니다.

그 아래 있는 gradient가 각각에 대응하는 색상입니다. startColor, centerColor, endColor를

입맛대로 수정해 주시면 됩니다.

 

(#ffffd300 ▷▷▷  ff:알파, ff: R, d3: G, 00:B) 

 

SeekBar에 적용하는 법은 간단합니다.

 

- xml에서

android:progressDrawable = "@drawable/제작한 xml 이름"

 

- 소스코드 상에서

SeekBar seek; // 커스텀을 적용할 SeekBar

 

seek.setProgressDrawable(getResources().getDrawable(R.drawable.제작한 xml 이름));

 

위 과정을 마치면 원하는 색상의 SeekBar를 사용하실 수 있습니다.