This document provides tips for using the Glide image loading library for Android. It discusses passing the correct context to avoid memory issues, using a RecyclerView preloader to preload images ahead of where the user is scrolling, supporting custom data models by implementing model and data loaders, and overlaying images by loading them as drawables and combining in a LayerDrawable.

1. Glide usage tips
2018/12/10 LINE Developer Meetup #47 in Fukuoka
LINE Fukuoka
Kelvin Ko

2. About me
• Kelvin Ko (from Hong Kong)
• Software Engineer @ LINE Fukuoka
• Project: LINE Client (Android)

3. Outline
• Passing correct context
• Preload image in recycler view
• How to use custom model
• How to do overlay image

4. Tips 1: Passing context

5. What is
• Glide is a image loading library for Android.
• Basic usage:
Passing correct scope of context
is important!
Glide will clear automatically base on
lifecycle of given context
So, don’t just pass ApplicationContext
Try to pass closer context

6. Tips 2: Pre-load in recycler view

7. Using RecyclerViewPreloader
• RecyclerViewPreloader
• can automatically load images just ahead of where a
user is scrolling in a RecyclerView.
• Available in “recycler-integration” library

8. Setup RecyclerViewPreloader
1. Create PreloadSizeProvider
2. Create PreloadModelProvider
3. Create RecyclerViewPreloader with
PreloadSizeProvider and PreloadModelProvider
4. Add RecyclerViewPreloader to RecyclerView as
scroll listener

9. 1. Size Provider
• PreloadSizeProvider provide size of the image Glide
should load.
• If all target image view in recycler view is same size, can
use FixedPreloadSizeProvider

10. 2. Model Provider
• PreloadModelProvider provide list of models for glide to
preload (Like in adapter provide data for recycler view to
display on bind view)
If current adapter like this:

11. 3. Add onScrollListener
• Create preloader with previous components
• Attach preloader on scroll listener
• Now, it will preload image base on scroll direction

12. Tips 3: You can you use your
own model

13. Using custom model
Beside URL, Uri, File Path
You can create custom model to support
more model
We use custom model to display sticker
For example, a sticker data model contain sticker related information
We can display sticker with this code:
*Actual sticker display logic is more complex, this is a simplified example

14. Custom model
• Why use custom model?
• Custom data fetching flow
• Readability, look strict forward, right?
• How to do that?

15. 1. Model Loader
• handles()
• Checking whether this loader can handle the input model
• buildLoadData()
• Return a Data Loader which can fetch data when cache not hit

16. 2. Data Fetcher
• loadData()
• Implement actual data fetching logic. For example, load image from network
• getDataSource()
• Return the nature of data source, which will affect Cache strategy.
• E.g LOCAL: cache the transformed image, REMOTE: cache the original image.

17. 3. Register Model Loader in Glide
• Implement ModelLoaderFactory
• Register the model loader in Glide
• Now, we can use our custom model in Glide!~

18. Tips 4: How to overlay image?

19. Overlay image
• Use Glide to download image as Drawable
• Supply Drawable(s) to LayerDrawable
Base Overlay

20. Conclusion
• Passing minimum scope of context for better memory
usage
• Use Pre-Loader in Recycler view for better UX
• Register your own model in AppGlideModule
• Can consider using LayerDrawable if you want to form an
image by multiple drawable

21. Thank you~!