안드로이드 이미지 URL로 표시하기 (Android ImageView with image url)

안드로이드에서 이미지 URL을 가지고 이미지뷰(ImageView)에 이미지를 가져오는 가장 간단한 방법이있다.

손수 하려하면 캐싱, 로딩, 네트워킹 등 건드려야 할 부분이 꽤 많은데, 라이브러리를 이용하면 아주 쉽다.

물론 손수하는 것처럼 여러가지 옵션들도 조정 가능하다.

유명한 라이브러리로는 Picasso/Glide/Fresco 3대장이있는데,

3가지 다 써본 유저로서 정리를 해보자면... 이정도!

강의에서는 Glide를 사용해볼 것이다.

-Glide: 제일 많이쓰는 보편적인 것, 자료가 많음

-Picasso: 옛날에 많이 쓰였던것, Picasso와 Glide는 사용하는 문법이 비슷해서 원하는 기능에 따라 편한걸로 쓰면됨 (하지만 기능도 거의 비슷)

-Fresco: 페이스북이 개발한 이미지 라이브러리로, 사용법이 꽤 귀찮고 코드가 많아지지만 또 그만큼 섬세한 컨트롤이 됨. GIF를 많이 보여준다면 필수.

예를 들어서 아래의 이미지 URL이있다고하자. 벨모양 이미지!

https://bit.ly/2V1ipNj

이렇게 생겼다.

1. Glide 라이브러리 build.gradle 에 추가하기

프로젝트 수준의 build.gradle에 repositories를, 앱 수준의 build.gradle에는 dependencies를 붙여넣어준다.

repositories {
  mavenCentral()
  google()
}
 
dependencies {
  implementation 'com.github.bumptech.glide:glide:4.9.0'
  annotationProcessor 'com.github.bumptech.glide:compiler:4.9.0'
}

2. AndroidMenifest.xml 에 Internet 권한 추가하기

URL인즉슨 인터넷을 통해 가져와야 하므로 권한을 추가해준다.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.lx5475.course_1">
 
    <uses-permission android:name="android.permission.INTERNET" />
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        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>

3. activity_main.xml 작성하기

activity_main.xml 에 다음과같이 이미지뷰만 하나 추가 해보았다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <ImageView
        android:id="@+id/iv_image"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"/>
</LinearLayout>
 

4. Glide를 사용하여 이미지 표시하기

public class MainActivity extends AppCompatActivity {
 
    private ImageView ivImage;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ivImage = findViewById(R.id.iv_image);
 
        // Glide로 이미지 표시하기
        String imageUrl = "https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory&fname=https://k.kakaocdn.net/dn/EShJF/btquPLT192D/SRxSvXqcWjHRTju3kHcOQK/img.png";
        Glide.with(this).load(imageUrl).into(ivImage);
    }
}
 

5. 실행!

실행해보면 다음과같이 이미지가 나오는 것을 볼 수 있다. ㅎㅎ

6. 심화학습 - Placeholder(미리보기 이미지)와 오류 이미지 설정하기

사진을 로딩하기 전에는 미리보기 이미지를, 사진을 불러오지 못했을때는 오류 이미지를 보여주려면 아래와 같이하면된다!

Glide.with(this).load(imageUrl)
                .placeholder(R.drawable.placeholder)
                .error(R.drawable.error_image)
                .into(ivImage);