Glide 로 background image 설정하기

이전 포스팅에서 알아봤던 Glide 는 ImageView 에 이미지를 로딩하기 참 쉽고, 예제도 많이 있다.

하지만 의외로 Glide 를 이용해 layout (RelativeLayout, LinearLayout ......) 에 background image 를 어떻게 설정하는지 질문을 많이 한다.

 

이번 포스팅에서는 Glide 를 이용하여 background image 를 설정하는 방법에 대해 알아보자.

[Android] - 유용한 이미지 라이브러리 - Glide (1)

[Android] - 유용한 이미지 라이브러리 - Glide (2)

Precondition

하단은 이번 포스팅에서 사용할 background image layout 과 image file 이다.

 

◼ Image

 

◼ Layout

	<androidx.constraintlayout.widget.ConstraintLayout
	xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:app="http://schemas.android.com/apk/res-auto"
	xmlns:tools="http://schemas.android.com/tools"
	android:id="@+id/root"
	android:layout_width="250.00dp"
	android:layout_height="250.00dp"
	android:layout_gravity="center"
	android:background="#00FF00"
	tools:context=".PhMainActivity">
	<ImageView
	android:id="@+id/background"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	app:layout_constraintStart_toStartOf="parent"
	app:layout_constraintTop_toTopOf="parent" />
	</androidx.constraintlayout.widget.ConstraintLayout>

view raw layout.xml hosted with ❤ by GitHub

CustomTarget 을 이용한 background image 설정

가장 간단한 방법으로 Glide 에서 제공하는 target 을 이용하는 방법이다.

Glide 에서 target 을 이용하면 bitmap, drawable, placeholder 를 받아 처리할 수 있다.

 

◼ Custom taget 을 이용한 drawable 을 받아서 처리하기

[Java]

	Glide
	.with(this)
	.load(R.drawable.sample)
	.into(new CustomTarget<Drawable>() {
	@Override
	public void onResourceReady(Drawable a_resource, Transition<? super Drawable> a_transition) {
	final ConstraintLayout layout = findViewById(R.id.root);
	layout.setBackground(a_resource);
	}
	@Override
	public void onLoadCleared(@Nullable Drawable placeholder) {
	}
	});

view raw sample.java hosted with ❤ by GitHub

 

[Kotlin]

	Glide
	.with(this)
	.load(R.drawable.sample)
	.into(object : CustomTarget<Drawable>() {
	override fun onResourceReady(a_resource: Drawable, a_transition: Transition<in Drawable>?) {
	val layout = findViewById<ConstraintLayout>(R.id.root)
	layout.background = a_resource
	}
	override fun onLoadCleared(placeholder: Drawable?) {}
	})

view raw sample.kt hosted with ❤ by GitHub

 

◼ Custom taget 을 이용한 bitmap 을 받아서 처리하기

[Java]

	Glide
	.with(this)
	.asBitmap() // Bitmap 으로 변환
	.load(R.drawable.sample)
	.into(new CustomTarget<Bitmap>() {
	@Override
	public void onResourceReady(@NonNull Bitmap resource, @Nullable Transition<? super Bitmap> transition) {
	final ConstraintLayout layout = findViewById(R.id.root);
	layout.setBackground(new BitmapDrawable(getResources(), resource));
	}
	@Override
	public void onLoadCleared(@Nullable Drawable placeholder) {
	}
	});

view raw sample.java hosted with ❤ by GitHub

 

[Kotlin]

	Glide
	.with(this)
	.asBitmap() // Bitmap 으로 변환
	.load(R.drawable.sample)
	.into(object : CustomTarget<Bitmap>() {
	override fun onResourceReady(a_resource: Bitmap, transition: Transition<in Bitmap>?) {
	val layout = findViewById<ConstraintLayout>(R.id.root)
	layout.background = BitmapDrawable(resources, a_resource)
	}
	override fun onLoadCleared(placeholder: Drawable?) {}
	})

view raw sample.kt hosted with ❤ by GitHub

 

하지만 target 을 이용한 경우 하단과 같이 그림이 훼손될 가능성이 크다.

즉, background image 가 정해져 있고 layout 크기와 일치 할 경우만 쓸 수 있다.

(하단의 그림을 보고 이미지 훼손을 못 느낀다면 당신은 개발자가 천직이다!!)

 

Layout 크기의 ImageView 로 background image 설정하기

위에서 설명한 것 처럼 Glide 에서 제공하는 target 을 이용하면 간단히 처리할 수 있지만, image 의 scale 을 조절 할 수 없는 단점이 있다.

이런 경우 ImageView 를 layout 크기로 설정하여 background image 로 쓸 수 있다.

 

◼ ImageView 에 background image 설정하기

[Java]

	final ImageView ivImage = findViewById(R.id.background);
	Glide
	.with(this)
	.load(R.drawable.sample)
	.into(ivImage);

view raw sample.java hosted with ❤ by GitHub

 

[Kotlin]

	val ivImage = findViewById<ImageView>(R.id.background)
	Glide
	.with(this)
	.load(R.drawable.sample)
	.into(ivImage)

view raw sample.kt hosted with ❤ by GitHub

 

 

◼ ImageView 에 center crop 을 적용하여 background image 설정하기

[Java]

	final ImageView ivImage = findViewById(R.id.background);
	Glide
	.with(this)
	.load(R.drawable.sample)
	.centerCrop()
	.into(ivImage);

view raw sample.java hosted with ❤ by GitHub

 

[Kotlin]

	val ivImage = findViewById<ImageView>(R.id.background)
	Glide
	.with(this)
	.load(R.drawable.sample)
	.centerCrop()
	.into(ivImage)

view raw sample.kt hosted with ❤ by GitHub