jetpack Glide를 활용한 사진 뷰

Overview

🏃 [Android] Jetpack Glide demo

✏️ Study

🌍 Setting

  • CompileSdk = 30
  • Minsdk = 24
  • TargetSdk = 30

🤨 Why

  • bitmap으로 대용량 이미지를 로드해 퍼포먼스가 떨어지고 메모리 릭이 발생하는 문제를 해결
  • 애니메이션, 에러 등 간편하게 구현할 수 있음

🙋 Try

  • Jetpack Glide 사용해보기
  • 이미지 로드 성공, 로드 중, 로드 실패 에 따른 애니매이션 및 이미지 뷰잉

✏️ Gradle 설정

build.gradle

dependencies {
    					.
    					.
    					.
    // Glide
    implementation 'com.github.bumptech.glide:glide:4.11.0'
    // Progress
    implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.0.0'
    					.
    					.
    					.
}

✏️ manifest 설정

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.yotdark.example_glide">
		
		//인터넷 관리 퍼미션 허용
    <uses-permission android:name="android.permission.INTERNET" />

    <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/Theme.Example_glide">
        <activity
            android:name=".MainActivity"
            android:exported="true">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>
  • 권한 설정

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

✏️ Glide 를 통해 이미지를 보여 줄 View 구성

activity_main.xml

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

    <ImageView
        android:id="@+id/image1"
        android:layout_width="0dp"
        android:layout_height="120dp"
        android:background="@drawable/background_imageview_glide"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/image2"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/image2"
        android:layout_width="0dp"
        android:layout_height="120dp"
        android:layout_marginLeft="10dp"
        android:background="@drawable/background_imageview_glide"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@id/image3"
        app:layout_constraintStart_toEndOf="@+id/image1"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/image3"
        android:layout_width="0dp"
        android:layout_height="120dp"
        android:layout_marginLeft="10dp"
        android:background="@drawable/background_imageview_glide"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/image2"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="로드 성공"
        android:textColor="#333333"
        app:layout_constraintEnd_toEndOf="@id/image1"
        app:layout_constraintStart_toStartOf="@id/image1"
        app:layout_constraintTop_toBottomOf="@id/image1" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="로드 중"
        android:textColor="#333333"
        app:layout_constraintEnd_toEndOf="@id/image2"
        app:layout_constraintStart_toStartOf="@id/image2"
        app:layout_constraintTop_toBottomOf="@id/image2" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="로드 실패"
        android:textColor="#333333"
        app:layout_constraintEnd_toEndOf="@id/image3"
        app:layout_constraintStart_toStartOf="@id/image3"
        app:layout_constraintTop_toBottomOf="@id/image3" />
</androidx.constraintlayout.widget.ConstraintLayout>

✏️ GlideActivity 클래스 생성

✏️ Glide 라이브러리를 통해서 이미지 로드

GlideActivity.kt

@GlideModule
class GlideActivity(private val context: Context): AppGlideModule() {

    fun glideLoadImage(view: ImageView, url: String, type: String){
        when(type){
            "loading" -> Glide.with(context)
                              .load(url)
                              .placeholder(getProgress())
                              .into(view)
            else -> Glide.with(context)
                         .load(url)
                         .placeholder(getProgress())
                         .centerCrop()
                         .error(R.drawable.warn_icon_24)
                         .into(view)
        }
    }

    private fun getProgress() = CircularProgressDrawable(context).apply {
        strokeWidth = 5f
        centerRadius = 30f
        start()
    }
}
  • Glide를 사용해서 프로그래스, error, 이미지 정렬 등 여러가지 옵션 써보기

    when(type){
        "loading" -> Glide.with(context)
                          .load(url)
                          .placeholder(getProgress())
                          .into(view)
        else -> Glide.with(context)
                     .load(url)
                     .placeholder(getProgress())
                     .centerCrop()
                     .error(R.drawable.warn_icon_24)
                     .into(view)
    }
  • CircularProgressDrawable 사용해서 로딩 처리 하기

    private fun getProgress() = CircularProgressDrawable(context).apply {
        strokeWidth = 5f
        centerRadius = 30f
        start()
    }

✏️ MainActivity 클래스 생성

MainActivity.kt

  • 테스트할 이미지뷰에 이미지 로드

    private val glide: GlideActivity by lazy {
        GlideActivity(this@MainActivity)
    }
    
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    
        glide.glideLoadImage(image1,
        "https://image.edaily.co.kr/images/photo/files/NP/S/2019/05/PS19050800712.jpg",
        "success")
        glide.glideLoadImage(image2,"https://node.com.haha.jpg","loading")
        glide.glideLoadImage(image3,"https://nothing.nothing","false")
    }
You might also like...
🎺 Orchestra is a collection of Android custom view compatible libraries for Jetpack Compose.
🎺 Orchestra is a collection of Android custom view compatible libraries for Jetpack Compose.

Orchestra 🎺 Jetpack Compose compatible libraries using Balloon, ColorPickerView, PowerSpinner. Balloon Add below codes to your root build.gradle file

