Integrating Expression Search in Android app

Integrating Expression Search in Android app

In this era of social media, we talk to each other over text messages. There are various text messaging apps like WhatsApp, Messenger, etc. We communicate with each other with the help of these lifeless texts. But sometimes things become worse due to text messaging. You can’t share your emotions just by texting your friend. For example, if you are happy then you will just write “I am happy :)” But your friend will never know how much happy you are. These things should be kept in mind while developing any text messaging application. So, while building an Android application that includes some kind of communication, it becomes a necessary task to integrate expression search. By doing so your users will be able to convey their expressions and emotions in a much better way and this will result in better user experience.

In this blog, we will learn how to integrate Expression Search in Android applications. We have divided the whole blog into the below topics:

  • The current problem
  • What’s the solution?
  • How to solve the problem in Android apps?
  • Closing notes

So, let’s get started.

The current problem

While talking to someone over text messages, we use the Qwerty keyboard and this Qwerty keyboard is generally made for computers. If you are new to Android devices or mobile devices then you will find it difficult to type something at a decent speed and speed matters a lot when you are talking to someone ;)

Another demerit of using lifeless text is that you can’t express your feelings over texts. Suppose you have got a new job at your dream company and you are sharing this news with your mother over text. Then the text message will never justify your feelings or the excitement that you will be having after getting the job. Also, there are certain cases where you want to say something and the person on the other side understand something else. And trust me, this is the worst feeling that all of us must have experienced while texting, especially when you are texting to someone very special ;)

Is there any solution to the above problem? One solution is to go and meet the person whom you want to talk and then share your emotions. But is it possible every time? No. So, we have to find some way of expression sharing in all the text messaging apps that we use in our daily life.

What’s the solution?

So, we are looking for a way to go beyond words to express ourselves. The solution to the above problem can be the use of pictorial representation to talk to someone. For example, you can use GIFs in your application and your users will convey their message in a very fast and meaningful way.

A GIF or Graphics Interchange Format helps us to communicate more accurately, more precisely and translate the thought, the feelings, the emotions that are at the back of our head into a visual object.
Integrating Expression Search in Android app

So, with the help of GIFs, you can communicate exactly what’s on your mind. The use of GIFs is increasing day by day. There are various search engines for GIF, like Tenor and GIPHY. These search engines search the most relevant GIF according to the search keyword. Following is an example from the Tenor website when we search for “ smile ”.

Integrating Expression Search in Android app

From the above image, you can see that apart from showing some relevant pictures related to “ smile ” keyword, the users are given options for various type of smiles like big smile , terminator smile , laughing hysterically , etc. So, you can show the intensity of your smile by taking help from the above options present.

Also, these search engines show the result of the latest TV series that you have watched or the GIF may contain some of the characters of your favourite movie. So, by sharing these GIFs both of you i.e. you and your friend will understand each other’s feelings in a better way.

GIFs can be used in a variety of context:

  1. In text messaging applications.
  2. In mobile keyboards.
  3. In gaming, to share the emotions and excitements.
  4. In customer service.

Some of the famous applications that have GIF support are WhatsApp, Messenger, Discord, Badoo, LinkedIn, etc.

So, we are ready with the solution. If we are making a text messaging application, then we can use GIFs in our application so that the users can communicate in a better way.

With great power comes great responsibility

Oh! that’s great! But how to implement this in our Android application? Do you know?

Integrating Expression Search in Android app

Let’s see how.

How to solve the problem in Android apps?

Till now, we have seen the problem along with the solution. So, are we done with the blog? No, in this section of the blog, we will see how to integrate expression search in our Android application because at the end of the day, we all are Android developers and we love to develop Android apps with great user experience.

To add GIF support in our application, we can get the API key from one of the GIF providers like Tenor or GIPHY and we can use it in our project. But before integrating the GIF support in our application, we need to see certain guidelines that must be followed to give a great expression search experience to our users. These guidelines are:

  1. Our app should quickly return the relevant result: We should integrate the GIF support in such a way that our app should return the relevant results as soon as possible because time is very precious and if our app is taking time to give results then we are likely to lose our users.
  2. Our app should inspire users to use more and more GIFs: We should produce results in such a way that people tend to use more and more GIFs. To do so, we can produce some GIF from a recent TV series or movies.
  3. The GIF should convey every emotion: Our app should produce GIF in such a way that it helps the users to navigate through nuances of expressions i.e. every possible case of “smile” should be shown if a user searches for “smile”.

So, we are done with the guidelines that must be followed while integrating the support of GIF in our application. Let’s see how? In our example, we will be using the GIPHY SDK .

