PedometerPop의 Customize 가이드 문서입니다.

PedometerConfig

PedometerConfig 를 통해서 아래 이미지의 내용(이미지, 컬러, 스트링)을 변경할 수 있습니다

No. 는 위 그림의 customize 가능한 영역의 숫자를 뜻합니다. unitId, rewardUnitId 는 필수고 나머지는 optioinal 입니다.

No.	Parameter	Description

No.	Parameter	Description
8	`unitId`	Pedometer fragment 에서 사용하는 광고 Unit Id
11	`rewardUnitId`	Pedometer bottom sheet(리워드 정보 화면)에서 사용하는 광고 Unit Id
<그림 3>	`pedometerIntroUnitId`	적립 가능 할 때 Pedometer fragment 진입 시 사용하는 광고 Unit id
1	`toolbarTitle`	Pedometer fragment 툴바에 표시되는 title
2	`tutorialUrl`	Pedometer fragment 툴바의 튜토리얼 버튼을 눌렀을 때 이동할 url 주소
3	`milestoneProgressGuideColor`	Pedometer fragment 마일스톤 Progress Guide Color
4	`milestoneProgressColor`	Pedometer fragment 마일스톤 Progress Color
5	status:Deprecated `milestoneRewardIconResId`	Pedometer fragment 마일스톤 적립 가능할 때 보이는 Icon resource id
6	`rewardAvailableTextColor`	Pedometer fragment 마일스톤 적립 가능할 때 표시되는 Text Color
7	`rewardAvailableBackgroundResId`	Pedometer fragment 마일스톤 적립 가능할 때 표시되는 Text Background Resource Id
9	`bottomSheetImageResId`	Pedometer bottom sheet 마일스톤 적립 가능할 때 보이는 image resource id
10	`bottomSheetSuccessString`	Pedometer bottom sheet 적립 완료 string
10	`bottomSheetInProgressString`	Pedometer bottom sheet 적립 중 string
12	`popIconProgressColor`	Pedometer Pop Icon Progress Color
13	`popIconProgressGuideColor`	Pedometer Pop Icon Progress Guide Color
14	`popIconTextColor`	Pedometer Pop Icon 에 표시 되는 걸음 수 Text Color
15	status:Deprecated `popIconRewardIconResId`	Pedometer Pop Icon 적립 가능할 때 보이는 Icon resource id
16	`popIconBackgroundColor`	Pedometer Pop Icon Background Color

status:Deprecated: 'BuzzAd Benefit 2 Android SDK 연동 가이드 - More details - BuzzAd Benefit Products에 테마를 적용'를 이용하는 것을 권장합니다.

Pedometer Preview Message

Pedometer Preview Message 는 Pop 에서 사용하는 Preview 와 동일한 기능이며, 일정 조건을 만족하면 Pedometer 관련 Preview 를 보여주는 기능입니다.

Pedometer preview 가 보이는 조건은 다음과 같습니다.

Milestone 의 목표 걸음 수의 일정 % 이상일 때: 목표 달성까지 %s 걸음 남았습니다, 힘내세요!
- % 는 pedometerMessageViewVisibleThreshold 를 통해 설정 (ex 80f = 80%)

Milestone 목표 걸음 수 달성 시: 목표 달성! 지금 바로 %s 포인트 받아가세요!

그 외, Pedometer preview 가 보여지는 조건이 아닐 때는 Pop 에서 사용하는 Contents, Ad preview 가 보여지게 됩니다

적용방법

PedometerConfig 에 pedometerMessageViewVisibleThreshold, pedometerMessageViewClass 를 설정합니다.

pedometerMessageViewVisibleThreshold: Milestone 의 targetStep 의 몇 % 일 때 pedometer preview 를 노출 할 것인지 설정합니다. 예를들어 Milestone의 target step 이 100 이고 pedometerMessageViewVisibleThreshold 를 80f 으로 설정하면 80 보 이상 일 때 노출됩니다.

pedometerMessageViewClass: PopPedometerMessageView 를 상속하는 pedometerMessageViewClass 를 설정합니다. custom class 를 사용하여 pedometer preview message 의 ui 를 변경할 수 있습니다.

기본 제공하는 View 를 사용할 경우

PedometerConfig 설정만으로 간단하게 동작합니다.

PedometerConfig
        .Builder(getApplicationContext(), UNIT_ID_PEDOMETER, UNIT_ID_PEDOMETER_REWARD)
        ...
        .pedometerMessageViewClass(DefaultPopPedometerMessageView.class) // 생략 가능
        .pedometerMessageViewVisibleThreshold(80f)
        .build();

