(Android v3.0.x) 9. Theme 마이그레이션 가이드

Owned by Dio Heo
Last updated: May 09, 2022 by Olivia Kim
2 min read

 

개요

이전 버전에서는 styles.xml 리소스 파일에서 Theme을 설정하는 방식을 채택했습니다.

BuzzAd Android용 SDK 3.0부터는 BuzzvilTheme 클래스에서 Java / Kotlin 코드로 Theme을 설정하는 방식으로 변경되었습니다. 자세한 내용은 연동 가이드의 디자인 커스터마이징 토픽을 참고하세요.

 

주요 색상 변경하기

BuzzAd Android용 SDK 3.0에서 모든 광고 지면 내 주요 UI의 색상을 변경하려면 BuzzAdTheme을 사용하여 아래와 같은 순서대로 구현하세요.

  1. Application 의 onCreate 에 모든 광고 지면의 디자인을 커스터마이징할 수 있는 BuzzTheme 객체를 생성하세요.

  2. 변경하고자 하는 색상 타입에 따라 적절한 메소드를 호출하세요.

    • textColor : Interstitial 광고 타이틀, 설명 문구의 색상

    • backgroundColor : Interstitial 광고 지면의 배경 색상

  3. BuzzAdTheme.setGloabalTheme()에 위에서 생성한 BuzzAdTheme 객체를 설정하세요.

    • 이때, BuzzAdTheme.setGloabalTheme()은 BuzzAd SDK 초기화 단계에서 BuzzAdBenefit.init()을 실행하기 전에 호출해야 합니다.

// TODO: 모든 광고 지면의 디자인을 커스터마이징할 수 있는 BuzzTheme 객체를 생성합니다. BuzzAdTheme buzzAdTheme = new BuzzAdTheme() .colorPrimary(R.color.samplePrimary) .colorPrimaryDark(R.color.samplePrimaryDark) .colorPrimaryLight(R.color.samplePrimaryLight) .colorPrimaryLighter(R.color.samplePrimaryLighter) .colorPrimaryLightest(R.color.samplePrimaryLightest); // TODO: 위에 생성한 객체를 setGlobalTheme 메소드를 통해 Global Theme로 설정합니다. // 주의 사항: BuzzAdBenefit.init 하기 전에 호출해야 합니다. BuzzAdTheme.setGlobalTheme(buzzAdTheme); BuzzAdBenefit.init(...);

4. 코드 중복을 피하기 위해, 기존에 styles.xml에서 설정한 buzzvillColorPrimary 관련 코드를 삭제하세요.

<!-- styles.xml --> <!-- Base application theme. --> <style name="YourAppTheme" parent="Theme.AppCompat.DayNight.DarkActionBar"> <!-- TODO: 아래 코드를 삭제합니다. --> <item name="buzzvilColorPrimaryDark">@color/samplePrimaryDark</item> <item name="buzzvilColorPrimary">@color/samplePrimary</item> <item name="buzzvilColorPrimaryLight">@color/samplePrimaryLight</item> <item name="buzzvilColorPrimaryLighter">@color/samplePrimaryLighter</item> <item name="buzzvilColorPrimaryLightest">@color/samplePrimaryLightest</item> </style>

 

리워드 아이콘 변경하기

  1. 리워드 아이콘으로 사용할 이미지를 BuzzAdTheme에 rewardIcon() 으로 추가합니다.

BuzzAdTheme buzzAdTheme = new BuzzAdTheme() .rewardIcon(R.drawable.your_reward_icon); // TODO: 리워드 아이콘으로 사용할 이미지 설정하세요. BuzzAdTheme.setGlobalTheme(buzzAdTheme); BuzzAdBenefit.init(...);

2. 코드 중복을 피하기 위해, 기존에 style.xml에서 설정한 buzzvillColorPrimary 관련 코드를 삭제하세요.

CTA 버튼 커스터마이징하기

BuzzAd Android용 SDK 3.0에서 제공하는 전체 지면의 CTA 버튼의 디자인을 변경할 수 있습니다. 아래 순서에 따라 기존 코드를 수정하세요.

  1. CTA 버튼 디자인을 커스터마이징할 수 있는 BuzzAdTheme 객체를 생성하세요.

  2. 변경하고자 하는 커스터마이징 타입에 따라 BuzzAdTheme 객체에 적절한 메소드를 호출하세요.

    • participatedIcon: 광고 참여 완료 후 CTA 버튼의 아이콘 이미지

    • ctaBackgroundSelector: CTA 버튼의 배경 색상 (state_enabled 필수 적용)

    • ctaTextColorSelector: CTA 버튼의 텍스트 색상

    • ctaTextSize: CTA 버튼의 텍스트 크기

2. 코드 중복을 피하기 위해, 기존에 style.xml에서 설정한 buzzvillCta 관련 코드를 삭제하세요.