GIPHY is the first and the largest GIF search engine that gives you free access to the ever-growing content library of GIFs, Stickers, Emoji and Text. Some of the applications that are using GIPHY are Facebook, Slack, Instagram, WhatsApp, etc.

GIPHY SDK for Android

The fastest and the easiest way to get the full experience of GIPHY in your application is by using the GIPHY SDK. It is a top-to-bottom solution for all GIF related activities like interfacing with GIPHY API, fetching and caching assets, and displaying GIFs and Stickers on the screen.

Follow the below steps to use GIPHY SDK in your application:

First of all, you have to get an API key from the GIPHY website. You can get the API key by adding your application’s detail on the GIPHY Developer Portal .

Integrating Expression Search in Android app

To use GIPHY, you have to add the GIPHY Maven repository in your project’s build.gradle file: 

allprojects {
    repositories {
        ...
        maven {
            url "http://giphy.bintray.com/giphy-sdk"
        }
        ...
    }
}

Add the GIPHY dependency in the module build.gradle file: 

implementation 'com.giphy.sdk:ui:1.0.1'

So, we are done with the installation and implementation part. Now, here is basic example of adding GIPHY Dialog fragment in our Activity: 

class GiphyActivity: AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        GiphyCoreUI.configure(this, YOUR_GIPHY_API_KEY)
        
        GiphyDialogFragment.newInstance().show(supportFragmentManager, "giphy_dialog")
    }
}

In the above code, you can see that before using the GIPHY SDK, you have to initialize it using the API key that you obtained for your application.

After that, everything is done by the GiphyDialogFragment . It will show the GIPHY dialog fragment in your app and you can search for the required GIF from there.

To adjust the settings of the GIPHY SDK, you can pass the object of GPHSettings when creating the GIPHY dialog. So, you can create a settings object to personalize your GIF picker. Here is an example of the same: 

var mySettings = GPHSettings(gridType = GridType.carousel, theme = LightTheme, dimBackground = true)

And after that, you can instantiate the GiphyDialogFragment with the settings object created above. 

val myGifDialog = GiphyDialogFragment.newInstance(mySettings)

If you closely look at the code of the GPHSettings then you can find that we are putting some settings properties inside the GPHSettings. Some of the properties of GPHSettings are:

  • Theme: You can set the theme of the picker to Light Theme or Dark Theme. 
mySettings.theme = LightTheme
  • Media Types: By using the mediaTypeConfig property, you can set the type of content you would like to show i.e. gif , sticker , text , and emoji (emoji is not available in carousel layout). 
mySettings.mediaTypeConfig = arrayOf(GPHContentType.gif, GPHContentType.sticker, GPHContentType.text, GPHContentType.emoji)
  • Layout: You can set the layout to waterfall (for vertical) or carousel (for horizontal). 
mySettings.gridType = GridType.waterfall
  • Confirmation screen: When you are in the waterfall layout i.e. in the vertical layout then GIPHY provides a feature to show the larger version of the GIF. You have to set the value of showConfirmationScreen to true if you want to display the larger version of the GIF on clicking it. This feature is not available in the carousel layout. 
mySettings.showConfirmationScreen = true

After adding all the settings to the GIPHY SDK, you can show your GiphyDialogFragment using the SupportFragmentManager. 

myGifDialog.show(supportFragmentManager, "gifs_dialog")

As like onClickListener, we have GifSelectionListener, that handles the event when we select any GIF. It contains two methods:

  1. onGifSelected: This method is called when the user selects or taps on a GIF.
  2. onDismissed: This method is called when the user dismissed the dialog without selecting any GIF. 
giphyDialog.gifSelectionListener = object: GiphyDialogFragment.GifSelectionListener {
    override fun onGifSelected(media: Media) {
        //Your user tapped a GIF
    }

    override fun onDismissed() {
        //Your user dismissed the dialog without selecting a GIF
    }
}

Now you can perform the desired actions on the selected GIF. For example, you can create a MediaView to display the media and pass the rendition type. 

val mediaView = GPHMediaView(context)
mediaView.setMedia(media, RenditionType.original)

So, that’s it. You are good to go with the GIFs from GIPHY.

Apart from GIPHY, you can also use TENOR , which is also a GIF search engine.

Closing notes

In this blog, we learned how to integrate expression search in Android applications. We saw how GIFs can easily convey the message, the emotions, the feelings to our friends and due to this, nowadays, almost every messaging application has GIF support.

Integrating Expression Search in Android app

Hope you learned something new today.

Do share this blog with your fellow developers to spread the knowledge. You can read more blogs on Android on our blogging website .

Apply Now: MindOrks Android Online Course and Learn Advanced Android

Happy Learning :)

Team MindOrks!