[안드로이드 코틀린] HTTP Glide 이미지 쉽게 보여주는 방법

이번 시간에는 Glide 라이브러리를 이용해서 이미지 쉽게 보여주는 방법을 알아보겠습니다.

---

목차

1. 실행 화면
2. 권한 등록
3. 라이브러리 등록
4. 메인 화면 activity_main.xml
5. 메인 코드 MainActivity.kt

---

1. 실행 화면

 

 

2. 권한 등록

AndroidManifest.xml

2-1 권한 등록

manifest 태그 안에 추가합니다.

    <uses-permission android:name="android.permission.INTERNET"/>

2-2 http통신 허용

application 태그 안에 옵션을 추가합니다.

android:usesCleartextTraffic="true"

3. 라이브러리 등록

build.gradle(Module:프로젝트명:app)

dependencies 괄호 안에 아래 코드를 넣어주시면 됩니다.

    implementation 'com.github.bumptech.glide:glide:4.14.1'
    annotationProcessor 'com.github.bumptech.glide:compiler:4.14.1'

 참조 문서

https://github.com/bumptech/glide

GitHub - bumptech/glide: An image loading and caching library for Android focused on smooth scrolling

 

4. 메인 화면 activity_main.xml

- 설명 -

 1. api 호출한 이미지 보여주는 ImageView

 2. api 호출하는 Button

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/imaegView"
        android:layout_width="match_parent"
        android:layout_height="300dp" />

    <Button
        android:id="@+id/searchBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_margin="30dp"
        android:text="이미지 보여주기"
        android:textSize="20sp" />

</LinearLayout>

 

5. 메인 코드 MainActivity.kt

- 설명 -

 1. with(this)

   Context

 2. .load(url)

   이미지 위치

 3. .placeholder(R.drawable.frame)

   이미지 로딩 시에 보여줄 이미지

 4. .error(R.drawable.error)

   오류 발생 시에 보여줄 이미지

 5. .into(imageView)

   이미지 보여줄 뷰

6. 이미지 res -> drawable

error.png

0.01MB

frame.png

0.00MB

class MainActivity : AppCompatActivity() {

    lateinit var imageView: ImageView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        imageView = findViewById(R.id.imaegView)

        val searchBtn: Button = findViewById(R.id.searchBtn)
        searchBtn.setOnClickListener {

            //이미지 가져오기
            showImage()
        }
    }

    /**
     * 이미지 보여주기
     */
    private fun showImage(){

        val url = "https://picsum.photos/200"

        Glide.with(this)
            .load(url)//이미지 위치
            .placeholder(R.drawable.frame)//로딩 이미지
            .error(R.drawable.error)//에러 이미지
            .into(imageView)//보여줄 위치
    }
}

2022.09.28 - [안드로이드] - [안드로이드 코틀린] HTTP 통신 Retrofit2 사용법 part1 - 권한 및 설정

[안드로이드 코틀린] HTTP 통신 Retrofit2 사용법 part1 - 권한 및 설정

2022.09.27 - [안드로이드] - [안드로이드 코틀린] Vibrator 진동 효과 내는 방법

[안드로이드 코틀린] Vibrator 진동 효과 내는 방법

2022.09.26 - [안드로이드] - [안드로이드 코틀린] Ringtone 효과음 내는 방법

[안드로이드 코틀린] Ringtone 효과음 내는 방법