목차
| Table of Contents | ||||||
|---|---|---|---|---|---|---|
|
개요
본 가이드에서는 BuzzAd Android SDK에서 제공하는 UI의 구성을 지키며 디자인을 변경하기 위한 방법을 안내합니다. 추가적인 디자인 변경을 원하시는 경우에는 고급 설정에서 UI를 자체 구현하는 방법으로 진행할 수 있습니다.
Pop 디자인 가이드 문서
Pop 디자인 규격은 Pop 디자인 가이드 문서에서 확인 가능합니다. Pop의 디자인을 변경하기 위해서는 PopConfig를 설정해야 합니다.
Pop 배경색 변경
Pop의 배경색은 테마 적용에 따라 변경할 수 있습니다.
Pop 아이콘 변경
Application.onCreate에서 BuzzAdPopTheme 을 지정해 줍니다. 이때 BuzzAdPopTheme의 iconResId 와 rewardReadyIconResId, popFeedCloseIconResId 를 설정하여 Pop 아이콘 이미지를 변경할 수 있습니다.
| Code Block |
|---|
BuzzAdPopTheme buzzAdPopTheme = BuzzAdPopTheme.getDefault()
...생략...
.iconResId(R.drawable.your_pop_icon)
.rewardReadyIconResId(R.drawable.your_pop_icon_reward_ready)
.popFeedCloseIconResId(R.drawable.your_pop_icon_feed_close);
BuzzAdPop.getInstance().setTheme(buzzAdPopTheme); |
iconResId: Pop의 평상시 아이콘 입니다.
rewardReadyIconResId: 적립 가능한 포인트가 있을 때 기본 아이콘이 아닌 다른 아이콘을 (예: 동전 아이콘) 유저에게 보여줄 수 있습니다.
popFeedCloseIconResId: 팝을 통해 피드를 열고난 후, 피드를 닫기 위한 아이콘 입니다.
각 icon의 resource는 다음과 같이 구성할 수 있습니다.
iconResId: 상태에 따라 평상시 아이콘과 팝 닫기 아이콘을 지정해 주어야 합니다.
| Code Block | ||
|---|---|---|
| ||
<!-- your_pop_icon.xml -->
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- 닫기 아이콘 -->
<item android:drawable="@drawable/icon_pop_selected" android:state_selected="true" />
<!-- 평상시 팝 아이콘 -->
<item android:drawable="@drawable/icon_pop"/>
</selector> |
rewardReadyIconResId: 적립 가능한 포인트가 있을 때 기본 아이콘이 아닌 다른 아이콘을 (예: 동전 아이콘) 유저에게 보여줄 수 있습니다.
| Code Block | ||
|---|---|---|
| ||
<!-- you_pop_icon_reward_ready.xml -->
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- 닫기 아이콘 -->
<item android:drawable="@drawable/icon_pop_selected" android:state_selected="true" />
<!-- 적립 가능 포인트가 있을 때 팝 아이콘 -->
<item android:drawable="@drawable/icon_pop_reward_ready"/>
</selector> |
| Info |
|---|
팝 아이콘 권장 사이즈
|
Pop 활성화 버튼
Pop 활성화 버튼의 디자인은 아래 가이드에 따라 수정할 수 있습니다.
활성화 버튼의 색상과 아이콘은 테마 적용을 통해 변경할 수 있습니다.
활성화 버튼의 문구는
DefaultOptInAndShowPopButtonHandler의 상속 클래스에서 설정합니다. 상속 클래스를 작성하고 FeedConfig에 설정합니다.Code Block language java public class CustomOptInAndShowPopButtonHandler extends DefaultOptInAndShowPopButtonHandler { // 활성화 버튼에 보여지는 문구입니다. @Override public String getOptInAndShowPopButtonText(Context context) { return "YOUR_BUTTON_TEXT"; } }Code Block language java final FeedConfig feedConfig = new FeedConfig.Builder("YOUR_FEED_UNIT_ID") .optInAndShowPopButtonHandlerClass(CustomOptInAndShowPopButtonHandler.class) .build();
Notification UI 수정
Pop이 활성화되어 있는 동안에 Service Notification이 보입니다.
다음은 PopNotificationConfig를 설정하여 BuzzAd Android SDK에서 제공하는 Notification 의 UI를 변경하는 방법입니다.
| Code Block | ||
|---|---|---|
| ||
final PopNotificationConfig popNotificationConfig = new PopNotificationConfig.Builder(getApplicationContext())
.smallIconResId(R.drawable.your_small_icon) // 흰색 아이콘, Adaptive Icon 이 설정하지 않도록 주의 요망
.titleResId(R.string.your_pop_notification_title)
.textResId(R.string.your_pop_notification_text)
.colorResId(R.color.your_pop_notification_color)
.notificationId(5000) // 기본값
.build(); |
| Code Block | ||
|---|---|---|
| ||
final FeedConfig popFeedConfig = new FeedConfig.Builder("YOUR_POP_UNIT_ID").build();
PopConfig popConfig = new PopConfig.Builder(popFeedConfig)
...생략...
.popNotificationConfig(popNotificationConfig)
.build(); |
UI 레이아웃 혹은 Notification 전체를 수정하기 위해서는 Pop Service Notification 자체 구현을 참고하시기 바랍니다.
툴바 영역 커스터마이징
.png?version=1&modificationDate=1634190237390&cacheVersion=1&api=v2&width=680)
BuzzAd Android SDK에서 제공하는 Pop 툴바 영역의 좌측 아이콘 색상은 테마 적용에 따라 변경할 수 있습니다.