(ver 2.23.x) 9. 커스터마이징

1 리워드 아이콘
2 CTA 변경
3 PrimaryColor 변경

BuzzAd Benefit에서 제공하는 광고지면의 CTA 테마를 변경할 수 있습니다. 이 단계는 선택사항이긴 하지만 원하는 색상, 아이콘을 적용하는 단계이므로 적용하는 것을 권장합니다. 앱에서 사용중인 application theme에 Buzzvil에서 제공하는 attribute를 정의하여 간편하게 BuzzAd Benefit SDK의 CTA UI를 커스터마이징 할 수 있습니다.

attribute (type)	child attribute (type)	커스터마이징 되는 UI

attribute (type)	child attribute (type)	커스터마이징 되는 UI
`buzzvilRewardIcon` (reference)	N/A	[All] cta view 리워드 아이콘 [Feed] profile banner 리워드 아이콘 [Feed] pop opt-in 버튼 아이콘 [Pedometer] pop icon 리워드 아이콘 [Pedometer] header banner 리워드 아이콘 [Pedometer] milestone 리워드 아이콘 [Pedometer] notification 리워드 아이콘 [Push] notification 리워드 아이콘 [Bridge Point] `appCurrencyIcon`
`buzzvilCtaViewStyle` (reference)	`buzzvilCtaBackground` (reference) Cta 배경 설정 `buzzvilCtaParticipatedIcon` (reference) 광고 참여 후 아이콘 설정 `buzzvilCtaTextColor` (color\|reference) Cta 텍스트 색상 `buzzvilCtaTextSize` (dimension) Cta 텍스트 크기	[All] cta view
`buzzvilColorPrimaryDark`(reference\|color)	N/A	[Feed] Tab UI, Filter UI, Pop FAB 배경색 등 [Interstitial] Feed 진입 경로 텍스트 색상 [Pop] Pop 아이콘 배경색, Toolbar UI, 다른 앱 위에 그리기 권한 다이얼로그 UI 등 [Push] 구독 다이얼로그 UI [Ext. Auth] 바텀싯 UI
`buzzvilColorPrimary` (reference\|color)
`buzzvilColorPrimaryLight` (reference\|color)
`buzzvilColorPrimaryLighter` (reference\|color)
`buzzvilColorPrimaryLightest` (reference\|color)

아래는 styles.xml 파일에 추가할 예시 코드입니다.

리워드 아이콘

리워드를 표시하는 아이콘 추가를 위해 application theme에 buzzvilRewardIcon 를 추가합니다.

<!-- Base application theme. -->
<style name="YourAppTheme" parent="Theme.AppCompat.DayNight.DarkActionBar">
    <!-- 생략 -->
    <item name="buzzvilRewardIcon">@drawable/your_reward_icon</item>
</style>

CTA 변경

광고의 CTA의 색상, 아이콘 등을 변경하기 위해 application theme에 buzzvilCtaViewStyle 를 추가합니다.

<!-- Base application theme. -->
<style name="YourAppTheme" parent="Theme.AppCompat.DayNight.DarkActionBar">
    <!-- 생략 -->
    <item name="buzzvilCtaViewStyle">@style/YourCtaViewStyle</item>
</style>

<style name="YourCtaViewStyle">
    <item name="buzzvilCtaBackground">@drawable/your_background</item>
    <item name="buzzvilCtaParticipatedIcon">@drawable/your_participated_icon</item>
    <item name="buzzvilCtaRewardIcon">@drawable/your_reward_icon</item>
    <item name="buzzvilCtaTextColor">@color/your_text_color</item>
    <item name="buzzvilCtaTextSize">14sp</item>
</style>

Cta 배경 예시

<!-- your_background.xml -->
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape>
            <solid android:color="@color/colorPrimaryDark"/>
            <corners android:radius="4dp"/>
        </shape>
    </item>
    <item android:state_enabled="false">
        <shape>
            <solid android:color="@color/gray"/>
            <corners android:radius="4dp"/>
        </shape>
    </item>
    <item>
        <shape>
            <solid android:color="@color/colorPrimary"/>
            <corners android:radius="4dp"/>
        </shape>
    </item>
</selector>

PrimaryColor 변경

BuzzAd SDK 에서 제공하는 UI 중 Dialog의 버튼 색상, Bottom sheet UI의 확인 버튼을 포함하한 일부 UI 의 색상을 아래와 같이 Theme 에서 설정할 수 있습니다.