The offerwall can be styled to sit naturally inside your app. The options differ a little by platform, so pick yours below.

UI Customization

With the new version, you will be able to customize the UI of the SDK and use your own brand colors, font types, and header banner. So, you can increase your users' experience.

AppsPrizeStyleConfig:

  • primaryColor: The primary color used for UI customization.
Kotlin
// Example: Set primary color to red
.setPrimaryColor(Color.RED)
  • secondaryColor: The secondary color used for UI customization.
Kotlin
// Example: Set secondary color to blue
.setSecondaryColor(Color.BLUE)
  • setHighlightColor: This function allows to set highlight color for UI customization. If set null or not set will use default value.
Kotlin
fun setHighlightColor(@ColorInt highlightColor: Int?): AppsPrizeStyleConfig.Builder

For specific feature highlight colors, use;

Kotlin
setPromotionHighlightColor(@ColorInt promotionHighlightColor: Int?)
setDailyHighlightColor(@ColorInt dailyHighlightColor: Int?)
setCashbackHighlightColor(@ColorInt cashbackHighlightColor: Int?)
setSecondChanceHighlightColor(@ColorInt secondChanceHighlightColor: Int?)
setCommonTaskHighlightColor(@ColorInt commonTaskHighlightColor: Int?)
setEpicTaskHighlightColor(@ColorInt epicTaskHighlightColor: Int?)
setLegendaryTaskHighlight(@ColorInt legendaryTaskHighlightColor: Int?)
  • typeface: The typeface used for UI customization.
Kotlin
// Example: Set typeface to bold
.setTypeface(Typeface.create(Typeface.DEFAULT, Typeface.BOLD))
  • bannerDrawable: The drawable used for the header banner.
Kotlin
// Example: Set banner drawable to a specific drawable resource  
.setBannerDrawable(context.getDrawable(R.drawable.header_banner))
  • offersTitleText: Text for the offers page title and navigation.
Kotlin
/ Example: Set offers title text  
.setOffersTitleText("Offers")
  • appsTitleText: Text for the apps page title and navigation.
Kotlin
// Example: Set apps title text  
.setAppsTitleText("Apps")
  • item: Styling for items and item detail popup.
Kotlin
// Example: Set item styling using a nested builder  
.setItemStyling(AppsPrizeItemStyling.Builder().build())
  • currencyIconDrawable: This function allows to set item currency icon in CTA. If set null or not set will use default value.
Kotlin
// Example: Set currency icon drawable  
fun setCurrencyIcon(currencyIcon: Drawable?): AppsPrizeStyleConfig.Builder

Sample Usage

Kotlin
val styleConfig = AppsPrizeStyleConfig.Builder()
            .setPrimaryColor(Color.parseColor("#265073"))
            .setSecondaryColor(Color.parseColor("#F1FADA"))
            .setHighlightColor(Color.parseColor("#00F593"))
            .setPromotionHighlightColor(Color.BLUE)
            .setCashbackHighlightColor(Color.ORANGE)
            .setSecondChanceHighlightColor(Color.GREEN)
            .setCommonTaskHighlightColor(Color.RED)
            .setEpicTaskHighlightColor(Color.PURPLE)
            .setLegendaryTaskHighlight(Color.YELLOW)
            .setTypeface(ResourcesCompat.getFont(this, R.font.kodemono))
            .setBannerDrawable(ResourcesCompat.getDrawable(resources, R.drawable.custom_banner, theme))
            .setOffersTitleText("Offer")
            .setAppsTitleText("Active")
            .setCurrencyIcon(ResourcesCompat.getDrawable(resources, R.drawable.coins_icon, theme))
            .build()

UI Customization

With the new version, you will be able to customize the UI of the SDK and use your own brand colors, font types, and header banner. So, you can increase your users' experience.

JavaScript
const styleConfig: AppsPrizeStyleConfig = {
    // (Optional) primaryColor: The primary color used for UI customization. Set primary color to red.
    primaryColor: "#FF0000",

    // (Optional) secondaryColor: The secondary color used for UI customization. Set secondary color to blue.
    secondaryColor: "#0000FF",

    // (Optional) highlightColor: The secondary color used for UI customization. Set highlight color to blue.
    highlightColor: "#0000FF",
  
    // (Optional): Specific feature highlight color used for UI customization.
    promotionHighlightColor: "#00FFFF",
  
    dailyHighlightColor: "#00FFFF",

    cashbackHighlightColor: "#00FFFF",

    secondChanceHighlightColor: "#00FFFF",

    commonTaskHighlightColor: "#00FFFF",

    epicTaskHighlightColor: "#00FFFF",

    legendaryTaskHighlightColor: "#00FFFF",

    // (Optional) typeface: The typeface used for UI customization. Set typeface to an assets path.
    typeface: "path/to/typeface.ttf",

    // (Optional) bannerDrawable: The drawable used for the header banner.
    // Set banner drawable to a specific drawable resource. (name of the resource)
    bannerDrawable: "header_banner",

    // (Optional) offersTitleText: Text for the offers page title and navigation. Set offers title text.
    offersTitleText: "Offers",

    // (Optional) appsTitleText: Text for the apps page title and navigation. Set apps title text.
    appsTitleText: "Apps",

    // (Optional) currencyIcon: The drawable is used as the currency icon in the item CTA. Set currency icon drawable.
    currencyIcon: "path/to/currency_icon"
};

UI Customization

With the new version, you will be able to customize the UI of the SDK and use your own brand colors and font types. So, you can increase your users' experience.

JavaScript
new AppsPrizeStyleConfig(
    // (Optional) primaryColor: The primary color used for UI customization. Set primary color to red.
    primaryColor: Color.blue,

    // (Optional) secondaryColor: The secondary color used for UI customization. Set secondary color to blue.
    secondaryColor: Color.black,

    // (Optional) highlightColor: The secondary color used for UI customization. Set highlight color to blue.
    highlightColor: Color.green,
  
    // (Optional) : The specific feature highlight color used for UI customization.
    promotionHighlightColor: Color.blue,
    dailyHighlightColor: Color.blue,
    cashbackHighlightColor: Color.blue,
    secondChanceHighlightColor: Color.blue,
    commonTaskHighlightColor: Color.blue,
    epicTaskHighlightColor: Color.blue,
    legendaryTaskHighlightColor: Color.blue,

    // (Optional) offersTitleText: Text for the offers page title and navigation. Set offers title text.
    offersTitleText: "Test Offer",

    // (Optional) appsTitleText: Text for the apps page title and navigation. Set apps title text.
    appsTitleText: "Test Apps"
);

Need help?

For integration support or feedback, reach out to your AppsPrize technical account manager.