안드로이드 앱 개발에서 그래비티 뷰(Gravity View)는 기기에 내장된 모션 센서를 활용해, 사용자가 스마트폰을 기울이거나 회전할 때 화면의 이미지나 콘텐츠가 함께 움직이도록 만들어 주는 기능입니다. 이를 활용하면 사용자가 마치 실물 제품을 손으로 돌려가며 살펴보듯 자연스럽게 탐색할 수 있어, 특히 상품 이미지를 보여주는 전자상거래 앱에서 큰 효과를 발휘합니다.
이 글에서는 안드로이드 스튜디오에서 그래비티 뷰를 적용하는 방법을 단계별로 자세히 살펴보겠습니다.
1단계: 새 프로젝트 생성하기
안드로이드 스튜디오에서 File → New Project 메뉴로 이동한 뒤, 프로젝트 생성에 필요한 모든 정보를 입력하여 새 프로젝트를 만듭니다.
2단계: build.gradle에 라이브러리 의존성 추가하기
앱 수준(app-level)의 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 'co.gofynd.library:gravity-view:1.0'
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'
}
핵심은 dependencies 블록의 implementation 'co.gofynd.library:gravity-view:1.0' 한 줄입니다. 이 의존성을 추가하면 그래비티 뷰 라이브러리를 프로젝트에서 바로 사용할 수 있습니다.
3단계: activity_main.xml 레이아웃 작성하기
res/layout/activity_main.xml 파일에 다음 코드를 추가합니다.
<?xml version = "1.0" encoding = "utf-8"?>
<RelativeLayout xmlns:android = "https://schemas.android.com/apk/res/android"
android:id = "@+id/activity_main"
android:layout_width = "match_parent"
android:layout_height = "wrap_content">
<HorizontalScrollView
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:scrollbars = "none">
<ImageView
android:id = "@+id/imageView"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content" />
</HorizontalScrollView>
</RelativeLayout>
위 코드는 이미지를 스크롤하기 위한 HorizontalScrollView와, 화면에 이미지를 표시하기 위한 ImageView로 구성되어 있습니다.
4단계: MainActivity.java 코드 작성하기
src/MainActivity.java 파일에 다음 코드를 추가합니다.
package com.example.andy.myapplication;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.ImageView;
import co.gofynd.gravityview.GravityView;
public class MainActivity extends AppCompatActivity {
GravityView gravityView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ImageView imageView = findViewById(R.id.imageView);
gravityView = GravityView.getInstance(this);
boolean is_supported = gravityView.deviceSupported();
if(is_supported) {
gravityView
.setImage(imageView,R.drawable.back)
.center();
}
}
@Override
protected void onResume() {
super.onResume();
gravityView.registerListener();
}
@Override
protected void onStop() {
super.onStop();
gravityView.unRegisterListener();
}
}
위 코드에서는 drawable 폴더에 있는 back이라는 이름의 이미지를 사용하므로, 미리 drawable 폴더에 스크롤해서 볼 수 있는 넓은 이미지를 추가해 두어야 합니다.
주요 로직을 간단히 정리하면 다음과 같습니다.
- GravityView.getInstance(this) : 그래비티 뷰 인스턴스를 가져옵니다.
- deviceSupported() : 현재 기기가 모션 센서를 지원하는지 확인합니다.
- setImage().center() : 대상 ImageView에 이미지를 설정하고 중앙을 기준점으로 지정합니다.
- registerListener() / unRegisterListener() : onResume()에서 센서 리스너를 등록하고, onStop()에서 해제하여 불필요한 배터리 소모를 막습니다.
앱 실행 및 결과 확인
이제 애플리케이션을 실행해 보겠습니다. 실제 안드로이드 기기가 컴퓨터에 연결되어 있다고 가정합니다. 안드로이드 스튜디오에서 프로젝트의 액티비티 파일 중 하나를 열고 툴바의 실행(Run) 
아이콘을 클릭한 뒤, 목록에서 본인의 모바일 기기를 선택하세요.
앱이 실행되면 먼저 이미지의 중앙 부분이 화면에 표시됩니다.
여기서 스마트폰을 왼쪽과 오른쪽으로 기울여 보세요. 기기의 움직임에 따라 이미지가 자연스럽게 스크롤되는 것을 확인할 수 있습니다.