UI 를 변경할 경우

CustomPopPedometerMessageView 를 직접 만들어서 사용합니다.

line 9: 직접 구현한 layout 을 사용할 수 있습니다.
line 15: preview 가 그려질 때 updateView 가 호출 되며 UI 를 그릴 때 필요한 pedometer 정보들이 함께 넘어 옵니다.
- currentStep: 현재 step
- targetMilestone: 목표 Milestone
- rewardableMilestone: 목표 달성한 Milestone
line 16: rewardableMilestone != null 일 경우 목표 달성으로 인해 포인트를 쌓을 수 있는 상태를 뜻합니다.
line 19: targetMilestone != null && currentStep < targetMilestone.getStep() 일 경우 걷기 진행 중을 뜻합니다.
line 28: pedometer preview 에 노출 될 text 를 return 합니다.
line 33: preview 가 노출 될 시간을 return 합니다.

view 에서 사용할 수 있는 정보는 updateView 함수를 통해 넘어오는데 다음과 같습니다.

public class CustomPopPedometerMessageView extends PopPedometerMessageView {
    private TextView textTitle;
    private TextView textDescription;
    private Context context;

    public CustomPopPedometerMessageView(@NotNull Context context) {
        super(context);
        this.context = context;
        LayoutInflater.from(context).inflate(R.layout.bz_view_pedometer_preview_message, this);
        textTitle = findViewById(R.id.textTitle);
        textDescription = findViewById(R.id.textDescription);
    }

    @Override
    public void updateView(long currentStep, @Nullable Milestone targetMilestone, @Nullable Milestone rewardableMilestone, int remainSeconds) {
        if (rewardableMilestone != null) {
            int reward = rewardableMilestone.getPoint();
            textTitle.setText("rewardable " + reward);
        } else if (targetMilestone != null && currentStep < targetMilestone.getStep()) {
            textTitle.setText(currentStep + " / " + targetMilestone.getStep());
        }
        textDescription.setText(context.getString(R.string.bz_pop_message_view_description, remainSeconds));
    }

    @NonNull
    @Override
    public String getMessage() {
        return textTitle.getText().toString();
    }

    @Override
    public int getDurationInSeconds() {
        return 20;
    }
}

위에서 생성한 Class 를 PedometerConfig 에 설정합니다.

return new PedometerConfig
        .Builder(getApplicationContext(), UNIT_ID_PEDOMETER, UNIT_ID_PEDOMETER_REWARD)
        .pedometerMessageViewClass(CustomPopPedometerMessageView.class)
        .pedometerMessageViewVisibleThreshold(80f)
        .build();

PedometerPopHeaderViewAdapter

PedometerPopHeaderViewAdapter 를 확장하여 Pop Feed Header 영역을 customize 할 수 있습니다

Set CustomPedometerPopHeaderViewAdapter and PopHeaderConfig

Benefit SDK 2.17 이상

PopConfig.feedHeaderViewAdapterClass 를 통해 CustomPedometerPopHeaderViewAdapter.class 를 사용하도록 설정
CustomPedometerPopHeaderViewAdapter class 생성: PedometerPopHeaderViewAdapter 를 상속
PopHeaderConfig 를 통해 customizing 설정

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

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();
    }
}

Benefit SDK 2.17 미만

FeedConfig.feedHeaderViewAdapterClass 를 통해 CustomPedometerPopHeaderViewAdapter.class 를 사용하도록 설정
CustomPedometerPopHeaderViewAdapter class 생성: PedometerPopHeaderViewAdapter 를 상속
PopHeaderConfig 를 통해 customizing 설정

final FeedConfig feedConfig = new FeedConfig.Builder(getApplicationContext(), UNIT_ID_POP)
        ...
        .feedHeaderViewAdapterClass(CustomPedometerPopHeaderViewAdapter.class)
        ...
        .build();

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();
    }
}

PedometerPopHeaderConfig

No.	Parameter	Description

No.	Parameter	Description
1	`progressChartColor`	Progress Color
2	`progressChartGuideColor`	Progress Guide Color
3	`progressIconResId`	적립 가능할 때 보이는 Icon resource id
4	`descriptionIconResId`	적립 중을 표시하는 Icon resource id
5	`dashboardBoundaryImageResId`	추가로 보여줄 Image resource id
6	`stepCountDescription`	몇 걸음 걸었는지 표시하는 String
7	`inProgressDescription`	적립 중일 때 표시하는 String
8	`rewardableDescription`	적립 완료 때 표시하는 String