Particle clock created with Jetpack Compose framework

Jetpack Compose Particle Clock made with Jetpack Compose This project is inspired by Flutter Particle Clock. License Copyright 2018 Adib Faramarzi. Li

A Collection on all Jetpack compose UI elements, Layouts, Widgets and Demo screens to see it's potential
A Collection on all Jetpack compose UI elements, Layouts, Widgets and Demo screens to see it's potential

ComposeCookBook Declarative UI A Collection of all Jetpack compose UI elements, Layouts, Widgets and Demo screens to see it's potential. Jetpack Compo

This repos one of the ways hows how to use Jetpack Compose Navigation along with Dagger 2
This repos one of the ways hows how to use Jetpack Compose Navigation along with Dagger 2

Dagger 2 and Jetpack Compose Integration This repository is about a way how to use Dagger 2 for projects which using Jetpack Compose. Here is an artic

A diary app made by Jetpack Compose
A diary app made by Jetpack Compose

Chinese 🈶 ComposeDiary A simple diary app build by Jetpack Compose, use navigation library for single activity implementation Tech Stack & Features P

🔖 A Quotes Application built to Demonstrate the Jetpack Compose UI
🔖 A Quotes Application built to Demonstrate the Jetpack Compose UI

🔖 A Quotes Application built to Demonstrate the Jetpack Compose UI

Recreation of Spotify UI with Jetpack Compose
Recreation of Spotify UI with Jetpack Compose

SpotifyUiJetpackCompose Recreation of Spotify UI with Jetpack Compose. Screenshots: License I don't own any of the graphics used in this project (Spot

JetFlix - A clone of Android NetFlix app in Android built using Jetpack compose.
JetFlix - A clone of Android NetFlix app in Android built using Jetpack compose.

JetFlix A clone of Android NetFlix app in Android built using Jetpack compose. This sample app showcases the following: MVVM Architecture (ViewModel +

😇Translation tool based on Jetpack Compose
😇Translation tool based on Jetpack Compose

📸 Screenshots   License Copyright 2020 The Android Open Source Project Licensed under the Apache License, Version 2.0 (the "License"); you may not u

Owner
YOTDARK
안드로이드 네이티브로 2차전직 준비 with Kotlin (Start 2021-11-22 ~)
YOTDARK
A collection of animations, compositions, UIs using Jetpack Compose. You can say Jetpack Compose cookbook or play-ground if you want!

Why Not Compose! A collection of animations, compositions, UIs using Jetpack Compose. You can say Jetpack Compose cookbook or play-ground if you want!

Md. Mahmudul Hasan Shohag 186 Jan 1, 2023
Learn Jetpack Compose for Android by Examples. Learn how to use Jetpack Compose for Android App Development. Android’s modern toolkit for building native UI.

Learn Jetpack Compose for Android by Examples. Learn how to use Jetpack Compose for Android App Development. Android’s modern toolkit for building native UI.

MindOrks 382 Jan 5, 2023
This is a sample app(For beginners - App #2) built using Jetpack Compose. It demonstrates the concept of State Hoisting in Jetpack Compose.

JetBMICalculator This is a sample app(For beginners - App #2) built using Jetpack Compose. It demonstrates the concept of State Hoisting in Jetpack Co

BHAVNA THACKER 3 Dec 31, 2022
Jetpack-Compose-Demo - Instagram Profile UI using Jetpack Compose

Jetpack-Compose-Demo Instagram Profile UI using Jetpack Compose

omar 1 Aug 11, 2022
Jetpack-compose-animations-examples - Cool animations implemented with Jetpack compose

Jetpack-compose-animations-examples This repository consists of 4 animations: St

Canopas Software 180 Jan 2, 2023
Compose-navigation - Set of utils to help with integrating Jetpack Compose and Jetpack's Navigation

Jetpack Compose Navigation Set of utils to help with integrating Jetpack Compose

Adam Kobus 5 Apr 5, 2022
Jetpack-compose-uis - A collection of some UIs using Jetpack Compose. built using Katalog

Jetpack Compose UIs This is a collection of some UIs using Jetpack Compose. It i

Mori Atsushi 3 Dec 15, 2022
A simple authentication application using Jetpack compose to illustrate signin and sign up using Mvvm, Kotlin and jetpack compose

Authentication A simple authentication application using Jetpack compose to illustrate signin and sign up using Mvvm, Kotlin and jetpack compose Scree

Felix Kariuki 5 Dec 29, 2022
An application that i developed with a aim of learning Jetpack compose and many other jetpack libraries

An application that i developed with a aim of learning Jetpack compose and many other jetpack libraries, The application make use of jikan Api which displays a list of animations,there more details and even trailers of the animations.

Odhiambo Brandy 10 Nov 23, 2022
🍂 Jetpack Compose image loading library which can fetch and display network images using Glide, Coil, and Fresco.

Landscapist ?? Jetpack Compose image loading library which can fetch and display network images using Glide, Coil, Fresco Usecase You can see the use

Jaewoong Eum 1.4k Jan 1, 2023