Customization

The Customizations section of the OpenWeb Android SDK empowers developers to tailor the user interface and interaction elements to align with their brand identity and user experience goals.

By leveraging the customization APIs, publishers can:

• Define sorting behaviors and labels for comment threads.
• Control the theme (light, dark, or custom) to match the application's aesthetic.
• Customize the appearance of comment actions, such as button colors and fonts.
• Add accessory views to extend or enhance predefined UI components.
• Integrate Giphy for engaging gif selections within comments.

Customizations are handled through a set of structured APIs under the OWCustomizations interface, offering flexibility and ease of integration without compromising the core functionality of the SDK.

This section guides you through key customization capabilities, with examples and references to ensure seamless implementation.

Sorting

Sorting options let you customize the initial sorting order and labels for comment threads.

• initialSortOption: Specifies the default sorting order. Possible values include:

  • BEST: (Default).
  • NEWEST
  • OLDEST

• setTitle(title: String, sortOption: OWSortOption): Assigns a custom title for a sort option.

Example:

val sortingCustomizations: OWSortingCustomizations = OpenWeb.manager.ui.customizations.sorting

// Set the default sorting option to NEWEST
sortingCustomizations.initialSortOption = OWSortOption.NEWEST

// Customize the title for "BEST"
sortingCustomizations.setTitle("Top Comments", OWSortOption.BEST)

Theme

With the OpenWeb SDK, you can define light, dark, or fully customized themes to match your application's design.

Theme Enforcement

Theme Enforcement allows developers to set the theme mode and customize the color scheme for dark mode.

• themeMode: Defines the theme mode. Options include:

  • LIGHT (Default)
  • DARK

• darkColor: Allows setting a custom dark color scheme.

Example:

val customizations = OpenWeb.manager.ui.customizations

// Enable dark mode
customizations.themeEnforcement.themeMode = OWThemeMode.DARK

Customized Theme

Customized Theme provides complete control over colors for both light and dark modes. Developers can specify colors for various UI components using the OWTheme class.

Warning

When customizing an OWTheme property, both lightColor and darkColor must be defined.

Example:

customizations.customizedTheme = OWTheme(
    primaryBackgroundColor = UIColor(0xFF000000),
    secondaryTextColor = UIColor(0xFF888888),
    brandColor = UIColor(0xFFFF5722)
)

Comment Action

Control the appearance of comment action buttons, such as their colors and fonts.

• commentActionsButtonsColor: Options include:

  • DEFAULT
  • BRAND_COLOR

• commentActionsButtonsFont: Options include:

  • DEFAULT
  • SEMI_BOLD

Example:

val customizations = OpenWeb.manager.ui.customizations

// Customize comment action buttons
customizations.commentActions = OWCommentActionsCustomizations(
    commentActionsButtonsColor = CommentActionsButtonsColor.BRAND_COLOR,
    commentActionsButtonsFont = CommentActionsButtonsFont.SEMI_BOLD
)

Font Family

Customize the font style used throughout the SDK's UI components.

• fontFamily: Represents a font style resource ID that can be applied globally to text elements in the SDK.

Example:

val customizations = OpenWeb.manager.ui.customizations

// Set a custom font family
customizations.fontFamily.styleResId = R.font.my_custom_font

Accessory Views

Extend or replace predefined UI elements using accessory views.

• setAccessoryViewProvider(viewProvider: OWAccessoryViewProvider): Registers a custom view provider for the SDK.

Example:

customizations.setAccessoryViewProvider(object : OWAccessoryViewProvider {
    override fun provideView(
        viewType: OWAccessoryViewType,
        inflater: LayoutInflater,
        parent: ViewGroup?
    ): View? {
        if (viewType == OWAccessoryViewType.BottomToolbar) {
            return inflater.inflate(R.layout.custom_toolbar, parent, false)
        }
        return null
    }
})

Giphy Integration

Enable users to select and share GIFs using the Giphy SDK.

• setGiphyProvider(giphyProvider: SpotGiphyProvider): Connects the OpenWeb SDK with the Giphy SDK.

Example:

customizations.setGiphyProvider(object : SpotGiphyProvider {
    override fun configure(activityContext: Context, sdkKey: String) {
        // Giphy configuration logic
    }

    override fun showGiphyDialogFragment(
        giphySetting: GiphySetting,
        fragmentManager: FragmentManager,
        fragmentTag: String,
        selectionListener: GifSelectionListener
    ) {
        // Show the Giphy dialog fragment
    }
})

Custom UI Delegate

You can customize individual UI components by implementing a custom delegate.

• setCustomUIDelegate(customUIDelegate: CustomUIDelegate): Allows customization of specific views within the SDK.

Example:

customizations.setCustomUIDelegate(object : CustomUIDelegate {
    override fun customizeView(
        viewType: CustomizableViewType,
        view: View,
        isDarkModeEnabled: Boolean,
        postId: OWPostId
    ) {
        if (viewType == CustomizableViewType.NAVIGATION_TITLE_TEXT_VIEW) {
            (view as? TextView)?.apply {
                text = "Custom Navigation Title"
                setTextColor(Color.RED)
            }
        }
    }
})

Navigation Bar Color

• setUseWhiteNavigationColor(useWhiteNavigationColor: Boolean): Configures the navigation bar color to white.

Example:

customizations.setUseWhiteNavigationColor(true)

For additional examples or advanced use cases, refer to the specific customization APIs in the reference section.