Use custom view for PedometerPop Feed Header

PedometerPopHeaderViewAdapter 를 활용하여 PedometerPop Feed Header 영역에 custom view 를 사용할 수 있습니다.

적용방법

PedometerPopHeaderViewAdapter 를 상속받은 MyPedometerPopHeaderViewAdapter 를 생성. 아래 코드는 PedometerPopFeedHeader 에 custom view 를 사용하는 예시 코드입니다.

line 28: 사용할 view 를 설정합니다.
line 33: setPedometer 함수에서 각 뷰를 초기화하고 동작을 설정합니다.
- line 46: navigateToPedometerHistory 를 호출하여 pedometerHistory fragment 로 화면 전환 합니다.
- line 63: navigateToPedometer 를 호출하여 pedometer fragment 로 화면 전환 합니다.
line 132: getPopPedometerHeaderEventListener 를 구현하여 걸음 수가 변했을 때, 마일스톤 목표를 달성했을 때, 마일스톤 정보가 변했을 때 이벤트를 받아서 view 를 업데이트 할 수 있습니다.

public class MyPedometerPopHeaderViewAdapter extends PedometerPopHeaderViewAdapter {

    private ViewGroup layoutSteps;
    private TextView pedometerStepCountDescription;
    private TextView textStepCount;
    private TextView pedometerInProgressDescription;
    private TextView pedometerRewardableDescription;
    private BuzzCircleProgressView buzzCircleProgressView;
    private ImageView buzzCircleProgressViewIcon;
    private ImageView pedometerInProgressDescriptionIcon;
    private ImageView pedometerDashboardBoundary;
    private ViewGroup pedometerDescription;
    private ViewGroup pedometerInProgress;
    private ViewGroup pedometerRewardable;
    private ViewGroup layoutPedometerProgress;
    private Context context;

    @NotNull
    @Override
    public View onCreateView(@NotNull Context context, @NotNull ViewGroup parent) {
        return super.onCreateView(context, parent);
    }

    @NotNull
    @Override
    public View createView(@NotNull Context context, @NotNull ViewGroup parent) {
        this.context = context;
        View view =  LayoutInflater.from(context).inflate(
                R.layout.view_custom_pedometer_pop_header,
                parent,
                false
        );
        setPedometer(context, parent, view);
        return view;
    }

