# Message Center inbox view

Show the complete Message Center inbox using the MessageCenterScreen composable in Jetpack Compose or the MessageCenterFragment in XML Views.

The inbox view shows the complete Message Center: the message list and, when a message is selected, its content. On large displays and foldables it uses an adaptive two-pane layout, showing the list and the selected message side by side.

## Jetpack Compose

`MessageCenterScreen` is the complete Message Center. Wrap it in a `MessageCenterTheme`, which provides the values the Message Center composables read for colors, typography, and options.


#### Jetpack Compose


```kotlin
import com.urbanairship.messagecenter.compose.ui.MessageCenterScreen
import com.urbanairship.messagecenter.compose.ui.rememberMessageCenterState
import com.urbanairship.messagecenter.compose.ui.theme.MessageCenterTheme

@Composable
fun MyMessageCenterScreen() {
    val state = rememberMessageCenterState()

    MessageCenterTheme {
        MessageCenterScreen(state = state)
    }
}
```




The composable accepts a modifier, the Message Center state, and navigation options:

```kotlin
@Composable
public fun MessageCenterScreen(
    modifier: Modifier = Modifier,
    state: MessageCenterState = rememberMessageCenterState(),
    showListNavigateUpIcon: Boolean = false,
    onNavigateUp: () -> Unit = {}
)
```


- `showListNavigateUpIcon`: Whether to show a navigate-up icon in the list pane.
- `onNavigateUp`: Called when the navigate-up icon is tapped.

### State and filtering

`rememberMessageCenterState` creates the state that binds the list and message panes together. Pass a predicate to filter the list, or a message ID to display a message on first composition:

```kotlin
val state = rememberMessageCenterState(
    predicate = Predicate { message -> message.title.contains("cool") }
)
```


Use the state to select or clear the displayed message programmatically:

```kotlin
state.selectMessage(messageId)
state.clearMessage()
```


### Theming

Wrap the screen in a `MessageCenterTheme` and pass colors, typography, and options. See [Applying a custom theme](https://www.airship.com/docs/developer/sdk-integration/android/message-center/getting-started/#applying-a-custom-theme) for the full set of theme values.

```kotlin
val options = MessageCenterOptions.defaults().copy(
    messageCenterListTitle = "Inbox",
    canDeleteMessages = true
)

MessageCenterTheme(
    colors = if (isSystemInDarkTheme()) darkColors else lightColors,
    options = options
) {
    MessageCenterScreen(state = state)
}
```


## XML Views

Embed `MessageCenterFragment` in any `FragmentActivity` or `Fragment`. Add it directly in your layout with a `FragmentContainerView`:

```xml
<androidx.fragment.app.FragmentContainerView
    android:id="@+id/fragment_container_view"
    android:name="com.urbanairship.messagecenter.ui.MessageCenterFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />
```


Or create it programmatically. Use `newInstance` to open the fragment directly to a message:


#### Kotlin


```kotlin
// Show the message list
val fragment = MessageCenterFragment.newInstance(null)

// Or open directly to a message
val fragment = MessageCenterFragment.newInstance(messageId)
```



#### Java


```java
MessageCenterFragment fragment = MessageCenterFragment.newInstance(null);
```




To filter the list, set `listPredicate`:

```kotlin
fragment.listPredicate = Predicate { message -> message.title.contains("cool") }
```


The fragment uses a sliding pane layout that automatically supports single-pane and two-pane layouts on large displays and foldables. Right-to-left layout is supported when `android:supportsRtl="true"` is set in your manifest.

To respond to Message Center events, set a `Listener`:

```kotlin
fragment.listener = object : MessageCenterFragment.Listener {
    override fun onShowMessage(message: Message): Boolean {
        // Return true if you handled displaying the message,
        // or false to use the default message view
        return false
    }

    override fun onListEditModeChanged(isEditing: Boolean) {}
    override fun onCloseMessage() {}
    override fun onMessageLoaded(message: Message) {}
    override fun onMessageLoadError(error: MessageViewState.Error.Type) {}
}
```


To navigate to your embedded fragment instead of letting the SDK launch its own activity, [handle display requests](https://www.airship.com/docs/developer/sdk-integration/android/message-center/custom/#handling-display-requests).