[Android][Java] ProgressView 라이브러리로 진행율 표시하기

Progressview 라이브러리를 통해 진행률을 표시하는 방법에 대해 알아보겠습니다. 

 

1. 라이브러리 등록

implementation "com.github.skydoves:progressview:1.1.3"

2. 메인 화면 레이아웃 구성

progressView_animation : 애니메이션 설정

progressView_autoAnimate : 팽창이 끝나면 자동으로 애니메이션 실행

progressView_colorBackground : 진행률 색상

progressView_colorProgress : 진행률 표시줄 색상

progressView_labelSize : 라벨 텍스트 크기

progressView_labelSpace : 라벨과 진행률 표시줄 사이 공간 크기

progressView_LabelTypeface : 라벨 서체

progressView_min : 최소 진행률 값

progressView_max : 최대 진행률 값

progressView_padding : 진행률 표시줄 간격

progressView_radius : 진행률 표시줄 모서리 각도

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity3">

    <com.skydoves.progressview.ProgressView
        android:id="@+id/pv_1"
        android:layout_width="300dp"
        android:layout_height="50dp"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="20dp"
        app:progressView_animation="normal"
        app:progressView_autoAnimate="true"
        app:progressView_colorBackground="@color/white"
        app:progressView_colorProgress="#C8E6C9"
        app:progressView_labelSize="10sp"
        app:progressView_labelSpace="10dp"
        app:progressView_labelTypeface="bold"
        app:progressView_min="0"
        app:progressView_max="100"
        android:padding="1dp"
        app:progressView_radius="30dp"
        />

    <com.skydoves.progressview.ProgressView
        android:id="@+id/pv_2"
        android:layout_width="300dp"
        android:layout_height="50dp"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="20dp"
        app:progressView_animation="bounce"
        app:progressView_autoAnimate="true"
        app:progressView_colorBackground="@color/white"
        app:progressView_colorProgress="#DCEDC8"
        app:progressView_labelSize="20sp"
        app:progressView_labelSpace="15dp"
        app:progressView_labelTypeface="bold"
        app:progressView_min="0"
        app:progressView_max="100"
        android:padding="1dp"
        app:progressView_radius="30dp"
        />

    <com.skydoves.progressview.ProgressView
        android:id="@+id/pv_3"
        android:layout_width="300dp"
        android:layout_height="50dp"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="20dp"
        app:progressView_animation="accelerateDecelerate"
        app:progressView_autoAnimate="true"
        app:progressView_colorBackground="@color/white"
        app:progressView_colorProgress="#F0F4C3"
        app:progressView_labelSize="20sp"
        app:progressView_labelSpace="15dp"
        app:progressView_labelTypeface="bold"
        app:progressView_min="0"
        app:progressView_max="100"
        android:padding="1dp"
        app:progressView_radius="30dp"
        />

    <com.skydoves.progressview.ProgressView
        android:id="@+id/pv_4"
        android:layout_width="300dp"
        android:layout_height="50dp"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="20dp"
        app:progressView_animation="bounce"
        app:progressView_autoAnimate="true"
        app:progressView_colorBackground="@color/white"
        app:progressView_colorProgress="#FFF176"
        app:progressView_labelSize="40sp"
        app:progressView_labelSpace="25dp"
        app:progressView_labelTypeface="bold"
        app:progressView_min="0"
        app:progressView_max="100"
        android:padding="1dp"
        app:progressView_radius="90dp"
        />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/btn_on"
        android:layout_gravity="center"
        android:text="실행"
        />



</LinearLayout>

3. 액티비티 코드 작성

package com.example.example;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;

import com.skydoves.progressview.OnProgressChangeListener;
import com.skydoves.progressview.ProgressView;

import java.util.Random;

public class MainActivity3 extends AppCompatActivity {

    ProgressView pv_1;
    ProgressView pv_2;
    ProgressView pv_3;
    ProgressView pv_4;

    Button btn_on;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main3);

        pv_1 = findViewById(R.id.pv_1);
        pv_1.setOnProgressChangeListener(new OnProgressChangeListener() {
            @Override
            public void onChange(float v) {
                // 상태값이 변하면 라벨에 현재 값을 넣어줌.
                pv_1.setLabelText("진행률 :"+v+"%");
            }
        });

        pv_2 = findViewById(R.id.pv_2);
        pv_2.setOnProgressChangeListener(new OnProgressChangeListener() {
            @Override
            public void onChange(float v) {
                // 상태값이 변하면 라벨에 현재 값을 넣어줌.
                pv_2.setLabelText("진행률 :"+v+"%");
            }
        });

        pv_3 = findViewById(R.id.pv_3);
        pv_3.setOnProgressChangeListener(new OnProgressChangeListener() {
            @Override
            public void onChange(float v) {
                // 상태값이 변하면 라벨에 현재 값을 넣어줌.
                pv_3.setLabelText("진행률 :"+v+"%");
            }
        });

        pv_4 = findViewById(R.id.pv_4);
        pv_4.setOnProgressChangeListener(new OnProgressChangeListener() {
            @Override
            public void onChange(float v) {
                // 상태값이 변하면 라벨에 현재 값을 넣어줌.
                pv_4.setLabelText("진행률 :"+v+"%");
            }
        });

        btn_on = findViewById(R.id.btn_on);
        btn_on.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                //랜덤 숫자 생성
                Random r = new Random();

                // 랜덤 숫자를 progress view에 넣어준다.
                pv_1.setProgress(r.nextInt(100)+1);
                pv_2.setProgress(r.nextInt(100)+1);
                pv_3.setProgress(r.nextInt(100)+1);
                pv_4.setProgress(r.nextInt(100)+1);
            }
        });
    }
}

라이브러리 출처

https://github.com/skydoves/ProgressView

GitHub - skydoves/ProgressView: 🌊 A polished and flexible ProgressView, fully customizable with animations.