# Preference Center Implement Preference Centers to allow users to manage their subscription preferences, including display, theming, and embedding options. # Preference Center > Display Preference Centers using the Airship UI, which automatically handles user preferences and syncs with the Airship backend. ![Preference Center on Android](https://www.airship.com/docs/images/preference-center-android_hu_84f8445eff5c8fa8.webp) *Preference Center on Android* > **Important:** Airship Preference Centers are widgets that can be embedded in a page in an app or website. Please verify with your legal team that your full Preference Center page, including any web page for email Preference Centers, is compliant with local privacy regulations. The Preference Center feature allows users to manage their subscription list preferences as configured in the Airship Dashboard. Airship provides two distinct modules for displaying Preference Centers on Android, depending on your app's UI framework: - **`urbanairship-preference-center-compose`**: Provides Compose-based Preference Center UI components, for apps built with Jetpack Compose. - **`urbanairship-preference-center`**: Provides XML-based Preference Center UI components, for apps using traditional Android Views (XML layouts). You should select only one module based on your UI framework—do not include both modules in the same app. For more information about configuring Preference Centers, see the [Preference Center user guide](https://www.airship.com/docs/guides/messaging/features/preference-centers/). ## Installation Include the correct module for your chosen UI framework: #### Jetpack Compose ```kotlin dependencies { val airshipVersion = "androidSdkVersion" implementation("com.urbanairship.android:urbanairship-preference-center-compose:$airshipVersion") } ``` #### XML Views ```kotlin dependencies { val airshipVersion = "androidSdkVersion" implementation("com.urbanairship.android:urbanairship-preference-center:$airshipVersion") } ``` ## Displaying a Preference Center Display a Preference Center with a single method call. The Preference Center will be launched in its own Activity over your app, allowing users to manage their subscription preferences, and automatically syncing changes with Airship. #### Kotlin ```kotlin Airship.preferenceCenter.open("my-first-pref-center") ``` #### Java ```java PreferenceCenter.shared().open("my-first-pref-center"); ``` > **Note:** To embed the Preference Center directly in your app's navigation instead of displaying it as an overlay, see [Embedding the Preference Center](https://www.airship.com/docs/developer/sdk-integration/android/preference-center/embedding/). You can also [intercept display requests](#override-default-display-behavior) to handle navigation to your embedded Preference Center. ## Applying a Custom Theme You can customize the appearance of the Preference Center to match your app's style. Android supports theme customization through both Jetpack Compose and XML Views. #### Jetpack Compose To apply a custom theme to the ready-to-use Preference Center UI, create a theme and set it on the `PreferenceCenter` instance early in your app's lifecycle. The overridden `onAirshipReady()` method in your Autopilot class is a good place to do this. **Customizing the theme with Jetpack Compose** ```kotlin // Configure Preference Center Theme val preferenceCenterTheme = PreferenceCenterTheme( lightColors = PreferenceCenterColors.lightDefaults( background = Color(0xDEDEDE), surface = Color(0xFFFFFF), accent = Color(0x6200EE), ), darkColors = PreferenceCenterColors.darkDefaults( background = Color(0x121212), surface = Color(0x1E1E1E), accent = Color(0xBB86FC), ), typography = PreferenceCenterTypography.defaults( fontFamily = FontFamily(context.resources.getFont(R.font.roboto_regular)) ) ) // Apply theme to default Preference Center UI Airship.preferenceCenter.theme = preferenceCenterTheme ``` #### XML Views The ready-to-use Preference Center UI uses the `UrbanAirship.PreferenceCenter` style. You can use xml resource merging to override the default styles, by defining the style in your app. **Extending from a Material3 app theme** ```xml ``` If your app doesn't use a `Material3` theme or you need the ability to further customize preference center styles, The Android resource merging feature can be used to override the default styles that the SDK provides. Copy the [style sheet](https://github.com/urbanairship/android-library/blob/master/urbanairship-preference-center/src/main/res/values/style_preference_center.xml) into the application's resource directory, then change any of the styles. # 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`.