# Message Center message view

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

The message view shows a single Message Center message. Use it alongside your own [list view](https://www.airship.com/docs/developer/sdk-integration/android/message-center/custom/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.


#### Jetpack Compose


```kotlin
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**

```kotlin
@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**

```kotlin
@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](https://www.airship.com/docs/developer/sdk-integration/android/message-center/getting-started/#applying-a-custom-theme).

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

```kotlin
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.

```kotlin
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:


#### Kotlin


```kotlin
val fragment = MessageCenterMessageFragment.newInstance(messageId, messageTitle)
```



#### Java


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




Embed the fragment with a `FragmentContainerView` or through the `FragmentManager`, then [handle display requests](https://www.airship.com/docs/developer/sdk-integration/android/message-center/custom/#handling-display-requests) to navigate to it instead of letting the SDK launch its own activity.