371. (android/xml) [레이아웃] SeekBar 시크 바 커스텀 생성

---

[개발 환경 설정]

​

개발 툴 : AndroidStudio

​

 

---

[속성 설명]

​

1. android:id : 자바 코드에 매핑을 하기위한 컴포넌트 id 를 지정

2. android:layout_width : 가로 크기

3. android:layout_height : 세로 크기

4. android:layout_weight : 반응형 크기 비율

5. android:text : 텍스트 타이틀 명칭

6. android:textStyle : 텍스트 표시 스타일

7. android:textSize : 텍스트 사이즈

8. android:gravity : 컴포넌트 정렬 기준

9. android:textColor : 텍스트 색상

10. android:background : 컴포넌트 배경 지정 (색상 및 drawable 이미지 지정)

11. android:layout_marginTop : top 마진

12. android:layout_marginLeft : left 마진

13. android:layout_marginRight : right 마진

14. android:layout_marginBottom : bottom 마진

15. android:hint : EditText 값이 null 일 경우 표시되는 힌트 메시지

16. android:src : ImageView 에 표시될 사진을 지정

17. android:scaleType : ImageView 에 표시된 사진 확대 및 축소 여부, 맞춤 설정

18. android:focusable : 부모 레이아웃에 EditText 포함 시 자동 포커스 비활성

19. android:focusableInTouchMode : 부모 레이아웃에 EditText 포함 시 자동 포커스 비활성

20. android:orientation : LinearLayout 에 포함된 하위 컴포넌트 (ex : 버튼 , 텍스트 뷰 등) 정렬 기준

  - vertical : 세로 정렬

  - horizontal : 가로 정렬

21. android:visibility : 컴포넌트 표시 여부를 설정

  - invisible : 영역은 차지 > 표시 안함

  - visible : 영역은 차지 > 표시

  - gone : 영역 없음 > 표시 안함

22. android:spinnerMode : 스피너 메뉴 목록이 표시되는 방향을 설정

23. android:singleLine : 단일 한줄 텍스트 표시 여부 설정

24. android:nextFocusDown="@+id/num_textview2" : EditText 포커스 다음 이동 컴포넌트 지정

25. android:smoothScrollbar="true" : 리스트 뷰 스크롤 부드럽게 설정

26. android:thumb : 시크바 이동 아이콘 thumb 설정

27. android:progressDrawable : 시크바 프로그레스 진행 상황 배경 설정

28. android:splitTrack="false" : 시크바 thumb 아이콘 여백 없애기

 

---

[소스 코드]

​

[xml 소스 코드]

            <SeekBar
                android:id="@+id/seekBar"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="0.7"
                android:layout_marginTop="10dp"
                android:layout_marginLeft="20dp"
                android:layout_marginRight="20dp"
                android:layout_marginBottom="20dp"

                android:thumb="@drawable/custom_seekbar_thumb"
                android:progressDrawable="@drawable/custom_seekbar_progress"
                android:splitTrack="false"/>
                <!-- thumb : 시크바 진행 아이콘 -->
                <!-- progressDrawable : 시크바 진행 배경 색상 -->
                <!-- splitTrack : 시크바 thumb 아이콘 여백 없애기 -->










[custom_seekbar_thumb.xml 소스 코드]

<?xml version="1.0" encoding="utf-8"?>
<!-- 원형 시크바 컨트롤러 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"
    android:useLevel="false">
    <!-- 배경 -->
    <solid
        android:color="#D9E5FF"/>
    <!-- 테두리 -->
    <stroke
        android:width="2dp"
        android:color="#0054FF" />
    <!-- 크기 -->
    <size
        android:width="28dp"
        android:height="28dp"/>
</shape>










[custom_seekbar_progress.xml 소스 코드]

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!--시크바 배경-->
    <item android:id="@android:id/background">
        <shape android:shape="rectangle">
            <!-- 시크바 선 굵기 : 길이 10dp -->
            <stroke android:width="6dp" android:color="#B2CCFF" />
            <!-- 시크바 내용 색상 -->
            <solid android:color="#B2CCFF"/>
            <!-- 테두리 둥글게 설정 -->
            <corners android:radius="10dp"/>
        </shape>
    </item>

    <!-- 시크바 진행 프로그레스 -->
    <item android:id="@android:id/progress" >
        <clip>
            <shape android:shape="rectangle">
                <!-- 시크바 선 굵기 : 길이 10dp -->
                <stroke android:width="10dp" android:color="#6799FF" />
                <!-- 시크바 내용 색상 -->
                <solid android:color="#6799FF"/>
                <!-- 테두리 둥글게 설정 -->
                <corners android:radius="10dp"/>
            </shape>
        </clip>
    </item>

</layer-list>

 

---

[결과 출력]

---