[안드로이드] 진행률 ProgressView 쉽게 만드는 방법

이번 시간에는 라이브러리를 통해서

진행률을 쉽게 만드는 방법을

알아보겠습니다.

---

목차

1. 실행 화면

2. 라이브러리 등록

3. 메인 화면 구성 activity_main.xml

4. 메인 코드 구현 MainActivity.java

---

1. 실행 화면

2. 라이브러리 등록

build.gradle(Module:프로젝트명:app)

dependencies 괄호 안에 아래 코드를 넣어주시면 됩니다.

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

 

3. 메인 화면 구성 activity_main.xml

  - 옵션 설명 -

  progressView_animation

   - 애니메이션 설정

  progressView_autoAnimate

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

  progressView_colorBackground

   - 프로그래스 색상

  progressView_colorProgress:

   - 진행률 표시줄 색상

  progressView_labelSize

   - 라벨 텍스트 크기

  progressView_labelSpace

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

  progressView_LabelTypeface

   - 라벨 서체

  progressView_max

   - 최대 진행률 값

  progressView_min

   - 최소 진행률 값

  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"
    android:id="@+id/main_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <com.skydoves.progressview.ProgressView
        android:id="@+id/progressView1"
        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_max="100"
        app:progressView_min="0"
        app:progressView_padding="1dp"
        app:progressView_radius="10dp" />

    <com.skydoves.progressview.ProgressView
        android:id="@+id/progressView2"
        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_max="100"
        app:progressView_min="0"
        app:progressView_padding="1dp"
        app:progressView_radius="30dp" />

    <com.skydoves.progressview.ProgressView
        android:id="@+id/progressView3"
        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="30sp"
        app:progressView_labelSpace="20dp"
        app:progressView_labelTypeface="bold"
        app:progressView_max="100"
        app:progressView_min="0"
        app:progressView_padding="1dp"
        app:progressView_radius="60dp" />

    <com.skydoves.progressview.ProgressView
        android:id="@+id/progressView4"
        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_max="100"
        app:progressView_min="0"
        app:progressView_padding="1dp"
        app:progressView_radius="90dp" />

      <Button
        android:id="@+id/progress_btn"
        android:layout_marginTop="30dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="실행"/>

</LinearLayout>

 

4. 메인 코드 구현 MainActivity.java

public class MainActivity extends AppCompatActivity {

    ProgressView progressView1;
    ProgressView progressView2;
    ProgressView progressView3;
    ProgressView progressView4;

    Button progressBtn;

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

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

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

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

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

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

                //랜덤 숫자 진행율뷰에 넣어준다.
                progressView1.setProgress(r.nextInt(100) + 1);
                progressView2.setProgress(r.nextInt(100) + 1);
                progressView3.setProgress(r.nextInt(100) + 1);
                progressView4.setProgress(r.nextInt(100) + 1);
            }
        });
    }
} //MainActivity

 

관련문서

https://github.com/skydoves/ProgressView

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

 

2020.12.14 - [안드로이드] - [안드로이드]ProgressBar(상태바) 반복 AsyncTask 만들어보기

[안드로이드]ProgressBar(상태바) 반복 AsyncTask 만들어보기

2020.12.07 - [안드로이드] - [안드로이드] SeekBar 볼륨조절, 밝기조절

[안드로이드] SeekBar 볼륨조절, 밝기조절

2020.12.16 - [안드로이드] - [안드로이드]SeekBar RGB 글씨 색상조절 만들어보기

[안드로이드]SeekBar RGB 글씨 색상조절 만들어보기