Kotlin के लिए Glide/Coil: उदाहरणों के साथ पूर्ण गाइड

Glide और Coil क्या हैं और इनकी आवश्यकता क्यों है?

आधुनिक Android डेवलपमेंट में, नेटवर्क, लोकल फ़ाइलों या रिसोर्सेज से इमेज लोड करना और दिखाना सबसे आम कामों में से एक है। लेकिन केवल इमेज डाउनलोड करके ImageView में दिखाना काफी नहीं है। कई बारीकियों का ध्यान रखना ज़रूरी है: कैशिंग (डेटा बचाने के लिए), एरर हैंडलिंग (अगर इमेज लोड न हो), ट्रांसफॉर्मेशन (गोल अवतार, ब्लर), GIF और वीडियो सपोर्ट, और स्मूथ एनिमेशन।

Glide और Coil Kotlin/Android में इमेज लोड करने की दो सबसे लोकप्रिय लाइब्रेरी हैं। ये ऊपर बताई गई सभी समस्याओं को 'आउट ऑफ द बॉक्स' हल करती हैं।

• Glide — Google (आंशिक रूप से) द्वारा विकसित एक शक्तिशाली, परिपक्व लाइब्रेरी। यह GIF, वीडियो, ट्रांसफॉर्मेशन और एनिमेशन को सपोर्ट करती है। इसका एक बहुत बड़ा समुदाय है।
• Coil — एक अधिक आधुनिक, हल्की और पूरी तरह से Kotlin में कोरूटीन का उपयोग करके लिखी गई लाइब्रेरी। यह Jetpack Compose के साथ शानदार ढंग से इंटीग्रेट होती है।

इस लेख में हम दोनों लाइब्रेरीज़ को कवर करेंगे, क्योंकि ये एक ही काम को अलग-अलग तरीकों से करती हैं। आप अपने प्रोजेक्ट के लिए सबसे उपयुक्त लाइब्रेरी चुन सकते हैं।

इंस्टॉलेशन

build.gradle.kts फ़ाइल (मॉड्यूल लेवल app) में डिपेंडेंसी जोड़ें:

Glide के लिए:

dependencies {
    implementation("com.github.bumptech.glide:glide:4.16.0")
    kapt("com.github.bumptech.glide:compiler:4.16.0") // GlideApp के लिए
}

Coil के लिए:

dependencies {
    implementation("io.coil-kt:coil:2.6.0")
    // अगर आप Compose का उपयोग कर रहे हैं:
    implementation("io.coil-kt:coil-compose:2.6.0")
}

डिपेंडेंसी जोड़ने के बाद प्रोजेक्ट को सिंक करें (Sync Now)।

त्वरित शुरुआत

चलिए इंटरनेट से एक साधारण इमेज को ImageView में लोड करते हैं।

Glide के साथ उदाहरण:

// Activity या Fragment में
val imageView: ImageView = findViewById(R.id.my_image_view)
val url = "https://example.com/image.jpg"

Glide.with(this)
    .load(url)
    .into(imageView)

Coil के साथ उदाहरण:

// Activity या Fragment में
val imageView: ImageView = findViewById(R.id.my_image_view)
val url = "https://example.com/image.jpg"

imageView.load(url)

जैसा कि आप देख सकते हैं, Coil load() एक्सटेंशन फ़ंक्शन के माध्यम से और भी संक्षिप्त सिंटैक्स प्रदान करता है।

मुख्य तरीके और फ़ंक्शन

नीचे इमेज के साथ काम करने के लिए मुख्य तरीके दिए गए हैं। प्रत्येक तरीके के लिए, मैं दोनों लाइब्रेरीज़ के उदाहरण दिखाऊंगा।

1. load() — इमेज लोड करना

यह क्या करता है: मुख्य तरीका जो इमेज स्रोत (URL, URI, File, Drawable, Bitmap) को स्वीकार करता है।

पैरामीटर:

• url: String — इमेज का लिंक।
• uri: Uri — लोकल URI।
• file: File — फ़ाइल।
• resourceId: Int — रिसोर्स ID (R.drawable...).

उदाहरण (Glide):

Glide.with(this)
    .load("https://example.com/photo.png")
    .into(imageView)

उदाहरण (Coil):

imageView.load("https://example.com/photo.png")

2. placeholder() — प्लेसहोल्डर इमेज

यह क्या करता है: जब तक मुख्य इमेज लोड हो रही है, तब तक एक अस्थायी तस्वीर दिखाता है।

पैरामीटर:

• placeholder: Int — drawable रिसोर्स का ID.

उदाहरण (Glide):

Glide.with(this)
    .load(url)
    .placeholder(R.drawable.ic_loading)
    .into(imageView)

उदाहरण (Coil):

imageView.load(url) {
    placeholder(R.drawable.ic_loading)
}

3. error() — एरर इमेज

यह क्या करता है: अगर मुख्य इमेज लोड होने में विफल रहती है, तो यह एक तस्वीर दिखाता है।