Message Center list view

Show the Message Center message list on its own using the MessageCenterList composable in Jetpack Compose or the MessageCenterListFragment in XML Views.

View as Markdown

The list view shows the Message Center inbox without the message detail. Use it when you provide your own message display, or when you want the list in one part of your app and the message in another. Handle selection yourself, typically by presenting a message view.

Jetpack Compose

Two composables are available. MessageCenterListScreen includes a top bar and edit toolbar. MessageCenterList provides only the list content and edit toolbar, so you supply the top bar.

import com.urbanairship.messagecenter.compose.ui.MessageCenterListScreen
import com.urbanairship.messagecenter.compose.ui.rememberMessageCenterListState
import com.urbanairship.messagecenter.compose.ui.theme.MessageCenterTheme

@Composable
fun MyListScreen(onMessageSelected: (Message) -> Unit) {
    val state = rememberMessageCenterListState()

    MessageCenterTheme {
        MessageCenterListScreen(
            state = state,
            onMessageSelected = onMessageSelected
        )
    }
}

MessageCenterListScreen

@Composable
public fun MessageCenterListScreen(
    modifier: Modifier = Modifier,
    state: MessageCenterListState = rememberMessageCenterListState(),
    topBar: @Composable ((onNavigateUp: () -> Unit) -> Unit)? = null,
    onNavigateUp: () -> Unit = { },
    onMessageSelected: (Message) -> Unit,
)

MessageCenterList

@Composable
public fun MessageCenterList(
    state: MessageCenterListState = rememberMessageCenterListState(),
    onMessageClick: (Message) -> Unit,
    modifier: Modifier = Modifier,
)

Both composables render the loading, error, empty, and content states, pull-to-refresh, and the edit toolbar for selecting, marking read, and deleting messages. When topBar is null, MessageCenterListScreen uses a default top bar.

Pass a predicate to filter the list, or a highlighted message ID to mark the selected message in a two-pane layout:

val state = rememberMessageCenterListState(
    predicate = Predicate { message -> message.title.contains("cool") },
    highlightedMessageId = selectedMessageId
)

XML Views

Subclass MessageCenterListFragment and set an onMessageClickListener to handle message selection. This example uses Jetpack Navigation, but any navigation method works.

class CustomMessageListFragment : MessageCenterListFragment() {

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)

        val toolbar = view.findViewById<Toolbar>(R.id.toolbar)
        toolbar.inflateMenu(messageCenterR.menu.ua_message_center_list_pane_menu)
        setupWithNavController(toolbar, findNavController())

        onMessageClickListener = OnMessageClickListener { message ->
            // Navigate to the message fragment
            findNavController().navigate(
                R.id.action_messageCenterFragment_to_messageFragment,
                bundleOf(
                    MessageCenterMessageFragment.ARG_MESSAGE_ID to message.id,
                    MessageCenterMessageFragment.ARG_MESSAGE_TITLE to message.title
                )
            )
        }
    }
}

To filter the list, set predicate:

predicate = Predicate { message -> message.title.contains("cool") }

Embed the fragment with a FragmentContainerView or through the FragmentManager, then handle display requests to navigate to it instead of letting the SDK launch its own activity.