# Embed the Preference Center

Embed the Preference Center view directly in your app's navigation instead of displaying it as an overlay.

This guide covers advanced Preference Center customization options, from styling the default UI to creating fully custom implementations.

## Handling Display Requests

To use a custom Preference Center implementation or navigate to your embedded Preference Center instead of the default activity, set a listener to handle showing your custom UI:


#### Kotlin


Set the `PreferenceCenterOpenListener` during the [onAirshipReady callback](https://www.airship.com/docs/developer/sdk-integration/android/installation/getting-started/).

```kotlin
Airship.preferenceCenter.openListener = object : PreferenceCenter.OnOpenListener {
    override fun onOpenPreferenceCenter(preferenceCenterId: String): Boolean {
        // Navigate to custom preference center UI

        // true to prevent default behavior
        // false for default Airship handling
        return true
    }
}
```



#### Java


Set the `PreferenceCenterOpenListener` during the [onAirshipReady callback](https://www.airship.com/docs/developer/sdk-integration/android/installation/getting-started/).

```java
PreferenceCenter.shared().setOpenListener(preferenceCenterId -> {
    // Navigate to custom preference center UI

    // true to prevent default behavior
    // false for default Airship handling
    return true;
});
```




## Embedding with Jetpack Compose

When embedding Preference Center composables, you can choose between an all-in-one screen with a customizable top bar and a content-only Preference Center view, without a top bar.

Both composables must be wrapped in a `PreferenceCenterTheme`, which allows the theme to be customized.

**PreferenceCenterScreen**

```kotlin
PreferenceCenterTheme {
    PreferenceCenterScreen(identifier = "my-first-pref-center")
}
```


**PreferenceCenterContent**

```kotlin
PreferenceCenterTheme {
    PreferenceCenterContent(identifier = "my-first-pref-center")
}
```


**Customizing the theme**

```kotlin
val lightColors = PreferenceCenterColors.lightDefaults(
    background = Color(0xDEDEDE),
    surface = Color(0xFFFFFF),
    accent = Color(0x6200EE),
)

val darkColors = PreferenceCenterColors.darkDefaults(
    background = Color(0x121212),
    surface = Color(0x1E1E1E),
    accent = Color(0xBB86FC),
)

val typography = PreferenceCenterTypography.defaults(
    fontFamily = FontFamily(context.resources.getFont(R.font.roboto_regular))
)

PreferenceCenterTheme(
    colors = if (isSystemInDarkTheme()) darkColors else lightColors,
    typography = typography
) {
    // PreferenceCenterScreen OR PreferenceCenterContent
}
```


## Embedding with XML Views

When embedding the PreferenceCenterFragment, either use a [FragmentContainerView](https://developer.android.com/reference/androidx/fragment/app/FragmentContainerView) or create the fragment directly. You must specify the ID of the Preference center to be displayed when creating the fragment. The static `create` on `PreferenceCenter` will handle passing the given id to the fragment as an argument:


#### Kotlin


```kotlin
val fragment = PreferenceCenterFragment.create(preferenceCenterId = "my-first-pref-center")
```



#### Java


```java
PreferenceCenterFragment fragment = PreferenceCenterFragment.create("my-first-pref-center");
```




You will need to [override the open behavior](#override-default-display-behavior) to navigate to the embedded fragment instead of letting Airship launch the `PreferenceCenterActivity`.