이 튜토리얼에서는 안드로이드 애플리케이션에서 버블 차트(Bubble Chart) 그래프를 구현하는 방법을 단계별로 알아봅니다. 버블 차트는 데이터를 원(버블)의 크기와 위치로 표현하는 시각화 도구로, X값·Y값·크기라는 세 가지 변수를 한눈에 비교할 때 특히 유용합니다.
1단계: 새 프로젝트 생성
Android Studio에서 File ⇒ New Project를 선택한 후, 필요한 정보를 모두 입력하여 새 프로젝트를 생성합니다.
2단계: 모듈 수준 build.gradle에 라이브러리 의존성 추가
모듈 수준의 build.gradle 파일을 열고 아래와 같이 차트 라이브러리 의존성을 추가합니다.
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'
}여기서 핵심은 com.github.PhilJay:MPAndroidChart 라이브러리입니다. 이 라이브러리가 버블 차트를 포함한 다양한 차트 기능을 제공합니다.
3단계: 애플리케이션 수준 build.gradle 설정
애플리케이션 수준의 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
}JitPack 저장소(maven { url 'https://jitpack.io' })를 반드시 추가해야 GitHub에서 호스팅되는 MPAndroidChart 라이브러리를 정상적으로 가져올 수 있습니다.
4단계: 레이아웃 파일 작성
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.BubbleChart
android:id = "@+id/BubbleChart"
android:layout_width = "fill_parent"
android:layout_height = "fill_parent" />
</android.support.constraint.ConstraintLayout>위 코드에서는 버블 차트를 화면에 표시하기 위해 BubbleChart 뷰를 배치했습니다.
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.BubbleChart;
import com.github.mikephil.charting.charts.CandleStickChart;
import com.github.mikephil.charting.charts.ScatterChart;
import com.github.mikephil.charting.data.BarEntry;
import com.github.mikephil.charting.data.BubbleData;
import com.github.mikephil.charting.data.BubbleDataSet;
import com.github.mikephil.charting.data.BubbleEntry;
import com.github.mikephil.charting.data.CandleData;
import com.github.mikephil.charting.data.CandleDataSet;
import com.github.mikephil.charting.data.CandleEntry;
import com.github.mikephil.charting.data.ScatterData;
import com.github.mikephil.charting.data.ScatterDataSet;
import com.github.mikephil.charting.utils.ColorTemplate;
import java.util.ArrayList;
public class MainActivity extends AppCompatActivity {
BubbleChart bubbleChart;
BubbleData bubbleData;
BubbleDataSet bubbleDataSet;
ArrayList bubbleEntries;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
bubbleChart = findViewById(R.id.BubbleChart);
getEntries();
bubbleDataSet = new BubbleDataSet(bubbleEntries, "");
bubbleData = new BubbleData(bubbleDataSet);
bubbleChart.setData(bubbleData);
bubbleDataSet.setColors(ColorTemplate.JOYFUL_COLORS);
bubbleDataSet.setValueTextColor(Color.BLACK);
bubbleDataSet.setValueTextSize(18f);
}
private void getEntries() {
bubbleEntries = new ArrayList<>();
bubbleEntries.add(new BubbleEntry(0, 1,0.21f));
bubbleEntries.add(new BubbleEntry(1, 2,0.12f));
bubbleEntries.add(new BubbleEntry(2, 3,0.20f));
bubbleEntries.add(new BubbleEntry(2,4, 0.52f));
bubbleEntries.add(new BubbleEntry(3, 5,0.29f));
bubbleEntries.add(new BubbleEntry(4, 6,0.62f));
}
}핵심 로직은 getEntries() 메서드입니다. 각 BubbleEntry는 X축 좌표, Y축 좌표, 버블의 크기 값을 순서대로 받습니다. 이후 BubbleDataSet으로 데이터를 묶고, JOYFUL_COLORS 색상 팔레트를 적용해 다채로운 버블을 표현합니다.
앱 실행 및 결과 확인
이제 애플리케이션을 실행해 보겠습니다. 실제 안드로이드 모바일 기기가 컴퓨터에 연결되어 있다고 가정합니다. Android Studio에서 프로젝트의 액티비티 파일 중 하나를 열고 툴바의 Run 아이콘을 클릭한 뒤, 대상 기기 목록에서 본인의 모바일 기기를 선택하면 기기 화면에 다음과 같은 결과가 표시됩니다.
위 결과에서 확인할 수 있듯이, 데이터 셋에 입력한 값에 따라 버블 차트가 정상적으로 그려집니다. 각 버블의 위치와 크기가 getEntries() 메서드에서 정의한 BubbleEntry 값들을 그대로 반영하며, 이 방식을 응용하면 실시간 센서 데이터나 통계 데이터도 손쉽게 시각화할 수 있습니다.