Android에서 막대 차트(Bar Chart) 그래프 구현하는 방법 – 단계별 완벽 가이드

이 튜토리얼에서는 MPAndroidChart 라이브러리를 활용하여 Android 앱에서 막대 차트(Bar 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에 저장소 추가

애플리케이션(최상위) 수준의 build.gradle 파일을 열고 JitPack 저장소를 추가해야 합니다. MPAndroidChart는 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.BarChart
      android:id = "@+id/BarChart"
      android:layout_width = "fill_parent"
      android:layout_height = "fill_parent" />
</android.support.constraint.ConstraintLayout>

위 코드에서는 막대 차트를 화면에 표시하기 위해 BarChart 뷰를 추가했습니다.

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.BarChart;
import com.github.mikephil.charting.data.BarData;
import com.github.mikephil.charting.data.BarDataSet;
import com.github.mikephil.charting.data.BarEntry;
import com.github.mikephil.charting.utils.ColorTemplate;
import java.util.ArrayList;
public class MainActivity extends AppCompatActivity {
    BarChart barChart;
    BarData barData;
    BarDataSet barDataSet;
    ArrayList barEntries;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        barChart = findViewById(R.id.BarChart);
        getEntries();
        barDataSet = new BarDataSet(barEntries, "");
        barData = new BarData(barDataSet);
        barChart.setData(barData);
        barDataSet.setColors(ColorTemplate.JOYFUL_COLORS);
        barDataSet.setValueTextColor(Color.BLACK);
        barDataSet.setValueTextSize(18f);
    }
    private void getEntries() {
        barEntries = new ArrayList<>();
        barEntries.add(new BarEntry(2f, 0));
        barEntries.add(new BarEntry(4f, 1));
        barEntries.add(new BarEntry(6f, 1));
        barEntries.add(new BarEntry(8f, 3));
        barEntries.add(new BarEntry(7f, 4));
        barEntries.add(new BarEntry(3f, 3));
    }
}

위 코드의 핵심 흐름은 다음과 같습니다.

• getEntries(): 차트에 표시할 데이터 항목(BarEntry) 목록을 생성합니다.
• BarDataSet: 데이터 항목들을 하나의 데이터 세트로 묶습니다.
• BarData: 데이터 세트를 차트에 바인딩할 수 있는 형태로 변환합니다.
• setColors(): ColorTemplate.JOYFUL_COLORS를 적용해 각 막대에 다양한 색상을 지정합니다.

앱 실행 및 결과 확인

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

위 실행 결과에서 확인할 수 있듯이, 우리가 설정한 데이터 세트 값에 따라 막대 차트가 정상적으로 출력됩니다. 이제 여러분만의 데이터를 getEntries() 메서드에 추가하거나 색상·크기 등의 스타일을 조정하여 다양한 형태의 차트를 손쉽게 만들어 볼 수 있습니다.