[Android] Custom Progress bar 사용하기 + 개발일지

 

[개발 일지]

 

<kotlin으로 개발하는 한 달 주기 일정 관리 앱 개발>

 

필요 기능!

 

1. 메인 화면에서 Custom Progress bar 제작해서 달성률 그리기

2. 일정을 관리할 메인 화면 그리기 

 

우선 하단의 이미지와 같은 원형 progress bar가 필요했다.

 

 

 

 

 

외부 라이브러리 중에 CircleProgressBar라는 편리한 프로그래스 바가 있어서 사용하려고 했다.

 

dinuscxj/CircleProgressBar: A circular android ProgressBar library which extends View, and the usage same as ProgressBar, It has solid, line and solid_line three styles. Besides, progress value can be freely customized. (github.com)

GitHub - dinuscxj/CircleProgressBar: A circular android ProgressBar library which extends View, and the usage same as ProgressB

 

하지만 departed 되었는지 xml에서 적용이 되지 않았다.

가끔 외부 라이브러리를 제대로 불러오지 못하는 오류인 줄 알고 

프로젝트 폴더의. idea - libraries를 삭제하고 재설치해봤으나 사용할 수 없었다.

 

커스텀 progress bar가 필요해졌다.

 

<custom progress bar 구현>

원형에 내부에 퍼센트를 나타내는 텍스트가 있는 progress bar 가 필요했다.

방법은 xml로 bar의 디자인을 그려주고, ConstraintLayout에서 텍스트와 progress bar를 겹쳐주는 것이다.

bar의 drawable을 담당할 circle_progressbar.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:innerRadiusRatio="2.71"
            android:thicknessRatio="7.6"
            android:shape="ring"
            android:useLevel="false"
            android:type="sweep">
            <solid android:color="@color/color_type2" />
        </shape>
    </item>

    <item android:id="@android:id/progress">
        <rotate
            android:fromDegrees="270"
            android:toDegrees="270">
            <shape
                android:innerRadiusRatio="2.71"
                android:thicknessRatio="7.6"
                android:shape="ring"
                android:angle="0"
                android:type="sweep">
            </shape>
        </rotate>
    </item>

</layer-list>

 

xml로 아래의 이미지를 그려주었다. 

세부적인 사항 (퍼센트가 채워질 때의 색, max, 크기 등)은 layout에서 처리한다.

 

 

layout에 ProgressBar를 만들었다.

android:progressDrawble 옵션으로 아까 만들어 둔 circle_progressbar로 설정한다.

이후에 최댓값과 progressTint를 설정한다.

progressTint는 bar가 채워지면서 그려질 색상이다.

 

<ProgressBar
    android:id="@+id/task_list_per_image"
    style="@style/Widget.AppCompat.ProgressBar.Horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:indeterminate="false"
    android:max="100"
    android:progressDrawable="@drawable/circle_progressbar"
    android:progressTint="@color/color_type1" />

 

이제 TextView를 넣어줘야 하므로 ConstraintLayout으로 progress bar를 감싸준다.

이후에 텍스트 뷰를 선언하고 위치를 조정하면 원하는 custom progress bar를 얻을 수 있다.

 

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="@dimen/item_height_big_80"
    android:layout_height="@dimen/item_height_big_80">
    <ProgressBar
        android:id="@+id/task_list_per_image"
        style="@style/Widget.AppCompat.ProgressBar.Horizontal"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:indeterminate="false"
        android:max="100"
        android:progressDrawable="@drawable/circle_progressbar"
        android:progressTint="@color/color_type1" />
    <TextView
        android:id="@+id/task_list_per_text"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textColor="@color/strong_color"
        android:textSize="@dimen/item_height_mid_text_size"
        android:textStyle="bold"
        tools:text="100%" />

 

이제 나머지 뷰들을 그려준다.

 

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context=".MainFragment.FragmentTaskList">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="@dimen/item_height_big_150">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_margin="@dimen/fab_margin"
                android:background="@drawable/round_border"
                android:backgroundTint="@color/color_type3"
                android:gravity="center"
                android:orientation="horizontal"
                android:padding="@dimen/fab_margin">

                <androidx.constraintlayout.widget.ConstraintLayout
                    android:layout_width="@dimen/item_height_big_80"
                    android:layout_height="@dimen/item_height_big_80">
                    <ProgressBar
                        android:id="@+id/task_list_per_image"
                        style="@style/Widget.AppCompat.ProgressBar.Horizontal"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:indeterminate="false"
                        android:max="100"
                        android:progressDrawable="@drawable/circle_progressbar"
                        android:progressTint="@color/color_type1" />
                    <TextView
                        android:id="@+id/task_list_per_text"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:gravity="center"
                        android:textColor="@color/strong_color"
                        android:textSize="@dimen/item_height_mid_text_size"
                        android:textStyle="bold"
                        tools:text="100%" />
                </androidx.constraintlayout.widget.ConstraintLayout>

                <LinearLayout
                    android:layout_width="@dimen/item_height_big"
                    android:layout_height="@dimen/item_height"
                    android:layout_marginStart="@dimen/fab_margin"
                    android:gravity="center"
                    android:orientation="vertical">

                    <TextView
                        style="@style/TextView1"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="@dimen/main_margin"
                        android:text="Month"
                        android:textSize="@dimen/item_height_mid_text_size"
                        android:textStyle="bold" />

                    <TextView
                        style="@style/TextView1"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="Completed"
                        android:textSize="@dimen/item_height_mid_text_size"
                        android:textStyle="bold" />
                </LinearLayout>

                <Button
                    android:id="@+id/task_list_calendar"
                    style="@style/TextView1"
                    android:layout_width="wrap_content"
                    android:layout_height="@dimen/item_mid_2_height"
                    android:layout_margin="@dimen/fab_margin"
                    android:backgroundTint="@color/color_type3"
                    android:drawableLeft="@drawable/ic_iconmonstr_calendar_6"
                    android:padding="@dimen/main_margin"
                    android:src="@drawable/round_border"
                    tools:text="22.11" />
            </LinearLayout>
        </FrameLayout>

        <androidx.recyclerview.widget.RecyclerView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
            tools:listitem="@layout/item_calendar_horizontal" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginTop="@dimen/fab_margin"
            android:background="@drawable/round_border_two"
            android:backgroundTint="@color/color_type3">

            <LinearLayout
                android:gravity="center"
                android:orientation="horizontal"
                android:layout_width="match_parent"
                android:layout_height="@dimen/item_height_big_80"
                android:layout_margin="@dimen/fab_margin">

            </LinearLayout>
        </LinearLayout>
    </LinearLayout>
</FrameLayout>

 

아래와 같은 레이아웃을 얻을 수 있다.

 

다음에는 하단에 선택한 날짜의 todo/isDone 리스트를 볼 수 있는 tabLayout을 제작해야겠다.