Page Comparison

...

Feed 타입을 연동하기 전, 공통 가이드의 연동 사항을 모두 적용했는지 확인해주세요.
Feed 의 커스터마이즈는 상단 툴바, 광고 리스트 아이템 영역, 헤더, 디자인 커스터마이즈가 가능합니다.

...

(중요) Basic Usage 를 모두 적용한 뒤, 하단의 Advanced Usage를 적용해해주세요.

...

Code Block

language	java

final FeedConfig feedConfig = new FeedConfig.Builder("YOUR_FEED_UNIT_ID").build();
final FeedHandler feedHandler = new FeedHandler(feedConfig);
feedHandler.startFeedActivity(this);

Recommended Usage

Feed의 광고 현황 확인

Basic Usage처럼 바로 startFeedActivity를 호출하는 경우 Feed 액티비티가 실행되면서 광고를 로드하게 되어, 유저에게 보여줄 수 있는 광고가 없어 빈 화면이 보이게 될 수도 있습니다. 이에 Feed 액티비티를 실행하기 전에 preload(

Info
오퍼월을 Feed 에 연동하는 경우, FeedConfig 설정에 `autoLoadingEnabled` 값을 true 로 설정해야 합니다.

Code Block

language	java

final FeedConfig feedConfig = new FeedConfig.Builder(context, "YOUR_FEED_UNIT_ID")
                                ...
                                .autoLoadingEnabled(true)
                                ...
                                .build();

Recommended Usage

...

Feed의 광고 현황 확인

Basic Usage처럼 바로 startFeedActivity를 호출하는 경우 Feed 액티비티가 실행되면서 광고를 로드하게 되어, 유저에게 보여줄 수 있는 광고가 없어 빈 화면이 보이게 될 수도 있습니다. 이에 Feed 액티비티를 실행하기 전에 preload()를 호출한 뒤 onPreloaded() 콜백을 호출하여 상태를 확인한 후 광고가 있을때만 피드로 진입할 수 있도록 하는 것을 추천합니다.

...

FeedToolbarHolder를 구현하는 class 를 생성합니다.

Code Block

language	java

public class CustomFeedToolbarHolder implements FeedToolbarHolder {
    private FeedActivityToolbar toolbar;

    @Override
    public View getView(final Activity activity) {
        // FeedActivityToolbar is a default toolbar view that you can only change the title and view's attributes. 
        // Create a custom view and return it if you would like to add more UI components.
        this.toolbar = new FeedActivityToolbar(activity);
        toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                activity.finish();
 View.OnClickListener() {
           } @Override
       });     public void   toolbar.setTitle("BuzzAdBenefit Feed");
onClick(View view) {
       toolbar.setBackgroundColor(Color.parseColor("#1290FF")); // 변경하려는 "색상코드" 를 입력    activity.finish();
    return toolbar;     }  }
   @Override     public void onTotalRewardUpdated(int totalReward) {});
        toolbar.setTitle("BuzzAdBenefit Feed");
 // Use this callback if you want to show the current total points that users can get toolbar.setBackgroundColor(Color.parseColor("#1290FF")); // 변경하려는 "색상코드" 를 입력
        }
}

FeedConfig 빌드 시점에 해당 FeedToolbarHolder class 를 지정합니다.

Code Block

language	java

final FeedConfig feedConfig = new FeedConfig.Builder("YOUR_FEED_UNIT_ID")
	...return toolbar;
    }

    .feedToolbarHolderClass(CustomFeedToolbarHolder.class)@Override
    .build();

툴바 Height 변경

Customize 된 toolbar가 들어가는 layout의 height값이 기본적으로 고정되어 있습니다. Toolbar의 height 값을 수정하고 싶다면 다음과 같은 코드를 추가 해야합니다.

...

public void onTotalRewardUpdated(int totalReward) {

...

// Use this callback if you want to show the current total points that users can get
    }
}

FeedConfig 빌드 시점에 해당 FeedToolbarHolder class 를 지정합니다.

Code Block

language	java

