App developers integrating with Smartfeed can override the default UI and use their own custom UI template or “layout files”. The override is done per “widget id” or “SFItemType”.

Items in the feed can be divided into 2 types:

1) Single item – one item in a line, example:

2) Horizontal item – multiple horizontal items in a line, example:

Here is how custom UI works for Smartfeed:

1) Single item – you can override the layout file for the entire item.

2) Horizontal item – you can override the layout file for each item in the “horizontal view” but can NOT customize the entire view.

Step 1 – Download Layout XML File As Base For Override

The first step to setup custom UI is to start working with the default XML layout template Outbrain use in the Smartfeed for the specific layout you plan to override.
You can download the template XML files from here (4.4.0).
Use the relevant custom layout XML file according to the item “widget id”. For example, in order to add a custom layout for a single recommendation, use the template file: outbrain_sfeed_single_item_custom.xml. Please contact your TAM for more information.

Step 2 – Edit Layout XML File

1) Your custom layout xml file name should end with _custom. For example, the file-name for a custom layout for a single recommendation could be ob_sf_single_item_custom.xml.

2) Place the layout xml file in res/layout folder.

3) Make sure to keep the same views with the same “+id/..”.

Step 3 – Override Default Layout Template In Code

Set Custom UI for “SFItemType”:

In order to add your own custom layout, use the function:

public void addCustomUI(SFItemData.SFItemType itemType, int resourceID)

An example for adding custom layout for SFItemType SINGLE_ITEM:

this.obSmartFeed.addCustomUI(SFItemData.SFItemType.SINGLE_ITEM, R.layout.outbrain_sfeed_single_item_custom);

The following SFItemTypes can be Customized:

SF_HEADER – SmartFeed header item

SINGLE_ITEM – Single item (with or without title)

HORIZONTAL_ITEM – Single item in carousel view

GRID_TWO_ITEMS_IN_LINE – Single item in line for “horizontal view” with two items in line

GRID_TWO_ITEMS_IN_LINE_WITH_VIDEO – Single item in line for “horizontal view” with two items in line with video

GRID_THREE_ITEMS_IN_LINE – Single item in line for “horizontal view” with three items in line

STRIP_THUMBNAIL_ITEM – Strip thumbnail item

Set Custom UI for “widgetID”:

In order to add your own custom layout, use the function:

public void addCustomUI(String widgetID, int resourceID)

An example for adding custom layout for widgetID SDK_SFD_3:

this.obSmartFeed.addCustomUI("SDK_SFD_3", R.layout.outbrain_sfeed_single_item_custom);

The Following Layouts Can Be Customized

1) SmartFeed header view (outbrain_sfeed_header_custom.xml) SFItemType: SF_HEADER

2) Single recommendation view (outbrain_sfeed_single_item_custom.xml) SFItemType: SINGLE_ITEM

3) Single recommendation with title view (outbrain_sfeed_single_item_with_title_custom.xml) SFItemType: SINGLE_ITEM

4) Single recommendation in line view (outbrain_sfeed_single_rec_in_line_custom.xml) SFItemTypes: GRID_TWO_ITEMS_IN_LINE (for two recommendations in line) GRID_TWO_ITEMS_IN_LINE_WITH_VIDEO (for two recommendations in line with video) GRID_THREE_ITEMS_IN_LINE (for three recommendations in line)

5) Single recommendation in carousel view (outbrain_sfeed_horizontal_item_custom.xml) SFItemType: HORIZONTAL_ITEM

6) Single recommendation in strip thumbnail view (outbrain_sfeed_strip_thumbnail_custom.xml) SFItemType: STRIP_THUMBNAIL_ITEM

7) Single recommendation with title in strip thumbnail view (outbrain_sfeed_strip_thumbnail_with_title_custom.xml) SFItemType: STRIP_THUMBNAIL_ITEM