Merge pull request #48 from GetStream/feature/new-attachment-factory

Update tutorial to use AttachmentViewFactory for customization

Author: zsmb13

README.md

@@ -1,6 +1,6 @@
 # Android Chat Tutorial Sample
 
-This repository allows you to check the result after completing each step described in the [Android Chat Tutorial](https://getstream.io/tutorials/android-chat/#kotlin). It contains samples written in both **Kotlin** (_samplekotlin_ module) and **Java** (_samplejava_ module). For more Android Chat examples, see the [Github repo for UX/Views and its Sample app](https://github.com/GetStream/stream-chat-android).
+This repository allows you to check the result after completing each step described in the [Android Chat Tutorial](https://getstream.io/tutorials/android-chat/#kotlin). It contains samples written in both **Kotlin** (_samplekotlin_ module) and **Java** (_samplejava_ module). For more Android Chat examples, see the [Github repo for the SDK](https://github.com/GetStream/stream-chat-android) and the [UI Components sample app](https://github.com/GetStream/stream-chat-android/tree/main/stream-chat-android-ui-components-sample) in it.
 
 The project is pre-configured with a shared [Stream](https://getstream.io) account for testing purposes. You can learn more about Stream Chat [here](https://getstream.io/chat/), and then sign up for an account and obtain your own keys [here](https://getstream.io/chat/trial).
 
@@ -28,8 +28,7 @@ channelListView.setOnChannelClickListener { channel ->
 ```
 
 Currently, you can choose from four different `ChannelActivity` implementations:
-<!-- TODO: Add links when the new version of the Android Tutorial is published -->
+
 * `ChannelActivity` - a basic _Message List_ implementation
 * `ChannelActivity2` - includes a new _MessageListView_ style and custom attachment type
-* `ChannelActivity3` - includes a custom _Typing Header_ component created with the [LiveData&Offline](https://github.com/GetStream/stream-chat-android-livedata) library
-* `ChannelActivity4` - includes a custom _Typing Header_ component created with the [Low-Level Client](https://github.com/GetStream/stream-chat-android-client) library
+* `ChannelActivity4` - includes a custom _Typing Header_ component created with the [Low-Level Client](https://github.com/GetStream/stream-chat-android/tree/main/stream-chat-android-client) library

samplejava/build.gradle

@@ -35,7 +35,7 @@ android {
 
 dependencies {
     // Add new dependencies
-    implementation "io.getstream:stream-chat-android-ui-components:4.6.0"
+    implementation "io.getstream:stream-chat-android-ui-components:4.7.0"
     implementation 'io.coil-kt:coil:1.1.1'
 
     implementation 'androidx.appcompat:appcompat:1.2.0'

samplejava/src/main/java/com/example/chattutorial/ChannelActivity.java

@@ -56,7 +56,7 @@ protected void onCreate(@Nullable Bundle savedInstanceState) {
         MessageListViewModel messageListViewModel = provider.get(MessageListViewModel.class);
         MessageInputViewModel messageInputViewModel = provider.get(MessageInputViewModel.class);
 
-        // TODO set custom Imgur ViewHolderFactory
+        // TODO set custom Imgur attachment factory
 
         // Step 2 - Bind the view and ViewModels, they are loosely coupled so it's easy to customize
         MessageListHeaderViewModelBinding.bind(messageListHeaderViewModel, binding.messageListHeaderView, this);

samplejava/src/main/java/com/example/chattutorial/ChannelActivity2.java

@@ -56,8 +56,8 @@ protected void onCreate(@Nullable Bundle savedInstanceState) {
         MessageListViewModel messageListViewModel = provider.get(MessageListViewModel.class);
         MessageInputViewModel messageInputViewModel = provider.get(MessageInputViewModel.class);
 
-        // Set view holder factory for Imgur attachments
-        binding.messageListView.setMessageViewHolderFactory(new ImgurAttachmentViewHolderFactory());
+        // Set view factory for Imgur attachments
+        binding.messageListView.setAttachmentViewFactory(new ImgurAttachmentViewFactory());
 
         // Step 2 - Bind the view and ViewModels, they are loosely coupled so it's easy to customize
         MessageListHeaderViewModelBinding.bind(messageListHeaderViewModel, binding.messageListHeaderView, this);

samplejava/src/main/java/com/example/chattutorial/ChannelActivity3.java

@@ -64,8 +64,8 @@ protected void onCreate(@Nullable Bundle savedInstanceState) {
         MessageListViewModel messageListViewModel = provider.get(MessageListViewModel.class);
         MessageInputViewModel messageInputViewModel = provider.get(MessageInputViewModel.class);
 
-        // Set custom AttachmentViewHolderFactory
-        binding.messageListView.setMessageViewHolderFactory(new ImgurAttachmentViewHolderFactory());
+        // Set view factory for Imgur attachments
+        binding.messageListView.setAttachmentViewFactory(new ImgurAttachmentViewFactory());
 
         // Step 2 - Bind the view and ViewModels, they are loosely coupled so it's easy to customize
         MessageListHeaderViewModelBinding.bind(messageListHeaderViewModel, binding.messageListHeaderView, this);

samplejava/src/main/java/com/example/chattutorial/ChannelActivity4.java

@@ -65,8 +65,8 @@ protected void onCreate(@Nullable Bundle savedInstanceState) {
         MessageListViewModel messageListViewModel = provider.get(MessageListViewModel.class);
         MessageInputViewModel messageInputViewModel = provider.get(MessageInputViewModel.class);
 
-        // Set custom AttachmentViewHolderFactory
-        binding.messageListView.setMessageViewHolderFactory(new ImgurAttachmentViewHolderFactory());
+        // Set view factory for Imgur attachments
+        binding.messageListView.setAttachmentViewFactory(new ImgurAttachmentViewFactory());
 
         // Step 2 - Bind the view and ViewModels, they are loosely coupled so it's easy to customize
         MessageListHeaderViewModelBinding.bind(messageListHeaderViewModel, binding.messageListHeaderView, this);

samplejava/src/main/java/com/example/chattutorial/ImgurAttachmentViewFactory.java

@@ -0,0 +1,67 @@
+package com.example.chattutorial;
+
+import android.view.LayoutInflater;
+import android.view.View;
+import android.view.ViewGroup;
+
+import com.example.chattutorial.databinding.AttachmentImgurBinding;
+import com.getstream.sdk.chat.adapter.MessageListItem;
+import com.google.android.material.shape.ShapeAppearanceModel;
+
+import org.jetbrains.annotations.NotNull;
+
+import coil.Coil;
+import coil.request.ImageRequest;
+import io.getstream.chat.android.client.models.Attachment;
+import io.getstream.chat.android.ui.message.list.adapter.MessageListListenerContainer;
+import io.getstream.chat.android.ui.message.list.adapter.viewholder.attachment.AttachmentViewFactory;
+import io.getstream.chat.android.ui.message.list.internal.MessageListItemStyle;
+
+public class ImgurAttachmentViewFactory extends AttachmentViewFactory {
+
+    @NotNull
+    @Override
+    public View createAttachmentView(@NotNull MessageListItem.MessageItem data,
+                                     @NotNull MessageListListenerContainer listeners,
+                                     @NotNull MessageListItemStyle style,
+                                     @NotNull ViewGroup parent) {
+        Attachment imgurAttachment = null;
+        for (Attachment attachment : data.getMessage().getAttachments()) {
+            String imageUrl = attachment.getImageUrl();
+            if (imageUrl != null && imageUrl.contains("imgur")) {
+                imgurAttachment = attachment;
+                break;
+            }
+        }
+
+        if (imgurAttachment != null) {
+            return createImgurAttachmentView(imgurAttachment, parent);
+        } else {
+            return super.createAttachmentView(data, listeners, style, parent);
+        }
+    }
+
+    private View createImgurAttachmentView(Attachment imgurAttachment, ViewGroup parent) {
+        AttachmentImgurBinding binding = AttachmentImgurBinding.inflate(LayoutInflater.from(parent.getContext()), parent, false);
+
+        float cornerRadius = binding.getRoot()
+                .getResources()
+                .getDimension(R.dimen.stream_ui_selected_attachment_corner_radius);
+        ShapeAppearanceModel model = binding.ivMediaThumb.getShapeAppearanceModel()
+                .toBuilder()
+                .setAllCornerSizes(cornerRadius)
+                .build();
+        binding.ivMediaThumb.setShapeAppearanceModel(model);
+
+        ImageRequest imageRequest = new ImageRequest.Builder(parent.getContext())
+                .data(imgurAttachment.getImageUrl())
+                .allowHardware(false)
+                .crossfade(true)
+                .placeholder(R.drawable.stream_ui_picture_placeholder)
+                .target(binding.ivMediaThumb)
+                .build();
+        Coil.imageLoader(parent.getContext()).enqueue(imageRequest);
+
+        return binding.getRoot();
+    }
+}

samplejava/src/main/java/com/example/chattutorial/ImgurAttachmentViewHolder.java

@@ -11,9 +11,9 @@
 import org.jetbrains.annotations.Nullable;
 
 import io.getstream.chat.android.client.ChatClient;
+import io.getstream.chat.android.client.api.models.FilterObject;
 import io.getstream.chat.android.client.models.Filters;
 import io.getstream.chat.android.client.models.User;
-import io.getstream.chat.android.client.utils.FilterObject;
 import io.getstream.chat.android.livedata.ChatDomain;
 import io.getstream.chat.android.ui.channel.list.viewmodel.ChannelListViewModel;
 import io.getstream.chat.android.ui.channel.list.viewmodel.ChannelListViewModelBinding;