목차

Pop UI 변경

...

개요

본 가이드에서는 BuzzAd Android SDK에서 제공하는 UI의 구성을 지키며 디자인을 변경하기 위한 방법을 안내합니다. 추가적인 디자인 변경을 원하시는 경우에는 고급 설정에서 UI를 자체 구현하는 방법으로 진행할 수 있습니다.

만보기 아이콘 UI 디자인 변경

...

만보기 UI의 아이콘 및 색상을 변경할 수 있습니다.

• 리워드 아이콘은 테마 적용을 참고하여 BuzzvilRewardIcon은 테마를 적용하여 변경할 수 있습니다.

• 색상은 PedometerConfig를 설정하여 변경할 수 있습니다. PedometerConfig는 PopConfig에 설정합니다

다음은 만보기 UI의 색상을 변경하는 예시입니다.

final PedometerConfig pedometerConfig = new PedometerConfig.Builder(context, "YOUR_PEDOMETER_UNIT_ID_PEDOMETER", "YOUR_PEDOMETER_REWARD_UNIT_ID_PEDOMETER_REWARD")
        .popIconProgressColor(ContextCompat.getColor(context, android.R.color.holoyour_red_darkcolor))
        .popIconProgressGuideColor(ContextCompat.getColor(context, android.R.color.holoyour_green_darkcolor))
        .popIconTextColor(ContextCompat.getColor(context, android.R.color.blackyour_color))
        .popIconBackgroundColor(ContextCompat.getColor(context, android.R.color.whitewhiteyour_color))
        .build();

final PopConfig popConfig = new PopConfig.Builder(context, unitIdPop"YOUR_POP_UNIT_ID")  
        .pedometerConfig(pedometerConfig)
        .build();

메인 페이지의 헤더

...

UI 디자인 변경

...

헤더 영역을 커스터마이징하는 방법은 2가지 있습니다. PedometerPopHeaderConfig을 설정하여 헤더 영역의 UI을 변경할 만보기 메인페이지의 헤더 영역의 디자인을 변경할 수 있습니다. BuzzAd Android SDK에서 제공하는 기본 UI의 색상 및 아이콘을 PedometerPopHeaderConfig을 통해 변경합니다. 변경 가능한 부분은 위의 이미지를 통해 확인할 수 있습니다. PedometerPopHeaderConfig로는 변경할 수 없는 부부은 헤더 UI를 자체 구현하여 변경하실 수 있습니다.PedometerPopHeaderViewAdapter의 상속 클래스를 구현하여

다음은 PedometerPopHeaderConfig를 설정합니다. 상속 클래스는 PopConfig의 feedHeaderViewAdapterClass로 설정합니다. 통한 UI 수정 예시입니다.

public class CustomPedometerPopHeaderViewAdapter extends PedometerPopHeaderViewAdapter {
    @Override
    public PedometerPopHeaderConfig buildPopHeaderConfig(Context context) {
        return new PedometerPopHeaderConfig.Builder(context)
                .stepCountDescription(...)
                .progressChartColor(...)
                .progressChartGuideColor(...)
                .inProgressDescription(...)
                .rewardableDescription(...)
                .progressIconResId(...)
                .descriptionIconResId(...)
                .boundaryImageResId(...)
                .build();
    }
}

final PopConfig popConfig = new PopConfig.Builder(getApplicationContext(), "YOUR_POP_UNIT_ID")
        .feedHeaderViewAdapterClass(CustomPedometerPopHeaderViewAdapter.class)
        .build();

...

적립 UI 디자인 변경

...

적립페이지 UI 디자인을 변경할 수 있습니다. BuzzAd Android SDK에서 제공하는 기본 UI의 색상 및 아이콘을 PedometerConfig을 통해 변경합니다. 변경 가능한 부분은 위의 이미지를 통해 확인할 수 있습니다.

• 리워드 아이콘은 BuzzvilRewardIcon은 테마 적용을 참고하여 변경할 수 있습니다.

• 색상 및 문구는 다음은 PedometerConfig를 설정하여 변경할 수 있습니다. PedometerConfig는 PopConfig에 설정합니다색상 및 문구를 수정하는 예시입니다.

  Code Block
  final PedometerConfig pedometerConfig = new PedometerConfig.Builder(context, "YOUR_PEDOMETER_UNIT_ID

...

• ", "YOUR_PEDOMETER_REWARD_UNIT_ID

...

• ") .milestoneProgressGuideColor(ContextCompat.getColor(context, android.R.color.holo_green_dark)) .milestoneProgressColor(ContextCompat.getColor(context, android.R.color.holo_red_dark)) .rewardAvailableTextColor(ContextCompat.getColor(context, R.color.bzv_black_100)) .rewardAvailableBackgroundResId(R.drawable.benefit_pop_ic_red_notification_badge) .build(); final PopConfig popConfig = new PopConfig.Builder(context, unitIdPop) .pedometerConfig(pedometerConfig) .build();

...

만보기 적립완료 UI 디자인 변경

...

목표 달성 후 사용자가 적립 완료 시 보여지는 UI 디자인을 변경할 수 있습니다. BuzzAd Android SDK에서 제공하는 기본 UI의 색상 및 아이콘을 PedometerConfig을 통해 변경합니다. 변경

...

가능한 부분은 위의 이미지를 통해 확인할 수 있습니다.

다음은 PedometerConfig를 설정하여 색상 및 문구를 수정하는 예시입니다.

final PedometerConfig pedometerConfig = new PedometerConfig.Builder(context, "YOUR_PEDOMETER_UNIT_ID

...

", "YOUR_PEDOMETER_REWARD_UNIT_ID

...

")
        .bottomSheetImageResId(R.drawable.sample_benefit_img_buzzvil_logo)
        .bottomSheetSuccessString(context.getString(R.string.benefit_pop_pedometer_bottomsheet_success))
        

...

.

...

build();

final PopConfig popConfig = new PopConfig.Builder(context, unitIdPop)  
        .pedometerConfig(pedometerConfig)
        .build();

...

히스토리 UI 디자인 변경

...

히스토리페이지의 그래프 색상을 변경할 수 있습니다. 변경 가능한 부분은 위의 이미지를 통해 확인할 수 있습니다.

다음은 PedometerConfig를 설정하여 색상 및 문구를 수정하는 예시입니다.

final PedometerConfig pedometerConfig = new PedometerConfig.Builder(context, "YOUR_PEDOMETER_UNIT_ID

...

", "YOUR_PEDOMETER_REWARD_UNIT_ID

...

")
        .stepHistoryPrimaryColor(ContextCompat.getColor(context, android.R.color.holo_red_light))
        .build();

final PopConfig popConfig = new PopConfig.Builder(context, unitIdPop)  
        .pedometerConfig(pedometerConfig)
        .build();