안드로이드에서 레이더 차트(Radar Chart) 구현하기
이 튜토리얼에서는 안드로이드 애플리케이션에서 레이더 차트(방사형 차트)를 사용하는 방법을 단계별로 알아봅니다. 레이더 차트는 여러 항목의 값을 한눈에 비교할 수 있어 게임 스탯, 설문 결과 분석, 성능 지표 시각화 등에 유용하게 활용됩니다.
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 저장소를 추가합니다. MPAndroidChart 라이브러리를 정상적으로 가져오려면 jitpack.io 저장소 등록이 반드시 필요합니다.
// 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단계: 레이아웃 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.RadarChart
android:id = "@+id/RadarChart"
android:layout_width = "fill_parent"
android:layout_height = "fill_parent" />
</android.support.constraint.ConstraintLayout>
위 코드에서는 레이더 차트를 화면에 표시하기 위해 RadarChart 뷰를 배치했습니다.
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.RadarChart;
import com.github.mikephil.charting.data.RadarData;
import com.github.mikephil.charting.data.RadarDataSet;
import com.github.mikephil.charting.data.RadarEntry;
import com.github.mikephil.charting.utils.ColorTemplate;
import java.util.ArrayList;
public class MainActivity extends AppCompatActivity {
RadarChart RadarChart;
RadarData radarData;
RadarDataSet radarDataSet;
ArrayList radarEntries;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
RadarChart = findViewById(R.id.RadarChart);
getEntries();
radarDataSet = new RadarDataSet(radarEntries, "");
radarData = new RadarData(radarDataSet);
RadarChart.setData(radarData);
radarDataSet.setColors(ColorTemplate.JOYFUL_COLORS);
radarDataSet.setValueTextColor(Color.BLACK);
radarDataSet.setValueTextSize(18f);
}
private void getEntries() {
radarEntries = new ArrayList<>();
radarEntries.add(new RadarEntry(0, 0.21f));
radarEntries.add(new RadarEntry(1, 0.12f));
radarEntries.add(new RadarEntry(2, 0.20f));
radarEntries.add(new RadarEntry(2, 0.52f));
radarEntries.add(new RadarEntry(3, 0.29f));
radarEntries.add(new RadarEntry(4, 0.62f));
}
}
위 코드의 동작 방식을 살펴보면, getEntries() 메서드에서 레이더 차트에 표시할 데이터 항목(RadarEntry)들을 생성합니다. 이후 RadarDataSet과 RadarData 객체를 만들어 차트에 설정하고, ColorTemplate.JOYFUL_COLORS로 차트 색상을 지정한 뒤 값 텍스트의 색상과 크기도 함께 설정했습니다.
앱 실행 및 결과 확인
이제 애플리케이션을 실행해 보겠습니다. 실제 안드로이드 기기가 컴퓨터에 연결되어 있다고 가정합니다. Android Studio에서 프로젝트의 액티비티 파일 중 하나를 연 후 툴바의 Run 아이콘을 클릭합니다. 모바일 기기를 선택하면 기기 화면에 아래와 같은 결과가 표시됩니다.
위 결과에서 확인할 수 있듯이, 설정한 데이터셋 값에 따라 레이더 차트가 정상적으로 렌더링됩니다. 이 방식을 응용하면 데이터 항목을 동적으로 변경하거나 여러 데이터셋을 비교하는 레이더 차트도 손쉽게 구현할 수 있습니다.