Skip to main content

Customization

The Nexad Android SDK provides extensive customization options to ensure ads match your application's design. This guide covers how to style ads to create a seamless user experience.

Styling with AdViewStyle​

The SDK uses the AdViewStyle class to customize the appearance of ad views. You can customize:

  • Background color
  • Corner radius
  • Elevation (shadow)
  • Padding
  • Text styles (colors, sizes, fonts)
  • Border properties
  • Image scaling

Basic Styling Example​

// Create a custom style
val adStyle = AdViewStyle(
    backgroundColor = Color.WHITE,
    cornerRadius = 8f,
    elevation = 4f,
    padding = Padding(16f, 16f, 16f, 16f),
    textStyle = TextStyle(
        titleColor = Color.BLACK,
        descriptionColor = Color.GRAY,
        titleTextSize = 16f,
        descriptionTextSize = 14f
    )
)

// Apply to an individual ad view
adView.applyStyle(adStyle)

Setting Default Style​

You can set a default style for all ad views:

// Set global default style
NexadSDK.getInstance().setDefaultAdViewStyle(adStyle)

Text Styling​

Control the appearance of text elements in your ads:

val textStyle = TextStyle(
    titleColor = Color.parseColor("#333333"),
    descriptionColor = Color.parseColor("#666666"),
    ctaTextColor = Color.WHITE,
    titleTextSize = 18f,
    descriptionTextSize = 14f,
    ctaTextSize = 16f,
    titleFontFamily = Typeface.create("sans-serif-medium", Typeface.NORMAL),
    descriptionFontFamily = Typeface.create("sans-serif", Typeface.NORMAL),
    ctaFontFamily = Typeface.create("sans-serif-medium", Typeface.NORMAL)
)

Border Styling​

Add borders to your ad views:

val borderStyle = BorderStyle(
    width = 1f,
    color = Color.LTGRAY,
    style = BorderType.SOLID  // SOLID, DASHED, or DOTTED
)

val adStyle = AdViewStyle(
    // Other properties...
    border = borderStyle
)

Shadow Effects​

Add shadow effects to make your ads stand out:

val shadowStyle = ShadowStyle(
    radius = 4f,
    dx = 0f,
    dy = 2f,
    color = Color.parseColor("#20000000")  // Semi-transparent black
)

val adStyle = AdViewStyle(
    // Other properties...
    shadow = shadowStyle
)

Image Styling​

Control how images are displayed:

val imageStyle = ImageStyle(
    scaleType = ImageScaleType.CENTER_CROP,
    cornerRadius = 4f,
    borderWidth = 1f,
    borderColor = Color.LTGRAY
)

val adStyle = AdViewStyle(
    // Other properties...
    imageStyle = imageStyle
)

Ad Size Control​

Control the size of your ad views:

val adSize = AdSize(
    width = 300,  // Pixels, or use AdSize.MATCH_PARENT (-1) or AdSize.WRAP_CONTENT (-2)
    height = 250  // Pixels, or use AdSize.MATCH_PARENT (-1) or AdSize.WRAP_CONTENT (-2)
)

val adStyle = AdViewStyle(
    // Other properties...
    size = adSize
)

Complete Styling Example​

Here's a comprehensive example that combines all styling options:

val adStyle = AdViewStyle(
    backgroundColor = Color.WHITE,
    cornerRadius = 8f,
    elevation = 4f,
    padding = Padding(16f, 16f, 16f, 16f),
    textStyle = TextStyle(
        titleColor = Color.parseColor("#333333"),
        descriptionColor = Color.parseColor("#666666"),
        ctaTextColor = Color.WHITE,
        titleTextSize = 18f,
        descriptionTextSize = 14f,
        ctaTextSize = 16f,
        titleFontFamily = Typeface.create("sans-serif-medium", Typeface.NORMAL),
        descriptionFontFamily = Typeface.create("sans-serif", Typeface.NORMAL),
        ctaFontFamily = Typeface.create("sans-serif-medium", Typeface.NORMAL)
    ),
    border = BorderStyle(
        width = 1f,
        color = Color.LTGRAY,
        style = BorderType.SOLID
    ),
    shadow = ShadowStyle(
        radius = 4f,
        dx = 0f,
        dy = 2f,
        color = Color.parseColor("#20000000")
    ),
    imageStyle = ImageStyle(
        scaleType = ImageScaleType.CENTER_CROP,
        cornerRadius = 4f,
        borderWidth = 0f
    ),
    size = AdSize.MEDIUM_RECTANGLE_300_250
)

// Apply to an ad view
adView.applyStyle(adStyle)

Styling Different Ad Formats​

Chat Message Ad Styling​

NexadSDK.getInstance().LoadChatMessageEmbedAd(
    chatbotContext = chatbotContext,
    callback = callback,
    style = AdViewStyle(
        backgroundColor = Color.parseColor("#F5F5F5"),
        cornerRadius = 16f,
        padding = Padding(12f, 8f, 12f, 8f),
        textStyle = TextStyle(
            titleColor = Color.parseColor("#333333"),
            descriptionColor = Color.parseColor("#666666"),
            ctaTextColor = Color.WHITE,
            titleTextSize = 16f,
            descriptionTextSize = 14f,
            ctaTextSize = 14f
        )
    )
)
NexadSDK.getInstance().showNativeModalAd(
    context = context,
    callback = callback,
    style = AdViewStyle(
        backgroundColor = Color.WHITE,
        cornerRadius = 16f,
        elevation = 8f,
        padding = Padding(24f, 24f, 24f, 24f),
        textStyle = TextStyle(
            titleColor = Color.BLACK,
            descriptionColor = Color.GRAY,
            ctaTextColor = Color.WHITE,
            titleTextSize = 20f,
            descriptionTextSize = 16f,
            ctaTextSize = 16f
        )
    )
)

Best Practices​

  1. Maintain Brand Consistency: Use colors and fonts that match your app's branding
  2. Test on Different Devices: Ensure your styling looks good on various screen sizes
  3. Consider Accessibility: Use sufficient contrast between text and background colors
  4. Don't Overwhelm: Keep the design clean and simple to avoid distracting users
  5. Use Consistent Styling: Apply similar styles across different ad placements for a cohesive look