    private void setPedometer(
            Context context,
            ViewGroup parent,
            View view
    ) {
        layoutSteps = view.findViewById(R.id.layoutSteps);
        layoutSteps.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                navigateToPedometerHistory();
            }
        });
        pedometerStepCountDescription =
                view.findViewById(R.id.pedometerStepCountDescription);
        textStepCount = view.findViewById(R.id.textStepCount);
        textStepCount.setText(BuzzAdPopPedometer.getStepCount() + "");
        buzzCircleProgressView = view.findViewById(R.id.buzzCircleProgressView);
        buzzCircleProgressView.setProgressSettings(0, getMaxProgress());
        buzzCircleProgressView.setProgress(getProgress());
        buzzCircleProgressViewIcon = view.findViewById(R.id.buzzCircleProgressViewIcon);
        pedometerInProgressDescriptionIcon =
                view.findViewById(R.id.pedometerInProgressDescriptionIcon);
        pedometerDescription = view.findViewById(R.id.pedometerDescription);
        pedometerDescription.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                navigateToPedometer();
            }
        });
        pedometerInProgress = view.findViewById(R.id.pedometerInProgress);
        pedometerRewardable = view.findViewById(R.id.pedometerRewardable);
        pedometerInProgressDescription =
                view.findViewById(R.id.pedometerInProgressDescription);
        pedometerRewardableDescription =
                view.findViewById(R.id.pedometerRewardableDescription);
        pedometerDashboardBoundary = view.findViewById(R.id.pedometerDashboardBoundary);
        layoutPedometerProgress = view.findViewById(R.id.layoutPedometerProgress);
        updatePedometerStat();
    }

    void updatePedometerStat() {
        if (isRewardable()) {
            pedometerInProgress.setVisibility(View.GONE);
            pedometerRewardable.setVisibility(View.VISIBLE);
        } else {
            pedometerInProgress.setVisibility(View.VISIBLE);
            pedometerRewardable.setVisibility(View.GONE);
        }
        buzzCircleProgressView.setProgress(getProgress());
        textStepCount.setText(getStep() + "");
        initPedometerProgressView(getMilestones(), getStep());
    }

    private void initPedometerProgressView(
            List<Milestone> milestones,
            Long step
    ) {
        Context ctx = context;
        if (milestones != null && ctx != null) {
            layoutPedometerProgress.removeAllViews();
            for (Milestone milestone : milestones) {
                PedometerProgressView pedometerProgressView = new PedometerProgressView(ctx);
                pedometerProgressView.setMilestone(milestone);
                layoutPedometerProgress.addView(pedometerProgressView);
                LinearLayout.LayoutParams layoutParams = (LinearLayout.LayoutParams) pedometerProgressView.getLayoutParams();
                layoutParams.width = dpToPx(ctx, 80f);
                layoutParams.topMargin = dpToPx(ctx, 12f);
                pedometerProgressView.setCount(step.intValue());
                pedometerProgressView.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        Toast.makeText(ctx, "milestone clicked", Toast.LENGTH_SHORT).show();
                    }
                });
            }
        }
    }

    private int dpToPx(Context context, float dpValue) {
        float scale = context.getResources().getDisplayMetrics().density;
        return (int) (dpValue * scale + 0.5f);
    }

    @Override
    public void onBindView(@NotNull View view, int reward) {
        super.onBindView(view, reward);
    }

    @Override
    public void onDestroyView() {
        super.onDestroyView();
    }

    @Nullable
    @Override
    public PopPedometerHeaderEventListener getPopPedometerHeaderEventListener() {
        return new PopPedometerHeaderEventListener() {
            @Override
            public void onStepChanged(long step) {
                updatePedometerStat();
            }

            @Override
            public void onMilestoneReached(@NotNull List<Milestone> milestones) {
                updatePedometerStat();
            }

            @Override
            public void onMilestoneUpdated(@NotNull List<Milestone> milestones) {
                updatePedometerStat();
            }
        };
    }
}

MyPedometerPopHeaderViewAdapter 에서 Pedometer 정보를 얻어올 때 사용 가능한 함수와 리스너는 다음과 같습니다.

Pedometer 정보를 리턴하는 함수

navigateToPedometer(): Pedometer Fragment 로 화면 전환합니다.
navigateToPedometerHistory(): PedometerHistory Fragment 로 화면 전환합니다.
getMaxProgress(): Pedometer Header 상단에 표시되는 progress 의 최대 값 (10000)
getProgress(): Pedometer Header 상단에 표시되는 progress 의 현재 값 ((걸음 수/마일스톤 목표 걸음 수) * maxProgress)
isRewardable(): 적립가능 한 마일스톤이 있으면 true
getStep(): 현재 걸음 수
getMilestones(): 모든 마일스톤(List<Milestone>)

Pedometer 정보를 전달하는 리스너

onStepChanged: 걸음 수 가 변했을 때 호출
onMilestoneReached: 마일스톤 목표 달성 시 호출
onMilestoneUpdated: 마일스톤 정보가 변경 됐을 때 호출

abstract fun getPopPedometerHeaderEventListener(): PopPedometerHeaderEventListener?

interface PopPedometerHeaderEventListener {
    fun onStepChanged(step: Long)
    fun onMilestoneReached(milestones: List<Milestone>)
    fun onMilestoneUpdated(milestones: List<Milestone>)
}

BuzzAdBenefit 초기화 시, Pop 의 FeedConfig 에서 MyPedometerPopHeaderViewAdapter 사용하도록 설정

final FeedConfig feedConfig = new FeedConfig.Builder(getApplicationContext(), UNIT_ID_POP)
        ...
        .feedHeaderViewAdapterClass(MyPedometerPopHeaderViewAdapter.class)
        .build();
popConfig = new PopConfig.Builder(getApplicationContext(), UNIT_ID_POP)
        ...
        .feedConfig(feedConfig)
        .build();
final BuzzAdBenefitConfig buzzAdBenefitConfig = new BuzzAdBenefitConfig.Builder(this)
        .add(popConfig)
        .build();
BuzzAdBenefit.init(this, buzzAdBenefitConfig);

Buzzvil Developer Guides

Customize (PedometerPop)

PedometerConfig

Pedometer Preview Message

PedometerPopHeaderViewAdapter

Use custom view for PedometerPop Feed Header

Related content