Showcase Recipes

Sender Profile Photos

This recipe will show you how to display the sender’s profile image in a chat channel using ‘custom profile attributes’. Although Mitter.io provisions a default attribute for user profile photos out of the box, this basic use case simplifies understanding how to work with custom profile attributes.

Platform Android
Level Intermediate
Github View on GitHub
Time Required ~45 minutes
Where it matters - Chatbot experiences

- Any basic chat app

Prerequisite : Get your basic project setup done by following the steps mentioned over here. Once you’re done implementing a basic chat in your app, follow the steps below.

1 Step 1

First, we need to modify our existing ChatRecyclerViewAdapter to show a profile photo of the person with whom we’re chatting.

You can use any image loading technique or library you prefer. For this recipe, we will be using Glide.

The process is two-fold. Get started by adding an ImageView to hold the profile photo of a user, in your XML layout of the incoming messages, like this:

<ImageView
       android:id="@+id/senderImage"
       android:layout_width="44dp"
       android:layout_height="44dp"
       app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintTop_toTopOf="@id/otherMessageText"
       app:layout_constraintBottom_toBottomOf="@id/otherMessageText"
/>

After that, modify your ChatRecyclerViewAdapter to accept a profile photo URL and display it for the other user in your bindMessage() method, like this:

fun bindMessage(message: Message) {
   with(message) {
       if (senderId.domainId() == currentUserId) {
           itemView?.selfMessageText?.text = textPayload
       } else {
           itemView?.otherMessageText?.text = textPayload
           Glide.with(itemView.context)
               .load(otherUserProfilePhoto)
               .circleCrop()
               .into(itemView.senderImage)
       }
   }
}

2 Step 2

Before you can update any custom profile attribute value, you need to create that attribute for your application.

This can easily be done through an API call to the Mitter.io platform using an access key and application ID.

For this demo, we’ve included a node script which you can modify with your data and run to create an attribute for users in your application.

You can find the script over here. If you want to use your own backend, you can follow the guide to defining user profile attributes over here.

3 Step 3

For this example, we’ll be hardcoding an image URL to be assigned to our user’s profile on the press on a button.

Let’s get started by adding a button to our chat screen. Modify the activity layout to add a button beside the send button, like this:

<android.support.v7.widget.AppCompatImageView
       android:id="@+id/addProfilePhotoButton"
       android:layout_width="32dp"
       android:layout_height="32dp"
       android:src="@drawable/ic_tag_faces_black_24dp"
       app:layout_constraintTop_toTopOf="@id/divider"
       app:layout_constraintEnd_toStartOf="@id/sendButton"
       android:layout_marginEnd="20dp"
       app:layout_constraintBottom_toBottomOf="parent"/>

Now that we have our button placed on the screen, let’s quickly add a listener and update the current user’s profile when the button is pressed:

val users = mitter.Users()
addProfilePhotoButton?.setOnClickListener {
   users.addCurrentUserProfileAttribute(
       attributeType = "recipes.ProfilePhoto",
       attributeValue = "https://www.thewrap.com/wp-content/uploads/2017/07/Robert-Downey-Jr-Iron-Man-Pepper-Potts-Tony-Stark.jpg",
       onValueUpdatedCallback = object : Mitter.OnValueUpdatedCallback {
           override fun onError(apiError: ApiError) {

           }

           override fun onSuccess() {
               Toast.makeText(this@MainActivity, "Profile photo updated!", Toast.LENGTH_SHORT).show()
           }
       }
   )
}

Assuming that the attribute name is recipes.ProfilePhoto. You’re free to replace it with whatever name you chose when defining the attribute in Step 2.

Now, if you run your app as the other user by modifying your App class with the current user as userAuth2 and click on the profile photo button that we added, the user’s profile will get updated and you’ll see a toast saying “Profile photo updated!”.

alt text

4 Step 4

Now that you have defined and updated your user’s profile photo, it’s time to retrieve the profile photo URL and pass it to our ChatRecyclerViewAdapter to render the photo on the screen.

This can be easily done by modifying the onValueAvailable() callback of our existing getMessagesInChannel() call, like this:

val messages = value.reversed()

users.getUserProfile(
   userId = "VMCDv-czm5Z-nMDOJ-jJ67Y",
   onValueAvailableCallback = object : Mitter.OnValueAvailableCallback<EntityProfile> {
       override fun onError(apiError: ApiError) {

       }

       override fun onValueAvailable(value: EntityProfile) {
           val profilePhotoAttribute = value.attributes.first {
               it.key == "recipes.ProfilePhoto"
           }

           messageList.addAll(messages)
           chatRecyclerViewAdapter = ChatRecyclerViewAdapter(
               messageList = messageList,
               currentUserId = mitter.getUserId(),
               otherUserProfilePhoto = profilePhotoAttribute.value
           )

           chatRecyclerView?.adapter = chatRecyclerViewAdapter
       }
   })

Here, we have hardcoded the user ID of the second user with whom the currently logged in user is chatting. You can extend this logic to whatever suits your requirement.

Final result

Provided that you have run your app on Step 3 and clicked on the profile photo button to update the user’s profile photo for the other user, run the app as the first user (using ‘userAuth’ in the ‘App’ class) and you’ll see messages from the other user associated with a profile photo, like this:
For complete reference, see the GitHub repo specified on the recipe page.

Final Result

View recipe on Github