Tuesday, September 5, 2023

Image Parsing and List Display within HTML Pages Using Jsoup and Glide 4.0

Explaining a Free Image Extraction Project for Android Development

In this article, I will describe a project for extracting free images for Android development. This project was previously undertaken as an interview assignment for my previous company. It involved extracting images from arbitrary websites, but due to copyright concerns, I conducted the project using the website Pixabay, which offers free images.

Android Source Architecture
Source Architecture

Main Flow of the Project

The primary operational flow of the Android app used for extracting free images from Pixabay is as follows:

  1. MainActivity: Constructs a list and implements a Callback interface, then requests network communication using Jsoup to the Networker.
  2. Networker: Processes the received request with Jsoup, parses image information, and constructs a list in the form of ImageListModel. It then forwards the list to the requesting Callback (MainActivity).
  3. MainActivity: Receives the list data and updates it.

Extracting Image Information from Pixabay

To obtain the necessary image information from Pixabay, I first identified the img tag's information in Chrome Developer Mode and then used Jsoup for parsing.

Chrome Developer Mode Screenshot
Networker Code Screenshot
Networker Code Example

Implementing Screen Rotation Handling

In this project, I implemented an option to handle screen rotation. This feature was configured to automatically handle screen size or orientation changes by adding 'android:configChanges="screenSize|orientation"' to the activity options in the AndroidManifest file.

Loading Images Using Glide

I used the Glide library for image loading. Since the usage of Glide 3.0 and 4.0 differs, I applied placeholder and error image display in this project.

Glide 4.0 Placeholder and Error Image Code
Glide 4.0 Placeholder and Error Image Example

Setting OnClickListener in RecyclerView

Additionally, I set the listener in the ViewHolder creation rather than in onBindViewHolder for RecyclerView.

Setting ViewHolder Listener in RecyclerView

Pixabay Site's Lazy Loading

The Pixabay site uses lazy loading for image optimization. This can sometimes lead to errors in image loading when images are requested partway through. I left this issue unhandled without implementing exception handling.

Download the Example Source Code

If you click the link below, you can download the example source code for this project:

Download Example Source Code

0 개의 댓글:

Post a Comment