본문 바로가기

안드로이드/라이브러리 써보기

[안드로이드] Glide 사용하기 (Java)

Glide Example

1. dependencies 추가하기 (앱 수준)


* implementation 'com.github.bumptech.glide:glide:4.9.0'
* annotationProcessor 'com.github.bumptech.glide:compiler:4.9.0'
 두 문장을 build.gradle (Module:app)의 dependencies에 추가한다!

2. AndroidManifest.xml에 INTERNET 사용권한 추가하기


Glide를 사용할 때 기기 내부의 리소스를 불러오는 경우도 있지만
이미지 URL을 로드해서 보여주고자 하는 경우도 있다. 
URL 로드해서 이미지를 보여주는 경우를 위해 앱에 인터넷 사용 권한을 추가해준다.
아래 문장을 manifests->AndroidManifest.xml에 <application>태그 밖에 작성해준다.
1
<uses-permission android:name="android.permission.INTERNET"/>
cs

3. 이미지를 담을 ImageView Layout에 추가해주기


원하는 Layout에 ImageView를 추가해준다.
저는 간단하게 테스트용 이니까 activity_main.xml에 아래와 같이 넣어주었다.
1
2
3
4
5
    <ImageView
        android:id="@+id/main_img"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:srcCompat="@drawable/image_temp"/>
cs

4. .java 파일에서 Glide로 Image 불러와주기


원하는 Layout의 java파일로 가서 Glide를 통해 이미지를 불러와준다.
1
2
3
4
ImageView iv_glide = findViewById(R.id.main_img);
Glide.with(this).load("원하는 이미지의 URL")
                .placeholder(getDrawable(R.drawable.logo))
                .into(iv_glide);
cs
|1| .with -> 어떤 View에 넣을 지 정해주는 것이다.
|2| .load -> 원하는 이미지의 URL을 넣어주면 됩니다. 만약 내부 리소스를 사용한다면
             R.drawable.//이미지파일 이름 <- 이런식으로 넣어주면 된다.
|3| .placeholder -> 이미지를 로딩하는동안 처음에 보여줄 placeholder 이미지를 보여준다.
|4| .into -> 어떤 ImageView에 넣어줄지 정하는 거다.
|5| .error -> 이미지 불러오기를 실패할 경우 나타낼 이미지를 표시해준다.
|6| .thumbnail -> 지정한 %비율만큼 미리 이미지를 가져와서 보여준다.
                  0.1f로 지정했다면 실제 이미지의 크기 중 10%만 먼저 가져와서 흐릿하게 보여준다.
|7| .asGif -> GIF를 로딩해준다.

번외 : Image 둥글게 만들기

Glide로 불러온 이미지를 둥글게 자르고 싶으면 어떻게 해야할까?
하다가 이전에 썼던 방법은 역시나 Deprecated가 되서 새로운 방법을 찾아보았다.
오히려 이전에 썼던 방법보다 훨씬 간단하고 편해져서 쉬워졌다.
기존에 사용했던 Glide 호출에서 한 줄만 추가해주면 된다.
1
2
3
4
5
6
public void SlicedImg(Context context, String url, ImageView imv){
        Glide.with(context)
                .load(url)
                .apply(new RequestOptions().circleCrop()) //이미지 둥글게 잘라주는 옵션
                .into(imv);
}
cs
위에 .apply(new RequestOptions().circleCrop()) 부분만 추가해주면 
아래와 같이 둥글게 잘린 이미지를 볼 수 있다.

원본

circleCrop() 옵션 적용