[i117] Extend channel list screen styling (#4944)

* [i117] Extend channel list screen styling * add CHANGELOG
GetStream · Sep 5, 2023 · 674dd55 · 674dd55
1 parent b13a0f0
commit 674dd55
Show file tree

Hide file tree

Showing 46 changed files with 578 additions and 92 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -59,6 +59,7 @@
 ### 🐞 Fixed
 
 ### ⬆️ Improved
+- Extended channel list screen styling. [#4944](https://github.com/GetStream/stream-chat-android/pull/4944)
 
 ### ✅ Added
 

diff --git a/stream-chat-android-ui-components/api/stream-chat-android-ui-components.api b/stream-chat-android-ui-components/api/stream-chat-android-ui-components.api
diff --git a/stream-chat-android-ui-components/detekt-baseline.xml b/stream-chat-android-ui-components/detekt-baseline.xml
@@ -32,6 +32,7 @@
     <ID>LongMethod:MessageOptionItemsFactory.kt$DefaultMessageOptionItemsFactory$override fun createMessageOptionItems( selectedMessage: Message, currentUser: User?, isInThread: Boolean, ownCapabilities: Set&lt;String>, style: MessageListViewStyle, ): List&lt;MessageOptionItem></ID>
     <ID>LongMethod:MessageReplyStyle.kt$MessageReplyStyle.Companion$operator fun invoke(attributes: TypedArray, context: Context): MessageReplyStyle</ID>
     <ID>LongMethod:PinnedMessageListViewStyle.kt$PinnedMessageListViewStyle.Companion$operator fun invoke(context: Context, attrs: AttributeSet?): PinnedMessageListViewStyle</ID>
+    <ID>LongMethod:SearchInputViewStyle.kt$SearchInputViewStyle.Companion$operator fun invoke(context: Context, attrs: AttributeSet?): SearchInputViewStyle</ID>
     <ID>LongMethod:SearchResultListViewStyle.kt$SearchResultListViewStyle.Companion$operator fun invoke(context: Context, attrs: AttributeSet?): SearchResultListViewStyle</ID>
     <ID>LongMethod:SwipeViewHolder.kt$SwipeViewHolder$@SuppressLint("ClickableViewAccessibility") public fun setSwipeListener(view: View, swipeListener: ChannelListView.SwipeListener?)</ID>
     <ID>LongParameterList:EditReactionsBubbleDrawer.kt$EditReactionsBubbleDrawer$( context: Context, canvas: Canvas, bubbleWidth: Int, bubbleHeight: Int, isMyMessage: Boolean, isSingleReaction: Boolean, messageAnchorPosition: Float, canvasBounds: IntRange, )</ID>
@@ -81,6 +82,7 @@
     <ID>MaxLineLength:AutoLinkableTextTransformer.kt$AutoLinkableTextTransformer$*</ID>
     <ID>MaxLineLength:AvatarDecorator.kt$AvatarDecorator$setupAvatar(getAvatarView(viewHolder.binding.userAvatarMineView, viewHolder.binding.userAvatarView, data.isMine), data)</ID>
     <ID>MaxLineLength:ChannelActionsDialogViewStyle.kt$ChannelActionsDialogViewStyle$*</ID>
+    <ID>MaxLineLength:ChannelListFragmentViewStyle.kt$ChannelListFragmentViewStyle$*</ID>
     <ID>MaxLineLength:ChannelListIconProviderContainerImpl.kt$ChannelListIconProviderContainerImpl$override</ID>
     <ID>MaxLineLength:ChannelListView.kt$ChannelListView$is ChannelListViewModel.ErrorEvent.DeleteChannelError -> R.string.stream_ui_channel_list_error_delete_channel</ID>
     <ID>MaxLineLength:ChannelListViewModel.kt$ChannelListViewModel$*</ID>

diff --git a/...ents/src/main/kotlin/io/getstream/chat/android/ui/feature/channels/ChannelListFragment.kt b/...ents/src/main/kotlin/io/getstream/chat/android/ui/feature/channels/ChannelListFragment.kt
@@ -25,6 +25,7 @@ import android.view.ViewGroup
 import androidx.annotation.StyleRes
 import androidx.core.os.bundleOf
 import androidx.core.view.isVisible
+import androidx.core.view.updateLayoutParams
 import androidx.fragment.app.Fragment
 import androidx.fragment.app.viewModels
 import io.getstream.chat.android.models.Channel
@@ -34,6 +35,7 @@ import io.getstream.chat.android.models.querysort.QuerySorter
 import io.getstream.chat.android.ui.common.utils.Utils
 import io.getstream.chat.android.ui.databinding.StreamUiFragmentChannelListBinding
 import io.getstream.chat.android.ui.feature.channels.header.ChannelListHeaderView
+import io.getstream.chat.android.ui.feature.channels.list.ChannelListFragmentViewStyle
 import io.getstream.chat.android.ui.feature.channels.list.ChannelListView
 import io.getstream.chat.android.ui.feature.messages.MessageListActivity
 import io.getstream.chat.android.ui.feature.search.SearchInputView
@@ -69,6 +71,7 @@ public open class ChannelListFragment : Fragment() {
     protected val channelListViewModel: ChannelListViewModel by viewModels { createChannelListViewModelFactory() }
     protected val searchViewModel: SearchViewModel by viewModels()
 
+    protected lateinit var style: ChannelListFragmentViewStyle
     protected var headerUserAvatarClickListener: HeaderUserAvatarClickListener? = null
     protected var headerActionButtonClickListener: HeaderActionButtonClickListener? = null
     protected var channelListItemClickListener: ChannelListItemClickListener? = null
@@ -79,6 +82,7 @@ public open class ChannelListFragment : Fragment() {
 
     override fun onAttach(context: Context) {
         super.onAttach(context)
+        this.style = ChannelListFragmentViewStyle(context)
         headerUserAvatarClickListener = findListener()
         headerActionButtonClickListener = findListener()
         channelListItemClickListener = findListener()
@@ -105,6 +109,16 @@ public open class ChannelListFragment : Fragment() {
         setupChannelList(binding.channelListView)
         setupSearchInput(binding.searchInputView)
         setupSearchResultList(binding.searchResultListView)
+        applyStyle(style)
+    }
+
+    protected open fun applyStyle(style: ChannelListFragmentViewStyle) {
+        binding.searchInputView.updateLayoutParams<ViewGroup.MarginLayoutParams> {
+            topMargin = style.searchInputMarginTop
+            bottomMargin = style.searchInputMarginBottom
+            marginStart = style.searchInputMarginStart
+            marginEnd = style.searchInputMarginEnd
+        }
     }
 
     /**

diff --git a/...in/io/getstream/chat/android/ui/feature/channels/actions/ChannelActionsDialogViewStyle.kt b/...in/io/getstream/chat/android/ui/feature/channels/actions/ChannelActionsDialogViewStyle.kt
@@ -24,6 +24,7 @@ import io.getstream.chat.android.ui.R
 import io.getstream.chat.android.ui.feature.channels.actions.internal.ChannelActionsDialogFragment
 import io.getstream.chat.android.ui.font.TextStyle
 import io.getstream.chat.android.ui.helper.TransformStyle
+import io.getstream.chat.android.ui.helper.ViewStyle
 import io.getstream.chat.android.ui.utils.extensions.getColorCompat
 import io.getstream.chat.android.ui.utils.extensions.getDimension
 import io.getstream.chat.android.ui.utils.extensions.getDrawableCompat
@@ -61,7 +62,7 @@ public data class ChannelActionsDialogViewStyle(
     public val cancelIcon: Drawable,
     public val cancelEnabled: Boolean,
     public val background: Drawable,
-) {
+) : ViewStyle {
     internal companion object {
         operator fun invoke(context: Context, attrs: AttributeSet?): ChannelActionsDialogViewStyle {
             context.obtainStyledAttributes(

diff --git a/...kotlin/io/getstream/chat/android/ui/feature/channels/list/ChannelListFragmentViewStyle.kt b/...kotlin/io/getstream/chat/android/ui/feature/channels/list/ChannelListFragmentViewStyle.kt
@@ -0,0 +1,58 @@
+/*
+ * Copyright (c) 2014-2022 Stream.io Inc. All rights reserved.
+ *
+ * Licensed under the Stream License;
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    https://github.com/GetStream/stream-chat-android/blob/main/LICENSE
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package io.getstream.chat.android.ui.feature.channels.list
+
+import android.content.Context
+import androidx.annotation.Px
+import io.getstream.chat.android.ui.R
+import io.getstream.chat.android.ui.feature.channels.ChannelListFragment
+import io.getstream.chat.android.ui.helper.TransformStyle
+import io.getstream.chat.android.ui.helper.ViewStyle
+import io.getstream.chat.android.ui.utils.extensions.getDimension
+
+/**
+ * Style for [ChannelListFragment].
+ * Use this class together with [TransformStyle.channelListFragmentStyleTransformer] to change [ChannelListFragment] styles programmatically.
+ *
+ * @property searchInputMarginStart The start margin of the search input.
+ * @property searchInputMarginTop The top margin of the search input.
+ * @property searchInputMarginEnd The end margin of the search input.
+ * @property searchInputMarginBottom The bottom margin of the search input.
+ */
+public data class ChannelListFragmentViewStyle(
+    @Px public val searchInputMarginStart: Int,
+    @Px public val searchInputMarginTop: Int,
+    @Px public val searchInputMarginEnd: Int,
+    @Px public val searchInputMarginBottom: Int,
+) : ViewStyle {
+
+    internal companion object {
+        operator fun invoke(context: Context): ChannelListFragmentViewStyle {
+            val searchInputMarginTop: Int = context.getDimension(R.dimen.stream_ui_channel_list_search_margin_top)
+            val searchInputMarginStart: Int = context.getDimension(R.dimen.stream_ui_channel_list_search_margin_start)
+            val searchInputMarginEnd: Int = context.getDimension(R.dimen.stream_ui_channel_list_search_margin_end)
+            val searchInputMarginBottom: Int = context.getDimension(R.dimen.stream_ui_channel_list_search_margin_bottom)
+
+            return ChannelListFragmentViewStyle(
+                searchInputMarginStart = searchInputMarginStart,
+                searchInputMarginTop = searchInputMarginTop,
+                searchInputMarginEnd = searchInputMarginEnd,
+                searchInputMarginBottom = searchInputMarginBottom,
+            ).let(TransformStyle.channelListFragmentStyleTransformer::transform)
+        }
+    }
+}
diff --git a/...rc/main/kotlin/io/getstream/chat/android/ui/feature/channels/list/ChannelListViewStyle.kt b/...rc/main/kotlin/io/getstream/chat/android/ui/feature/channels/list/ChannelListViewStyle.kt
@@ -22,11 +22,14 @@ import android.graphics.drawable.Drawable
 import android.util.AttributeSet
 import androidx.annotation.ColorInt
 import androidx.annotation.LayoutRes
+import androidx.annotation.Px
 import androidx.appcompat.content.res.AppCompatResources
+import androidx.core.content.res.ResourcesCompat
 import io.getstream.chat.android.ui.R
 import io.getstream.chat.android.ui.feature.channels.list.adapter.viewholder.internal.ChannelViewHolder
 import io.getstream.chat.android.ui.font.TextStyle
 import io.getstream.chat.android.ui.helper.TransformStyle
+import io.getstream.chat.android.ui.helper.ViewStyle
 import io.getstream.chat.android.ui.utils.extensions.getColorCompat
 import io.getstream.chat.android.ui.utils.extensions.getColorOrNull
 import io.getstream.chat.android.ui.utils.extensions.getDimension
@@ -60,6 +63,12 @@ import io.getstream.chat.android.ui.utils.extensions.use
  * @property edgeEffectColor Color applied to the [ChannelListView] edge effect. Pass null if you want to use default [android.R.attr.colorEdgeEffect]. Default value is null.
  * @property showChannelDeliveryStatusIndicator Flag if we need to show the delivery indicator or not.
  * @property readCountEnabled Enables/disables read count. Enabled by default.
+ * @property itemHeight Height of the channel list item. Default value is [R.dimen.stream_ui_channel_list_item_height].
+ * @property itemMarginStart Start margin of the channel list item. Default value is [R.dimen.stream_ui_channel_list_item_margin_start].
+ * @property itemMarginEnd End margin of the channel list item. Default value is [R.dimen.stream_ui_channel_list_item_margin_end].
+ * @property itemTitleMarginStart Start margin of the channel list item title. Default value is [R.dimen.stream_ui_channel_list_item_title_margin_start].
+ * @property itemVerticalSpacerHeight Height of the channel list item vertical spacer. Default value is [R.dimen.stream_ui_channel_list_item_vertical_spacer_height].
+ * @property itemVerticalSpacerPosition Position of the channel list item vertical spacer. Default value is [R.dimen.stream_ui_channel_list_item_vertical_spacer_position].
  */
 public data class ChannelListViewStyle(
     public val optionsIcon: Drawable,
@@ -86,7 +95,13 @@ public data class ChannelListViewStyle(
     @ColorInt public val edgeEffectColor: Int?,
     public val showChannelDeliveryStatusIndicator: Boolean,
     public val readCountEnabled: Boolean,
-) {
+    @Px public val itemHeight: Int,
+    @Px public val itemMarginStart: Int,
+    @Px public val itemMarginEnd: Int,
+    @Px public val itemTitleMarginStart: Int,
+    @Px public val itemVerticalSpacerHeight: Int,
+    @Px public val itemVerticalSpacerPosition: Float,
+) : ViewStyle {
 
     internal companion object {
         operator fun invoke(context: Context, attrs: AttributeSet?): ChannelListViewStyle {
@@ -258,6 +273,39 @@ public data class ChannelListViewStyle(
 
                 val edgeEffectColor = a.getColorOrNull(R.styleable.ChannelListView_streamUiEdgeEffectColor)
 
+                val itemHeight = a.getDimensionPixelSize(
+                    R.styleable.ChannelListView_streamUiChannelHeight,
+                    context.getDimension(R.dimen.stream_ui_channel_list_item_height),
+                )
+
+                val itemMarginStart = a.getDimensionPixelSize(
+                    R.styleable.ChannelListView_streamUiChannelMarginStart,
+                    context.getDimension(R.dimen.stream_ui_channel_list_item_margin_start),
+                )
+
+                val itemMarginEnd = a.getDimensionPixelSize(
+                    R.styleable.ChannelListView_streamUiChannelMarginEnd,
+                    context.getDimension(R.dimen.stream_ui_channel_list_item_margin_end),
+                )
+
+                val itemTitleMarginStart = a.getDimensionPixelSize(
+                    R.styleable.ChannelListView_streamUiChannelTitleMarginStart,
+                    context.getDimension(R.dimen.stream_ui_channel_list_item_title_margin_start),
+                )
+
+                val itemVerticalSpacerHeight = a.getDimensionPixelSize(
+                    R.styleable.ChannelListView_streamUiChannelVerticalSpacerHeight,
+                    context.getDimension(R.dimen.stream_ui_channel_list_item_vertical_spacer_height),
+                )
+
+                val itemVerticalSpacerPosition = a.getFloat(
+                    R.styleable.ChannelListView_streamUiChannelVerticalSpacerPosition,
+                    ResourcesCompat.getFloat(
+                        context.resources,
+                        R.dimen.stream_ui_channel_list_item_vertical_spacer_position,
+                    ),
+                )
+
                 return ChannelListViewStyle(
                     optionsIcon = optionsIcon,
                     deleteIcon = deleteIcon,
@@ -283,6 +331,12 @@ public data class ChannelListViewStyle(
                     edgeEffectColor = edgeEffectColor,
                     showChannelDeliveryStatusIndicator = showChannelDeliveryStatusIndicator,
                     readCountEnabled = readCountEnabled,
+                    itemHeight = itemHeight,
+                    itemMarginStart = itemMarginStart,
+                    itemMarginEnd = itemMarginEnd,
+                    itemTitleMarginStart = itemTitleMarginStart,
+                    itemVerticalSpacerHeight = itemVerticalSpacerHeight,
+                    itemVerticalSpacerPosition = itemVerticalSpacerPosition,
                 ).let(TransformStyle.channelListStyleTransformer::transform)
             }
         }

diff --git a/...am/chat/android/ui/feature/channels/list/adapter/viewholder/internal/ChannelViewHolder.kt b/...am/chat/android/ui/feature/channels/list/adapter/viewholder/internal/ChannelViewHolder.kt
@@ -19,8 +19,10 @@ package io.getstream.chat.android.ui.feature.channels.list.adapter.viewholder.in
 import android.content.res.ColorStateList
 import android.view.View
 import android.view.ViewGroup
+import android.view.ViewGroup.MarginLayoutParams
 import androidx.core.view.doOnNextLayout
 import androidx.core.view.isVisible
+import androidx.core.view.updateLayoutParams
 import io.getstream.chat.android.client.extensions.isAnonymousChannel
 import io.getstream.chat.android.models.Channel
 import io.getstream.chat.android.models.ChannelCapabilities
@@ -81,6 +83,9 @@ internal class ChannelViewHolder @JvmOverloads constructor(
 
     init {
         binding.apply {
+            channelItemView.updateLayoutParams {
+                height = style.itemHeight
+            }
             itemBackgroundView.apply {
                 moreOptionsImageView.setOnClickListener {
                     channelMoreOptionsListener.onClick(channel)
@@ -331,17 +336,40 @@ internal class ChannelViewHolder @JvmOverloads constructor(
 
     private fun StreamUiChannelListItemBackgroundViewBinding.applyStyle(style: ChannelListViewStyle) {
         root.setBackgroundColor(style.backgroundLayoutColor)
+        backgroundView.setBackgroundColor(style.backgroundLayoutColor)
+        backgroundView.updateLayoutParams {
+            height = style.itemHeight
+        }
         deleteImageView.setImageDrawable(style.deleteIcon)
         moreOptionsImageView.setImageDrawable(style.optionsIcon)
     }
 
     private fun StreamUiChannelListItemForegroundViewBinding.applyStyle(style: ChannelListViewStyle) {
-        root.backgroundTintList = ColorStateList.valueOf(style.foregroundLayoutColor)
+        foregroundView.backgroundTintList = ColorStateList.valueOf(style.foregroundLayoutColor)
+        foregroundView.updateLayoutParams {
+            height = style.itemHeight
+        }
         channelNameLabel.setTextStyle(style.channelTitleText)
         lastMessageLabel.setTextStyle(style.lastMessageText)
         lastMessageTimeLabel.setTextStyle(style.lastMessageDateText)
         unreadCountBadge.setTextStyle(style.unreadMessageCounterText)
         unreadCountBadge.backgroundTintList = ColorStateList.valueOf(style.unreadMessageCounterBackgroundColor)
         muteIcon.setImageDrawable(style.mutedChannelIcon)
+        channelAvatarView.updateLayoutParams<MarginLayoutParams> {
+            marginStart = style.itemMarginStart
+        }
+        lastMessageTimeLabel.updateLayoutParams<MarginLayoutParams> {
+            marginEnd = style.itemMarginEnd
+        }
+        unreadCountBadge.updateLayoutParams<MarginLayoutParams> {
+            marginEnd = style.itemMarginEnd
+        }
+        channelNameLabel.updateLayoutParams<MarginLayoutParams> {
+            marginStart = style.itemTitleMarginStart
+        }
+        spacer.updateLayoutParams {
+            height = style.itemVerticalSpacerHeight
+        }
+        guideline.setGuidelinePercent(style.itemVerticalSpacerPosition)
     }
 }
diff --git a/...in/kotlin/io/getstream/chat/android/ui/feature/gallery/AttachmentGalleryViewMediaStyle.kt b/...in/kotlin/io/getstream/chat/android/ui/feature/gallery/AttachmentGalleryViewMediaStyle.kt
@@ -25,6 +25,7 @@ import androidx.annotation.ColorInt
 import androidx.core.content.ContextCompat
 import io.getstream.chat.android.ui.R
 import io.getstream.chat.android.ui.helper.TransformStyle
+import io.getstream.chat.android.ui.helper.ViewStyle
 import io.getstream.chat.android.ui.utils.extensions.getColorCompat
 import io.getstream.chat.android.ui.utils.extensions.getColorOrNull
 import io.getstream.chat.android.ui.utils.extensions.getDimensionOrNull
@@ -68,7 +69,7 @@ public data class AttachmentGalleryViewMediaStyle(
     val viewMediaPlayVideoIconWidth: Int,
     val viewMediaPlayVideoIconHeight: Int,
     val imagePlaceholder: Drawable?,
-) {
+) : ViewStyle {
 
     internal companion object {
 

diff --git a/.../main/kotlin/io/getstream/chat/android/ui/feature/gallery/MediaAttachmentGridViewStyle.kt b/.../main/kotlin/io/getstream/chat/android/ui/feature/gallery/MediaAttachmentGridViewStyle.kt
@@ -25,6 +25,7 @@ import androidx.core.content.ContextCompat
 import io.getstream.chat.android.ui.R
 import io.getstream.chat.android.ui.feature.gallery.overview.MediaAttachmentGridView
 import io.getstream.chat.android.ui.helper.TransformStyle
+import io.getstream.chat.android.ui.helper.ViewStyle
 import io.getstream.chat.android.ui.utils.extensions.getColorCompat
 import io.getstream.chat.android.ui.utils.extensions.getColorOrNull
 import io.getstream.chat.android.ui.utils.extensions.getDimensionOrNull
@@ -67,7 +68,7 @@ public data class MediaAttachmentGridViewStyle(
     val playVideoIconPaddingStart: Int,
     val playVideoIconPaddingEnd: Int,
     val imagePlaceholder: Drawable?,
-) {
+) : ViewStyle {
     internal companion object {
 
         operator fun invoke(context: Context, attrs: AttributeSet?): MediaAttachmentGridViewStyle {

diff --git a/...io/getstream/chat/android/ui/feature/gallery/options/AttachmentGalleryOptionsViewStyle.kt b/...io/getstream/chat/android/ui/feature/gallery/options/AttachmentGalleryOptionsViewStyle.kt
@@ -27,6 +27,7 @@ import io.getstream.chat.android.ui.R
 import io.getstream.chat.android.ui.feature.gallery.AttachmentGalleryActivity
 import io.getstream.chat.android.ui.font.TextStyle
 import io.getstream.chat.android.ui.helper.TransformStyle
+import io.getstream.chat.android.ui.helper.ViewStyle
 import io.getstream.chat.android.ui.utils.extensions.getColorCompat
 import io.getstream.chat.android.ui.utils.extensions.getDimension
 import io.getstream.chat.android.ui.utils.extensions.getDrawableCompat
@@ -59,7 +60,7 @@ public data class AttachmentGalleryOptionsViewStyle(
     val deleteOptionEnabled: Boolean,
     val deleteOptionDrawable: Drawable,
     @ColorInt val deleteOptionTextColor: Int,
-) {
+) : ViewStyle {
 
     internal companion object {
         operator fun invoke(context: Context, attrs: AttributeSet?): AttachmentGalleryOptionsViewStyle {