final FeedConfig feedConfig = new FeedConfig.Builder("YOUR_FEED_UNIT_ID")
	...
    .feedToolbarHolderClass(CustomFeedToolbarHolder.

...

class)

...

Feed의 헤더 Customization

Feed 상단의 헤더 영역을 커스터마이징하여, 유저에게 해당 피드가 어떤 공간인지 상세히 안내할 수 있습니다.

FeedHeaderViewAdapter 를 구현하는 class 를 생성합니다.

Code Block

language	java

public class CustomFeedHeaderViewAdapter implements FeedHeaderViewAdapter {
    @Override
    public View onCreateView(final Context context, final ViewGroup parent) {
        final LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        return inflater.inflate(R.layout.bz_view_feed_header, parent, false);
    }

    @Override
    public void onBindView(final View view, final int reward) {
        // Display total reward on the header if needed.
        final View rewardLayout = view.findViewById(R.id.rewardLayout);.build();

툴바 Height 변경

Customize 된 toolbar가 들어가는 layout의 height값이 기본적으로 고정되어 있습니다. Toolbar의 height 값을 수정하고 싶다면 다음과 같은 코드를 추가 해야합니다.

Code Block

// AndroidManifest.xml
<activity
    android:name="com.buzzvil.buzzad.benefit.presentation.feed.FeedActivity"
    android:theme="@style/AppTheme"
    tools:replace="android:theme"/>

// styles.xml
<style name="AppTheme" parent=...>
    <!-- Customize your theme here. -->
    ...
    <item name="actionBarSize>DESIRED_ACTION_BAR_HEIGHT</item>
</style>

Feed의 헤더 Customization

Feed 상단의 헤더 영역을 커스터마이징하여, 유저에게 해당 피드가 어떤 공간인지 상세히 안내할 수 있습니다.

FeedHeaderViewAdapter 를 구현하는 class 를 생성합니다.

Code Block

language	java

public class CustomFeedHeaderViewAdapter implements FeedHeaderViewAdapter {
    @Override
    public View onCreateView(final Context context, final ViewGroup parent) {
        final ifLayoutInflater (rewardinflater == 0(LayoutInflater) {context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        return    rewardLayout.setVisibility(View.GONEinflater.inflate(R.layout.bz_view_feed_header, parent, false);
        }
else
{    @Override
    public void   rewardLayout.setVisibility(View.VISIBLE);
   onBindView(final View view, final int reward) {
        final// TextViewDisplay rewardTextViewtotal = view.findViewById(R.id.rewardText);
   reward on the header if needed.
        final StringView rewardTextrewardLayout = view.getContext().getString(R.string.bz_feed_header_view_reward_text, reward view.findViewById(R.id.rewardLayout);
        if (reward == 0) {
   rewardTextView.setText(rewardText);         }rewardLayout.setVisibility(View.GONE);
    } }

FeedConfig 빌드 시점에 해당 FeedHeaderViewAdapter class 를 지정합니다.

Code Block
final FeedConfig feedConfig =} new FeedConfig.Builder("YOUR_FEED_UNIT_ID") ...else { .feedHeaderViewAdapterClass(CustomFeedHeaderViewAdapter.class) .build();

Feed 광고 리스트 아이템 영역 Customization

Feed의 광고 리스트 아이템 뷰를 커스터마이징하고 광고 이벤트에 대한 콜백을 등록할 수 있습니다.

AdsAdapter 를 상속받는 class 를 구현합니다.
onCreateViewHolder, onBindViewHolder 를 구현해 Feed 리스트에 보여줄 itemView 의 레이아웃 및 바인딩 로직을 커스터마이징합니다.
CtaView의 getCtaTextView() 및 getRewardImageView() 함수를 호출하여 CtaView에 보여지는 텍스트 및 리워드 이미지에 대한 customization을 할 수 있습니다. (좀 더 유연한 customization을 위해 View를 새로 만들고 싶은 경우에는 아래 CtaView Customization 참조)

(optional)

onImpressed

,

onClicked

,

onRewardRequested

,

onRewarded

,

onParticipated

를 오버라이드하여 광고의 임프레션, 클릭, 리워드 요청, 리워드 지급 결과, 참여완료에 대한 이벤트 콜백을 받을 수 있습니다 (콜백의 정의 및 동작은

문서 참조

)

Code Block

language	java

public class CustomAdsAdapter extends AdsAdapter<AdsAdapter.NativeAdViewHolder> { @Override public NativeAdViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { final LayoutInflater inflater = LayoutInflater.from(parent.getContext()); final NativeAdView feedNativeAdView = (NativeAdView) inflater.inflate(R.layout.bz_view_feed_ad, parent, false); return new NativeAdViewHolder(feedNativeAdView); }

rewardLayout.setVisibility(View.VISIBLE);
            final TextView rewardTextView = view.findViewById(R.id.rewardText);
            final String rewardText = view.getContext().getString(R.string.bz_feed_header_view_reward_text, reward);
            rewardTextView.setText(rewardText);
        }
    }
}

FeedConfig 빌드 시점에 해당 FeedHeaderViewAdapter class 를 지정합니다.

Code Block
final FeedConfig feedConfig = new FeedConfig.Builder("YOUR_FEED_UNIT_ID") ... .feedHeaderViewAdapterClass(CustomFeedHeaderViewAdapter.class) .build();

Feed 광고 리스트 아이템 영역 Customization

Feed의 광고 리스트 아이템 뷰를 커스터마이징하고 광고 이벤트에 대한 콜백을 등록할 수 있습니다.

AdsAdapter 를 상속받는 class 를 구현합니다.

onCreateViewHolder, onBindViewHolder 를 구현해 Feed 리스트에 보여줄 itemView 의 레이아웃 및 바인딩 로직을 커스터마이징합니다.
CtaView의 getCtaTextView() 및 getRewardImageView() 함수를 호출하여 CtaView에 보여지는 텍스트 및 리워드 이미지에 대한 customization을 할 수 있습니다. (좀 더 유연한 customization을 위해 View를 새로 만들고 싶은 경우에는 아래 CtaView Customization 참조)

(optional) onImpressed, onClicked, onRewardRequested, onRewarded, onParticipated를 오버라이드하여 광고의 임프레션, 클릭, 리워드 요청, 리워드 지급 결과, 참여완료에 대한 이벤트 콜백을 받을 수 있습니다 (콜백의 정의 및 동작은 문서 참조)

Code Block

language	java

public class CustomAdsAdapter extends AdsAdapter<AdsAdapter.NativeAdViewHolder> {

    @Override
    public void onBindViewHolder(NativeAdViewHolder holder, NativeAd nativeAd) {
        final NativeAdView view = (NativeAdView) holder.itemView; NativeAdViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
         final AdLayoutInflater adinflater = nativeAd.getAdLayoutInflater.from(parent.getContext());
        final Creative.TypeNativeAdView creativeTypefeedNativeAdView = ad.getCreative(NativeAdView) == null ? null : ad.getCreative().getType(inflater.inflate(R.layout.bz_view_feed_ad, parent, false);
        return final MediaView mediaView = view.findViewById(R.id.mediaViewnew NativeAdViewHolder(feedNativeAdView);
    }

  final LinearLayout titleLayout@Override
= view.findViewById(R.id.titleLayout);   public void onBindViewHolder(NativeAdViewHolder holder, NativeAd  final TextView titleView = view.findViewById(R.id.textTitle);nativeAd) {
        final ImageViewNativeAdView iconViewview = view.findViewById(R.id.imageIcon);(NativeAdView) holder.itemView;

        final TextViewAd descriptionViewad = viewnativeAd.findViewByIdgetAd(R.id.textDescription);
        final CtaViewCreative.Type ctaViewcreativeType = viewad.findViewByIdgetCreative(R.id.ctaView); == null ? null :    ctaView.setBackgroundColor(Color.parseColor(“#3976FD”)); // (선택) 변경하려는 "색상코드"ad.getCreative().getType();

        final CtaPresenterMediaView ctaPresentermediaView = new CtaPresenter(ctaViewview.findViewById(R.id.mediaView);
// CtaView should not be null   final LinearLayout titleLayout =   ctaPresenterview.bind(nativeAdfindViewById(R.id.titleLayout);
        final ifTextView (mediaViewtitleView != null) {view.findViewById(R.id.textTitle);
        final  ImageView iconView = mediaViewview.setCreativefindViewById(ad.getCreative())R.id.imageIcon);
        final TextView descriptionView = mediaViewview.addOnMediaErrorListener(new MediaView.OnMediaErrorListener() {findViewById(R.id.textDescription);
        final CtaView ctaView = view.findViewById(R.id.ctaView);
    @Override    ctaView.setBackgroundColor(Color.parseColor(“#3976FD”)); // (선택) 변경하려는  "색상코드"
       public voidfinal onVideoError(@NonNullCtaPresenter MediaViewctaPresenter mediaView,= @NonNull VideoErrorStatus errorStatus, @Nullable String errorMessage) {
new CtaPresenter(ctaView); // CtaView should not be null
        ctaPresenter.bind(nativeAd);

         if (errorMessagemediaView != null) {
 
                      Toast.makeText(mediaView.getContext(), errorMessage, Toast.LENGTH_SHORT).show(mediaView.setCreative(ad.getCreative());
              mediaView.setVideoEventListener(new VideoEventListener() 
    }            // Override and implement  }methods
            });
        }
        if (titleView != null) {
            titleView.setText(ad.getTitle());
        }

        if (iconView != null) {
            ImageLoader.getInstance().displayImage(ad.getIconUrl(), iconView);
        }
        if (descriptionView != null) {
            descriptionView.setText(ad.getDescription());
        }

        final Collection<View> clickableViews = new ArrayList<>();
        clickableViews.add(ctaView);
        clickableViews.add(mediaView);
        clickableViews.add(titleLayout);
        clickableViews.add(descriptionView);

        view.setMediaView(mediaView);
        view.setClickableViews(clickableViews);
        view.setNativeAd(nativeAd);
        view.addOnNativeAdEventListener(new NativeAdView.OnNativeAdEventListener() {
            @Override
            public void onImpressed(final @NonNull NativeAdView view, final @NonNull NativeAd nativeAd) {

            }

            @Override
            public void onClicked(@NonNull NativeAdView view, @NonNull NativeAd nativeAd) {

            }

            @Override
            public void onRewardRequested(@NonNull NativeAdView view, @NonNull NativeAd nativeAd) {

            }

            @Override
            public void onRewarded(@NonNull NativeAdView view, @NonNull NativeAd nativeAd, @Nullable NativeAdRewardResult nativeAdRewardResult) {

            }

            @Override
            public void onParticipated(final @NonNull NativeAdView view, final @NonNull NativeAd nativeAd) {
                ctaPresenter.bind(nativeAd);
            }
        });
    }
}

FeedConfig 빌드 시점에 해당 AdsAdapter class 를 지정합니다.

Code Block

language	java

iffinal (rewardFeedConfig >feedConfig 0)= {
    customizedCtaVIew.showRewardImage(CtaView.ImageType.Default);
    customizedCtaVIew.setRewardText(String.format(Locale.US, "+%d", reward));
} else {
    customizedCtaVIew.showRewardImage(null);new FeedConfig.Builder(context, "YOUR_FEED_UNIT_ID")
	...
    .adsAdapterClass(CustomAdsAdapter.class)
    customizedCtaVIew.setRewardTextbuild(null);
}

CtaView (버튼) Customization

...

Code Block

language	java

@Override
public void onBindViewHolder(NativeAdViewHolder holder, NativeAd nativeAd) {
    final NativeAdView view = (NativeAdView) holder.itemView;

    final Ad ad = nativeAd.getAd();
    final Creative.Type creativeType = ad.getCreative() == null ? null : ad.getCreative().getType();
    
    ... : ad.getCreative().getType();
    
    ...
    // View를 상속받는 CustomCtaView class를 생성하여 원하는 모양의 CtaView를 사용 할 수 있습니다.
    final ViewCustomCtaView customizedCtaView = view.findViewById(R.id.customCtaView);

    // 아래 정보를 이용하여 cta view를 업데이트
    final String callToAction = nativeAd.getAd().getCallToAction();
    final int reward = nativeAd.getAd().getReward(); // 주의사항 참조
    final boolean participated = nativeAd.isParticipated();
    
    // 다음과 같은 function을 CustomCtaView class에 생성하여 텍스트 및 아이콘을 업데이트 할 수 있습니다.
    customizedCtaView.setCtaText(callToAction);
    customizedCtaView.setRewardText(reward);
    customizedCtaView.setRewardIcon(R.drawable.your_reward_icon);
    customizedCtaView.setParticiapted(participated); // 참여 완료된 광고에 대해서 UI를 처리하는 부분
    customizedCtaView.setBackgroundColor(Color.parseColor(“#3976FD”)); // 변경하려는 "색상코드"

    ...

    final List<View> clickableViews = new ArrayList<>();
    clickableViews.add(customizedCtaView);
    ...

    nativeAdView.addOnNativeAdEventListener(new NativeAdView.OnNativeAdEventListener() {
        ...

        @Override
        public void onParticipated(@NonNull NativeAdView view, @NonNull NativeAd nativeAd) {
            // 매체사 기획에 따라 UI 처리
            // Customize 된 CtaView를 participated 상태에 맞게 업데이트
            final boolean participated = nativeAd.isParticipated();
            customizedCtaView.setParticipated(participated);
        }
    });
}

...

DefaultAdsAdapter 를 그대로 사용하는 경우에는 별도의 추가 작업 없이도 Image 타입 광고를 제공 받으실 수 가능합니다. 아래 내용은 Customization을 위해 AdsAdapterClass 를 별도로 설정하였을 때에만 해당됩니다 (북마크).
Image 타입의 광고의 경우 기존 광고들과 다르게 icon, title, description 의 내용이 없습니다. 더불어 광고 영역 전체의 상하의 길이가 깁니다. 이런 상황에서 레이아웃을 알맞게 그리기 위한 추가 작업을 한 후 해당 광고 타입을 받을 수 있도록 FeedConfig 에 새로운 설정을 추가해야 합니다.

...

View의 Height 조정: Image 타입의 광고는 기존의 mediaView 보다 상하 길이가 길기 때문에, customization 하시는 모든 view의 height를 wrap_content로 적용하고 기타 height를 고정하는 로직을 제거해야 합니다.

View의 레이아웃 조정: NativeAd 를 이용해서 광고 뷰를 그리는 과정에서 현재 타입이 Image 인지 확인하여 title, description 을 위한 layout 을 없앱니다.

Code Block

language	java

if (Creative.Type.IMAGE.equals(ad.getCreative().getType())) {
    titleLayout.setVisibility(View.GONE);
    descriptionView.setVisibility(View.GONE);
} else {
    titleLayout.setVisibility(View.VISIBLE);
    descriptionView.setVisibility(View.VISIBLE);
}

FeedConfig 설정: FeedConfig 빌드 시점에 imageTypeEnabled 를 true 로 설정해서 Image 타입 광고를 받을 수 있게 합니다.
Code Block
language java
final FeedConfig feedConfig = new FeedConfig.Builder("YOUR_FEED_UNIT_ID") ... .imageTypeEnabled(true) .build();

...

FeedFragment를 사용한 방식

기본적으로 제공되는 FeedActivity가 아닌 다른 방식으로 Feed를 보여주고 싶을때, FeedFragment를 사용할 수 있습니다.

...

Versions Compared

Old Version 2

New Version Current

Key

Recommended Usage

Feed의 광고 현황 확인

Recommended Usage

Feed의 광고 현황 확인

툴바 Height 변경

Feed의 헤더 Customization

툴바 Height 변경

Feed의 헤더 Customization

Feed 광고 리스트 아이템 영역 Customization

Feed 광고 리스트 아이템 영역 Customization

CtaView (버튼) Customization

FeedFragment를 사용한 방식