안드로이드 앱에서 파이 차트(원형 그래프) 구현하는 방법

안드로이드 앱을 개발하다 보면 데이터를 시각적으로 표현해야 하는 경우가 많습니다. 이번 글에서는 MPAndroidChart 라이브러리를 활용하여 안드로이드에서 파이 차트(Pie Chart)를 손쉽게 구현하는 방법을 단계별로 알아보겠습니다.

1단계: 새 프로젝트 생성

Android Studio를 실행하고 File → New Project 메뉴로 이동한 뒤, 필요한 정보를 모두 입력하여 새 프로젝트를 생성합니다.

2단계: 모듈 수준 build.gradle에 라이브러리 추가

모듈 수준의 build.gradle 파일을 열고 MPAndroidChart 라이브러리 의존성을 추가합니다.

apply plugin: 'com.android.application'
android {
    packagingOptions {
        exclude 'META-INF/proguard/androidx-annotations.pro'
    }
    packagingOptions {
        exclude 'META-INF/DEPENDENCIES'
        exclude 'META-INF/LICENSE'
        exclude 'META-INF/LICENSE.txt'
        exclude 'META-INF/license.txt'
        exclude 'META-INF/NOTICE'
        exclude 'META-INF/NOTICE.txt'
        exclude 'META-INF/notice.txt'
        exclude 'META-INF/ASL2.0'
    }
    compileSdkVersion 28
    defaultConfig {
        applicationId "com.example.andy.myapplication"
        minSdkVersion 15
        targetSdkVersion 28
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}
dependencies {
   implementation fileTree(dir: 'libs', include: ['*.jar'])
   implementation 'com.android.support:appcompat-v7:28.0.0'
   implementation 'com.android.support.constraint:constraint-layout:1.1.3'
   implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0-alpha'
   testImplementation 'junit:junit:4.12'
   androidTestImplementation 'com.android.support.test:runner:1.0.2'
   androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
}

3단계: 프로젝트 수준 build.gradle에 저장소 추가

MPAndroidChart는 JitPack 저장소를 통해 배포되므로, 프로젝트 수준의 build.gradle 파일에 JitPack 저장소를 반드시 등록해야 합니다.

// Top-level build file where you can add configuration options common to all sub-projects/modules.
buildscript {
    repositories {
        google()
        jcenter()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:3.2.1'
        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}
allprojects {
    repositories {
        google()
        jcenter()
        maven { url 'https://jitpack.io' }
    }
}
task clean(type: Delete) {
   delete rootProject.buildDir
}

4단계: 레이아웃 파일(activity_main.xml) 작성

res/layout/activity_main.xml 파일에 아래와 같이 파이 차트 뷰를 추가합니다.

<?xml version = "1.0" encoding = "utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android = "https://schemas.android.com/apk/res/android"
   xmlns:app = "https://schemas.android.com/apk/res-auto"
   xmlns:tools = "https://schemas.android.com/tools"
   android:layout_width = "match_parent"
   android:layout_height = "match_parent"
   tools:context = ".MainActivity">
   <com.github.mikephil.charting.charts.PieChart
      android:id = "@+id/pieChart"
      android:layout_width = "fill_parent"
      android:layout_height = "fill_parent" />
</android.support.constraint.ConstraintLayout>

위 코드에서는 화면 전체를 채우는 PieChart 뷰를 선언하여 파이 차트를 표시할 영역을 준비했습니다.

5단계: MainActivity.java 코드 작성

src/MainActivity.java 파일에 다음 코드를 추가합니다. 데이터 항목을 생성하고, 색상과 값 표시 스타일을 지정한 후 차트에 적용하는 과정이 포함되어 있습니다.

package com.example.andy.myapplication;
import android.graphics.Color;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import com.github.mikephil.charting.charts.PieChart;
import com.github.mikephil.charting.data.PieData;
import com.github.mikephil.charting.data.PieDataSet;
import com.github.mikephil.charting.data.PieEntry;
import com.github.mikephil.charting.utils.ColorTemplate;
import java.util.ArrayList;
public class MainActivity extends AppCompatActivity {
    PieChart pieChart;
    PieData pieData;
    PieDataSet pieDataSet;
    ArrayList pieEntries;
    ArrayList PieEntryLabels;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        pieChart = findViewById(R.id.pieChart);
        getEntries();
        pieDataSet = new PieDataSet(pieEntries, "");
        pieData = new PieData(pieDataSet);
        pieChart.setData(pieData);
        pieDataSet.setColors(ColorTemplate.JOYFUL_COLORS);
        pieDataSet.setSliceSpace(2f);
        pieDataSet.setValueTextColor(Color.WHITE);
        pieDataSet.setValueTextSize(10f);
        pieDataSet.setSliceSpace(5f);
    }
   private void getEntries() {
      pieEntries = new ArrayList<>();
      pieEntries.add(new PieEntry(2f, 0));
      pieEntries.add(new PieEntry(4f, 1));
      pieEntries.add(new PieEntry(6f, 2));
      pieEntries.add(new PieEntry(8f, 3));
      pieEntries.add(new PieEntry(7f, 4));
      pieEntries.add(new PieEntry(3f, 5));
   }
}

주요 코드 설명

PieEntry: 각 조각의 값과 인덱스를 담는 데이터 항목입니다.
PieDataSet: 여러 개의 PieEntry를 하나의 데이터 세트로 묶습니다.
setColors(): ColorTemplate.JOYFUL_COLORS를 사용해 각 조각에 다채로운 색상을 적용합니다.
setSliceSpace(): 조각 사이의 간격을 지정합니다.
setValueTextColor() / setValueTextSize(): 값 텍스트의 색상과 크기를 설정합니다.

앱 실행 및 결과 확인

이제 애플리케이션을 실행해 보겠습니다. 실제 안드로이드 기기가 컴퓨터에 연결되어 있다고 가정합니다. Android Studio에서 프로젝트의 액티비티 파일 중 하나를 연 뒤, 툴바의 Run 아이콘을 클릭하세요. 목록에서 본인의 모바일 기기를 선택하면 기기 화면에 아래와 같은 결과가 표시됩니다.

안드로이드 앱에서 파이 차트(원형 그래프) 구현하는 방법 – MPAndroidChart 활용 가이드

위 실행 결과에서 볼 수 있듯이, 입력한 데이터 세트 값에 따라 파이 차트가 정상적으로 렌더링됩니다. 이처럼 MPAndroidChart 라이브러리를 사용하면 몇 줄의 코드만으로도 전문적인 원형 그래프를 안드로이드 앱에 손쉽게 추가할 수 있습니다.