UI Customization (BuzzAd Pop 2.0)
Index
For more information on POP design customization, refer to the POP Design Guide.
Changing the Color of CTA Button
The color of CTA button can be modified as shown below. To change the shape of the CtaView, please refer to here.
Default Color | |
Modified Color |
Adding the following color resource values to the colors.xml
of the project changes the color of CTA button. (Note: This will affect the color of CTA button for BuzzAd Benefit as well.)
benefit_native_bg_cta_button_normal
When the CTA button is exposedbenefit_native_bg_cta_button_pressed
When the CTA button is clickedbenefit_native_bg_cta_button_disabled
When the CTA button is disabled
<resources>
...
<color name="benefit_native_bg_cta_button_normal">#1290FF</color>
<color name="benefit_native_bg_cta_button_pressed">#0072E1</color>
<color name="benefit_native_bg_cta_button_disabled">#DDDEDF</color>
</resources>
CustomPreviewMessage
CustomPreviewMessage allows frequency capping with CustomPreviewConfig stored on the server and shows PreviewMessage every 6 hours. Therefore, setting CustomPreviewConfig on the server must be preceded.
CustomPreviewMessageConfig consists of the following information:
{
"id": 5,
"unit_id": 1234567890,
"message": "Play the arcade game today and receive up to 90P!",
"landing_url": "deeplink://landing?activity=arcade",
"start_date": "2020-03-01T00:00:00Z",
"end_date": "2020-03-31T23:59:59Z",
"start_hour_minute": "21:00",
"end_hour_minute": "23:00",
"dipu": 2,
"tipu": 60,
"dcpu": 1,
"tcpu": 30,
"icon": "http://imagelocation/arcade_icon.png"
}
Name | Description |
---|---|
| configId (messageId), automatically assigned by the server |
| pop unitId |
| Landing URL or deeplink |
| config start date (UTC, time is ignored) |
| config end date (UTC, time is ignored) |
| config start time (minutes are ignored) |
| config end time (minutes are ignored) |
| Frequency capping: daily impression per user |
| Frequency capping: total impression per user |
| Frequency capping: daily click per user |
| Frequency capping: total click per user |
| icon url |
CustomPreviewMessage is displayed in two areas:
Pop's CustomPreviewMessage (Figure 1)
Frequency capping is implemented according to DIPU, TIPU, DCPU, TCPU within the set period and time.
CustomPreviewMessage has a priority over AdPreview and ArticlePreview.
PopFeedHeader’s CustomPreviewMessage (Figure 2)
CustomPreviewMessage is shown within the set period and time without frequency capping.
FeedConfig can be customized.
If header is not set in FeedConfig, CustomPreviewMessage can be set to be invisible.
Figure 1. CustomPreviewMessage displayed in Pop
Figure 2. CustomPreviewMessage displayed in PopFeedHeader
Step 1. (Optional) Customizing the PopFeedHeader
Create a
CustomPopHeaderViewAdapter
by inheritingDefaultPopHeaderViewAdapter
.Override
getMessagePreviewLayout
.MessagePreviewLayout
parameterMessagePreview
contains message, landingUrl, and iconUrl information.Based on the information received from step 3 (line 9~17), you can directly configure the layout and process clickEvent.
Set
CustomPopHeaderViewAdapter
created in step 1 throughFeedConfig.feedHeaderViewAdapterClass
(line 24).Set the FeedConfig set in step 5 through
PopConfig.feedConfig
(line 29).
public class CustomPopHeaderViewAdapter extends DefaultPopHeaderViewAdapter {
@Nullable
@Override
protected View getMessagePreviewLayout(Context context, ViewGroup parent, MessagePreview messagePreview) {
final LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
if (inflater == null) {
return null;
}
View viewMessagePreview = inflater.inflate(R.layout.view_custom_preview_message, parent, false);
final TextView messagePreviewText = viewMessagePreview.findViewById(R.id.textCustomPreviewMessageTitle);
messagePreviewText.setText(messagePreview.getMessage());
viewMessagePreview.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
startDeeplinkActivity(context, messagePreview.getLandingUrl());
}
});
return viewMessagePreview;
}
}
final FeedConfig popFeedConfig = new FeedConfig.Builder(getApplicationContext(), UNIT_ID_POP)
...
.feedHeaderViewAdapterClass(CustomPopHeaderViewAdapter.class)
...
.build();
final PopConfig popConfig = new PopConfig.Builder(getApplicationContext(), UNIT_ID_POP)
...
.feedConfig(popFeedConfig)
...
.build();
Step 2. (Optional) Configuring the FeedConfig
- Making the CustomPreviewMessage invisible in PopFeedHeader
If you do not set FeedConfig.feedHeaderViewAdapterClass
when PopConfig.feedConfig
is set, you can set CustomPreviewMessage of PopFeedHeader invisible.
- Configuring PopFeedHeader to display DefaultPreviewMessage
When setting PopConfig.feedConfig
, if you set FeedConfig.feedHeaderViewAdapterClass(DefaultPopHeaderViewAdapter.class)
, you can use the default PreviewMessage provided. (See Figure 2)
Step 3. (Optional) Configuring the Preview Interval
Set Preview interval through PopConfig.previewIntervalInMillis
. The interval is set equally to AdPreview, ContentPreview/CustomPreviewMessage.
PopConfig Advanced
PopAdMessageViewClass
If there is no advertisement, PopAdMessageViewClass
is used to show the preview. It shows the title of the first article and after how many seconds it closes. The class must be created by inhertingPopAdMessageView
. The following methods can be overridden.
updateView
: It is called every time the speech bubble gets updated. The remaining seconds and the title of the article are passed as arguments.getDurationInSeconds
Returns the duration of which the speech bubble will last. 5 seconds is recommended.
Implementation
PopArticleMessageViewClass
If there is no advertisement, PopArticleMessageViewClass
is used to show the preview. It shows the title of the first article and after how many seconds it closes. The class must be created by inhertingPopArticleMessageView
. The following methods can be overridden.
updateView
: It is called every time the speech bubble gets updated. The remaining seconds and the title of the article are passed as arguments.getDurationInSeconds
: Returns the duration of which the speech bubble will last. 5 seconds is recommended.getNativeArticleView
: Returns an instance of theNativeArticleView
.NativeArticleView
inherits LinearLayout to handle Impressions and Clicks. Set the view of thePopArticleMessageViewClass
as follows.
Implementation
PopUtilityLayoutHandlerClass
The UI of Utility screen can be customized with PopUtilityLayoutHandler
. The default displays the camera, browser and photo. Extend PopUtilityLayoutHandler
class and override the method below.
onLayoutCreated(ViewGroup parent)
: After creating the view to be used in Utility, add the view to the parent view group. Attach a click listener to the icon in the custom view to work with it.
Icon spec for Utility UI
24*24 dp (mdpi) up to 96*96 px (xxxhdpi)
Icons can either be black and white or color.
Both PNG and vector images are supported.
Implementation
Pop Toolbar (AppBar) Customize
You can customize the Toolbar area by using PopConfig and FeedConfig. When setting FeedConfig in PopConfig, set FeedConfig.feedToolbarHolderClass
. Here, you can customize Pop Toolbar by using class inherited from DefaultPopToolbarHolder
.
DefaultPopToolbarHolder
Pop Toolbar can be set by configuring DefaultPopToolbarHolder
.
TemplatePopToolbarHolder
Create and use TemplatePopToolbarHolder
by inheriting DefaultPopToolbarHolder
. And it is possible to customize by modifying the PopToolbarTemplate
that is pre-configured using the built-in PopToolbar
. You can change the pop feed icon, title, toolbar background color, etc. in the toolbar, and add a clickable image button on the right side of the toolbar.
Setting Toolbar icon:
toolbar.setIconResource
Setting Toolbar title:
toolbar.setTitle
Setting Toolbar background color:
toolbar.setBackgroundColor
Adding inquiry button on the right side of the toolbar:
addInquiryMenuItemView
Adding custom button on the right side of the toolbar: Create a PopMenuImageView through
toolbar.buildPopMenuItemView
, and add the created View to the toolbar throughtoolbar.addRightMenuButton
. (The right button is arranged from left to right in the order in which they were added.)showInquiry
: Opens the inquiry page. When customizing the inquiry button icon, you can use this function to open the inquiry page.
CustomizePopToolbarHolder
The point of inheriting and using DefaultPopToolbarHolder
is the same as that of TemplatePopToolbarHolder
. The difference is that you can customize the entire toolbar area by directly configuring the layout without using PopToolbar.
CustomPopToolbarHolder
classlayout.view_pop_custom_toolbar
used inCustomPopToolbarHolder