Providing Custom Reactions

note

You can find the full code from this guide on GitHub. To check the final result, clone the repository, select the stream-chat-android-ui-guides module on your Android Studio like the image below, and run the module.

By default, the UI Components SDK provides the following reaction options and corresponding icons for them:

• like
• love
• haha
• wow
• sad

If you want to override the supported reactions, you need to create a custom instance of SupportedReactions with your custom set of reactions and provide it using the ChatUI.supportedReactions property.

Kotlin

val reactions = mapOf(
    "thumbs_up" to SupportedReactions.ReactionDrawable(
        inactiveDrawable = ContextCompat.getDrawable(context, R.drawable.ic_thumb_up)!!,
        activeDrawable = ContextCompat.getDrawable(context, R.drawable.ic_thumb_up_selected)!!
    ),
    "thumbs_down" to SupportedReactions.ReactionDrawable(
        inactiveDrawable = ContextCompat.getDrawable(context, R.drawable.ic_thumb_down)!!,
        activeDrawable = ContextCompat.getDrawable(context, R.drawable.ic_thumb_down_selected)!!
    ),
    "mood_good" to SupportedReactions.ReactionDrawable(
        inactiveDrawable = ContextCompat.getDrawable(context, R.drawable.ic_mood_good)!!,
        activeDrawable = ContextCompat.getDrawable(context, R.drawable.ic_mood_good_selected)!!
    ),
    "mood_bad" to SupportedReactions.ReactionDrawable(
        inactiveDrawable = ContextCompat.getDrawable(context, R.drawable.ic_mood_bad)!!,
        activeDrawable = ContextCompat.getDrawable(context, R.drawable.ic_mood_bad_selected)!!
    )
)

ChatUI.supportedReactions = SupportedReactions(context, reactions)

Java

Map<String, SupportedReactions.ReactionDrawable> reactions = new HashMap<>();
reactions.put(
        "thumbs_up", new SupportedReactions.ReactionDrawable(
                ContextCompat.getDrawable(context, R.drawable.ic_thumb_up),
                ContextCompat.getDrawable(context, R.drawable.ic_thumb_up_selected)
        )
);

reactions.put(
        "thumbs_down", new SupportedReactions.ReactionDrawable(
                ContextCompat.getDrawable(context, R.drawable.ic_thumb_down),
                ContextCompat.getDrawable(context, R.drawable.ic_thumb_down_selected)
        )
);

reactions.put(
        "mood_good", new SupportedReactions.ReactionDrawable(
                ContextCompat.getDrawable(context, R.drawable.ic_mood_good),
                ContextCompat.getDrawable(context, R.drawable.ic_mood_good_selected)
        )
);

reactions.put(
        "mood_bad", new SupportedReactions.ReactionDrawable(
                ContextCompat.getDrawable(context, R.drawable.ic_mood_bad),
                ContextCompat.getDrawable(context, R.drawable.ic_mood_bad_selected)
        )
);

ChatUI.setSupportedReactions(new SupportedReactions(context, reactions));

In the example above, we defined a set of 4 custom reactions and provided corresponding icons for them. Notice that you need to provide icons for both normal and selected states.

The Resulting UI

The code above will produce the following UI:

Message Options Overlay	Message List