Message Center message view

Show a single Message Center message using the MessageCenterMessage composable in Jetpack Compose or the MessageCenterMessageFragment in XML Views.

View as Markdown

The message view shows a single Message Center message. Use it alongside your own list view, or to deep link directly to a message.

Jetpack Compose

Two composables are available. MessageCenterMessageScreen includes a top bar with a delete action. MessageCenterMessage provides only the message content, so you supply the top bar.

import com.urbanairship.messagecenter.compose.ui.MessageCenterMessageScreen
import com.urbanairship.messagecenter.compose.ui.rememberMessageCenterMessageState
import com.urbanairship.messagecenter.compose.ui.theme.MessageCenterTheme

@Composable
fun MyMessageScreen(messageId: String, onClose: () -> Unit) {
    val state = rememberMessageCenterMessageState(messageId = messageId)

    MessageCenterTheme {
        MessageCenterMessageScreen(
            state = state,
            onClose = onClose
        )
    }
}

MessageCenterMessageScreen

@Composable
public fun MessageCenterMessageScreen(
    modifier: Modifier = Modifier,
    state: MessageCenterMessageState = rememberMessageCenterMessageState(),
    topBar: @Composable ((title: String?, scrollBehavior: TopAppBarScrollBehavior, onNavigateUp: () -> Unit) -> Unit)? = null,
    onNavigateUp: () -> Unit = { },
    onClose: () -> Unit = { }
)

MessageCenterMessage

@Composable
public fun MessageCenterMessage(
    state: MessageCenterMessageState,
    modifier: Modifier = Modifier,
    onClose: () -> Unit,
)

onClose: Called when the message is closed. MessageCenterMessageScreen also uses it as the delete callback.
topBar: An optional top bar. When null, MessageCenterMessageScreen uses a default top bar with a delete action, which respects the canDeleteMessages theme option.

Set the message to display through the state. Update messageId to load a different message:

val state = rememberMessageCenterMessageState()
state.messageId = messageId

XML Views

Subclass MessageCenterMessageFragment and set an onMessageDeletedListener to handle deletion. This example uses Jetpack Navigation, but any navigation method works.

class CustomMessageFragment : MessageCenterMessageFragment(R.layout.fragment_inbox_message) {

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

        toolbar?.run {
            inflateMenu(messageCenterR.menu.ua_message_center_message_pane_menu)
            setupWithNavController(this, findNavController(view))
        }

        onMessageDeletedListener = OnMessageDeletedListener { message ->
            // Navigate back to the list after deletion
            findNavController().popBackStack()
        }
    }
}

Create the fragment with newInstance, passing the message ID and, optionally, a title to show until the message loads:

val fragment = MessageCenterMessageFragment.newInstance(messageId, messageTitle)

MessageCenterMessageFragment fragment =
    MessageCenterMessageFragment.newInstance(messageId, messageTitle);

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.