Glide란?
Glide는 안드로이드 앱에서 이미지를 빠르고 효율적으로 불러오기 위한 대표적인 오픈소스 이미지 로딩 라이브러리입니다. 이 예제에서는 Glide를 활용해 드로어블(Drawable) 리소스와 URL 기반 이미지 로딩, 플레이스홀더(Placeholder)와 에러(Error) 이미지 처리, 이미지 크기 조절(Resize)과 회전(Rotate) 기능까지 단계별로 구현하는 방법을 살펴봅니다.
1단계 — 새 프로젝트 생성
Android Studio를 실행한 후 File → New Project 메뉴로 이동하고, 필요한 모든 세부 정보를 입력하여 새 프로젝트를 생성합니다.
2단계 — Glide 의존성 추가
Glide를 프로젝트에서 사용하려면 앱 수준(app-level) build.gradle 파일에 아래 의존성을 먼저 추가해야 합니다.
dependencies {
implementation 'com.github.bumptech.glide:glide:4.12.0'
annotationProcessor 'com.github.bumptech.glide:compiler:4.12.0'
}
3단계 — activity_main.xml 레이아웃 작성
res/layout/activity_main.xml 파일에 아래 코드를 추가합니다. 이 레이아웃은 중앙에 ImageView 한 개와, 각 기능을 테스트할 수 있는 버튼 여섯 개로 구성됩니다.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
xmlns:tools="https://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="16dp"
tools:context=".MainActivity">
<Button
android:id="@+id/btnDrawable"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:text="Drawable" />
<ImageView
android:id="@+id/imageView"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_centerHorizontal="true"
android:src="@mipmap/ic_launcher" />
<Button
android:id="@+id/btnPlaceholder"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="@+id/btnUrl"
android:layout_alignBottom="@+id/btnUrl"
android:layout_centerHorizontal="true"
android:text="Placeholder" />
<Button
android:id="@+id/btnUrl"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="@+id/btnDrawable"
android:layout_alignBottom="@+id/btnDrawable"
android:layout_alignParentEnd="true"
android:text="URL" />
<Button
android:id="@+id/btnError"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/btnDrawable"
android:layout_alignParentStart="true"
android:layout_marginTop="12dp"
android:text="Error" />
<Button
android:id="@+id/btnRotate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="@+id/btnError"
android:layout_alignBottom="@+id/btnError"
android:layout_centerHorizontal="true"
android:text="Rotate" />
<Button
android:id="@+id/btnResize"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="@+id/btnRotate"
android:layout_alignBottom="@+id/btnRotate"
android:layout_alignParentEnd="true"
android:text="Resize" />
</RelativeLayout>
4단계 — MainActivity.java 코드 작성
src/MainActivity.java 파일에 아래 코드를 추가합니다. 버튼을 클릭할 때마다 Glide의 서로 다른 기능이 동작하도록 onClick() 메서드에서 분기 처리했습니다.
package app.com.sample;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import com.bumptech.glide.Glide;
import com.bumptech.glide.request.RequestOptions;
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
ImageView imageView;
Button btnDrawableImage, btnUrlImage, btnErrorImage, btnPlaceholderImage, btnResizeImage, btnRotateImage;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
}
private void initView() {
imageView = findViewById(R.id.imageView);
btnDrawableImage = findViewById(R.id.btnDrawable);
btnUrlImage = findViewById(R.id.btnUrl);
btnPlaceholderImage = findViewById(R.id.btnPlaceholder);
btnResizeImage = findViewById(R.id.btnResize);
btnErrorImage = findViewById(R.id.btnError);
btnRotateImage = findViewById(R.id.btnRotate);
btnDrawableImage.setOnClickListener(this);
btnPlaceholderImage.setOnClickListener(this);
btnUrlImage.setOnClickListener(this);
btnResizeImage.setOnClickListener(this);
btnErrorImage.setOnClickListener(this);
btnRotateImage.setOnClickListener(this);
}
@Override
public void onClick(View view) {
switch (view.getId()) {
case R.id.btnDrawable:
// 드로어블 리소스 로딩
Glide.with(this).load(R.drawable.image).into(imageView);
break;
case R.id.btnPlaceholder:
// 로딩 중 표시할 플레이스홀더 지정
Glide.with(this).load("www.journaldev.com").placeholder(R.drawable.placeholder).into(imageView);
break;
case R.id.btnUrl:
// URL 기반 이미지 로딩
Glide.with(this).load("https://cdn.journaldev.com/wp-content/uploads/2017/01/android-constraint-layoutsdk-tool-install.png").placeholder(R.drawable.placeholder).into(imageView);
break;
case R.id.btnError:
// 로딩 실패 시 표시할 에러 이미지 지정
Glide.with(this).load("www.journaldev.com").placeholder(R.drawable.placeholder).error(R.drawable.error).into(imageView);
break;
case R.id.btnResize:
// 이미지 크기 오버라이드 (200x200)
Glide.with(this).load(R.drawable.image).apply(new RequestOptions().override(200, 200)).into(imageView);
break;
case R.id.btnRotate:
// 이미지 회전
Glide.with(this).load(R.drawable.image).into(imageView);
imageView.setRotation(90);
break;
}
}
}
5단계 — AndroidManifest.xml 설정
androidManifest.xml 파일에 아래 코드를 추가합니다. 참고로 URL에서 이미지를 불러오려면 매니페스트에 인터넷 권한(<uses-permission android:name="android.permission.INTERNET"/>)도 반드시 함께 선언해야 합니다.
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android"
package="app.com.sample">
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity android:name=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
앱 실행 및 결과 확인
이제 애플리케이션을 실행해 보겠습니다. 실제 안드로이드 스마트폰을 컴퓨터에 연결했다고 가정합니다. Android Studio에서 프로젝트의 액티비티 파일 중 하나를 연 뒤, 상단 툴바의 
실행(Run) 아이콘을 클릭하세요. 목록에서 본인의 모바일 기기를 선택하면, 기기 화면에 아래와 같은 기본 화면이 표시됩니다.
