Message Center inbox view

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.

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:

@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:

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

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

state.selectMessage(messageId)
state.clearMessage()

Theming

Wrap the screen in a MessageCenterTheme and pass colors, typography, and options. See Applying a custom theme for the full set of theme values.

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:

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

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

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

MessageCenterFragment fragment = MessageCenterFragment.newInstance(null);

To filter the list, set listPredicate:

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:

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.