How to create a preview for a link in Android
With the development of messaging applications, starting from WhatsApp for Chat Groups, to Slack for workspaces, link sharing is a crucial part.
WhatsApp provides a preview for the link that you enter in the input box, which helps users gain information about the content, without opening the link, increasing the user experience.
In this blog, we will see how we can create a preview like WhatsApp in Android.
The Open Graph Protocol
The Open Graph protocol enables any web page to become a rich object in a social graph. While many different technologies and schemas exist and could be combined together, there isn’t a single technology which provides enough information to richly represent any web page within the social graph. The Open Graph protocol builds on these existing technologies and gives developers one thing to implement.
For building the code for link preview, we will be using the Open Graph Protocol.
We will start with creating the data class for the response from the link.
data class OpenGraphResult(
var title: String? = null,
var description: String? = null,
var url: String? = null,
var image: String? = null,
var siteName: String? = null,
var type: String? = null
)In this data class, we add title, description, url, image, siteName, and type, all of this can be fetched using OGP. You can read more about the different fields here.
Now let us see how we can actually get some information from the link.
Getting information about the link
Let us start by adding some dependencies for Jsoup and Kotlin Coroutines.
implementation 'org.jsoup:jsoup:1.10.3' implementation 'org.jetbrains.kotlinx:kotlinx-coroutines-android:1.3.9'
Jsoup is an open-source Java library designed to parse, extract, and manipulate data stored in HTML documents.
Now we start the code.
We first check if the link contains, http or not, so as to make the link consistent.
Next, we connect to the url using Jsoup. Let us see what individual functions are meant for.
ignoreContentType :- True if you wish to ignore the type of content from the url. Unrecognised content might throw IOException.userAgent :- Sets the request user-agent headerreferrer :- Sets the request referrer headertimeout :- Sets the request timeout. IOException is thrown is timeout occursfollowRedirects :- True if you want the link to follow server redirects
Next, we parse the response and save it in a variable. We then select the CSS Query from this parsed data using doc.select(DOC_SELECT_QUERY).
We then iterate over the tags that we get and extract individual properties as per our requirements.
That is all you need to do to extract information from a link. This information can be shown to the user in any way possible.
You can find the variables used with Jsoup here.
In this blog, we read about how one can implement OGP in android, to fetch information from the link.
You can also check out a small library I made for the same task. This library simplifies the task and gives the link information with just one line of code.
