Glide usage tips
2 likes1,187 views
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.
Glide usage tips
- 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~!