How to add bottom inset to the ListView in the Conversation List

[elliot-choic]

Versions

Summary

This guide shows how to apply bottom inset (padding or margin) to the ListView in the ConversationList screen. This is useful when you need visual spacing between the last conversation item and the footer.

Guide & Snippet

iOS

Header

• Description

   // code block

Android

Steps to Add Bottom Inset to ListView

1. Create a Custom ConversationListModule

To apply a bottom margin to the ListView, extend ConversationListModule and override onCreateContentView.
Wrap the list inside a FrameLayout and apply bottom margin via LayoutParams.

class CustomConversationListModule(
    context: Context,
    currentTheme: MessengerTheme,
    currentThemeMode: MessengerThemeMode,
    settings: MessengerSettings?,
    args: Bundle,
) : ConversationListModule(
    context,
    currentTheme,
    currentThemeMode,
    settings,
    args
) {
    override fun onCreateContentView(context: Context, inflater: LayoutInflater, args: Bundle?): View {
        return LinearLayout(context).apply {
            orientation = LinearLayout.VERTICAL
            layoutParams = LinearLayout.LayoutParams(
                LinearLayout.LayoutParams.MATCH_PARENT,
                LinearLayout.LayoutParams.MATCH_PARENT
            )
            if (params.isUsingHeader) {
                addView(headerComponent.onCreateView(context, inflater, this, args))
            }
            addView(FrameLayout(context).apply {
                layoutParams = LinearLayout.LayoutParams(
                    LinearLayout.LayoutParams.MATCH_PARENT,
                    0,
                    1f
                ).apply {
                    setMargins(0, 0, 0, 20) // <-- Apply bottom inset here
                }
                addView(listComponent.onCreateView(context, inflater, this, args))
                addView(statusFrameComponent.onCreateView(context, inflater, this, args))
            })
            addView(footerComponent.onCreateView(context, inflater, this, args))
        }
    }
}

2. Register the Custom Module in AIAgentModuleProviders

You must register the custom module before launching the messenger.

object CustomAIAgentProvider {
    fun register() {
        AIAgentModuleProviders.conversationList = ConversationListModuleProvider { context, currentTheme, currentThemeMode, settings, args ->
            CustomConversationListModule(
                context,
                currentTheme,
                currentThemeMode,
                settings,
                args
            )
        }
    }
}

JS

Header

• Description

   // code block

Reference

No response

Screenshots

No response