(ver 2.27.x) 6.3.3. 디자인 커스터마이징
- George Kim (Unlicensed)
목차
개요
본 가이드에서는 BuzzAd Android SDK에서 제공하는 UI의 구성을 지키며 디자인을 변경하기 위한 방법을 안내합니다. 추가적인 디자인 변경을 원하시는 경우에는 고급 설정에서 UI를 자체 구현하는 방법으로 진행할 수 있습니다.
만보기 아이콘 UI 디자인 변경
만보기 UI의 아이콘 및 색상을 변경할 수 있습니다.
BuzzvilRewardIcon은 테마를 적용하여 변경할 수 있습니다.
색상은
PedometerConfig를 설정하여 변경할 수 있습니다.
다음은 만보기 UI의 색상을 변경하는 예시입니다.
final PedometerConfig pedometerConfig = new PedometerConfig.Builder(context, "YOUR_PEDOMETER_UNIT_ID", "YOUR_PEDOMETER_REWARD_UNIT_ID")
.popIconProgressColor(ContextCompat.getColor(context, android.R.color.your_color))
.popIconProgressGuideColor(ContextCompat.getColor(context, android.R.color.your_color))
.popIconTextColor(ContextCompat.getColor(context, android.R.color.your_color))
.popIconBackgroundColor(ContextCompat.getColor(context, android.R.color.whiteyour_color)
.build();
final PopConfig popConfig = new PopConfig.Builder(context, "YOUR_POP_UNIT_ID")
.pedometerConfig(pedometerConfig)
.build();
메인 페이지의 헤더 UI 디자인 변경
만보기 메인페이지의 헤더 영역의 디자인을 변경할 수 있습니다. BuzzAd Android SDK에서 제공하는 기본 UI의 색상 및 아이콘을 PedometerPopHeaderConfig을 통해 변경합니다. 변경 가능한 부분은 위의 이미지를 통해 확인할 수 있습니다. PedometerPopHeaderConfig로는 변경할 수 없는 부부은 헤더 UI를 자체 구현하여 변경하실 수 있습니다.
다음은 PedometerPopHeaderConfig를 통한 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를 설정하여 색상 및 문구를 수정하는 예시입니다.
만보기 적립완료 UI 디자인 변경
목표 달성 후 사용자가 적립 완료 시 보여지는 UI 디자인을 변경할 수 있습니다. BuzzAd Android SDK에서 제공하는 기본 UI의 색상 및 아이콘을 PedometerConfig을 통해 변경합니다. 변경 가능한 부분은 위의 이미지를 통해 확인할 수 있습니다.
다음은 PedometerConfig를 설정하여 색상 및 문구를 수정하는 예시입니다.
히스토리 UI 디자인 변경
히스토리페이지의 그래프 색상을 변경할 수 있습니다. 변경 가능한 부분은 위의 이미지를 통해 확인할 수 있습니다.
다음은 PedometerConfig를 설정하여 색상 및 문구를 수정하는 예시입니다.