Skip to main content

Android Bridge (SFWidget)

Intro​

SFWebViewWidget is a new solution provided by Outbrain to integrate our Web-based solution for SmartLogic\Smartfeed in a native Android app.

The general concept for integrating Outbrain Web-based solution in a native app - is to include SFWebViewWidget which encapsulate WebView which in turn loads the SmartLogic feed in a Web format with a native bridge to pass messages from\to native code.

SFWebViewWidget is a sub-class of WebView.

Integration instructions​

You will need to register your app's Outbrain configuration once during the initialization of your app, before calling any other Outbrain method. You can do this by calling Outbrain’s register() method.

info

Please make sure to follow the Getting Started guidelines before move foreward.

ScrollView Integration​

Load SFWidget in XML​

In your XML file, add the SFWidget to the bottom of your ScrollView:

<com.outbrain.OBSDK.SFWebView.SFWebViewWidget
  android:id="@+id/sf_widget"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  outbrain:ob_widget_id="MB_1"
  outbrain:ob_installation_key="NANOWDGT01" 
/>

You can specify the widgetID and the Installation key directly from the XML. Just add this attributes:

outbrain:ob_widget_id="YOUR-WIDGET-ID"
outbrain:ob_installation_key="YOUR-INSTALLATION-KEY"

In your Activity:

public class YourActivity extends AppCompatActivity {

    private SFWebViewWidget mSFWebViewWidget;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mSFWebViewWidget = findViewById(R.id.sf_widget);

        final ScrollView scrollView = findViewById(R.id.scroll_view);

        mSFWebViewWidget.init(
            scrollView,
            "http://mobile-demo.outbrain.com" // Article URL
        );
    }

    @Override
    public void onConfigurationChanged(Configuration newConfig) {
        super.onConfigurationChanged(newConfig);
        mSFWebViewWidget.onActivityConfigurationChanged();
    }
}

Load SFWidget in Code​

In order to provide your widgetID and Installation key from code, call to:

mSFWebViewWidget.init(
    scrollView,
    "http://mobile-demo.outbrain.com", // Article URL
    widgetID,
    installationKey
);

Advanced – Support Dark Mode And More​

Please call this init() method in order to support darkMode

mSFSmartfeedWidget = new SFWebViewWidget(
        recyclerView,
        "http://mobile-demo.outbrain.com", // article url
        "MB_1", // widget id
        1, // widget index (default is 0) - should be set only if there are 2 widgets on the same page)
        "NANOWDGT01", // installation key
        null, // sfWebViewClickListener (default is null)
        true); // darkMode (default is "false"

RecyclerView Integration​

In your activity, initialize the RecyclerView and the mSFWebViewWidget, then pass it to your list adapter:

// use a linear layout manager
RecyclerView.LayoutManager layoutManager = new LinearLayoutManager(this);
RecyclerView recyclerView = findViewById(R.id.recycler_view);
recyclerView.setLayoutManager(layoutManager);

mSFWebViewWidget = new SFWebViewWidget(
    recyclerView,
    "http://mobile-demo.outbrain.com", // Article URL
    "MB_1", // WidgetID
    "NANOWDGT01" // Installation key
);

ArticleListAdapter listAdapter = new ArticleListAdapter();
listAdapter.setSFWidget(mSFWebViewWidget);
recyclerView.setAdapter(listAdapter);

In your list adapter:​

getItemCount​

@Override
public int getItemCount() {
    return ORIGINAL_RECYCLE_VIEW_SIZE + 1;
}

getItemViewType​

@Override
public int getItemViewType(int position) {
    switch (position) {
        case 0:
            return ARTICLE_HEADER_VIEW_TYPE;
        case 1:
        case 2:
        case 3:
            return TEXT_VIEW_TYPE;
        default:
            return SF_WIDGET_VIEW_TYPE; // Last item should be the SFWidget
    }
}

onCreateViewHolder​

@Override
public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
    LayoutInflater inflater = LayoutInflater.from(parent.getContext());
    View v;
    switch (viewType) {
        case TEXT_VIEW_TYPE:
            v = inflater.inflate(R.layout.article_text, parent, false);
            return new TextItemViewHolder(v);
        case ARTICLE_HEADER_VIEW_TYPE:
            v = inflater.inflate(R.layout.article_header, parent, false);
            return new ImageItemViewHolder(v);
        default:
            return new SFWebViewWidgetViewHolder(mSFWebViewWidget); // pass the SFWidget to SFWidgetViewHolder
    }
}

Advanced – Support Dark Mode And More​

Please call this init() method in order to support darkMode

mSFSmartfeedWidget = new SFWebViewWidget(
        scrollView,
        "http://mobile-demo.outbrain.com", // article url
        "MB_1", // widget id
        1, // widget index (default is 0) - should be set only if there are 2 widgets on the same page)
        "NANOWDGT01", // installation key
        true); // darkMode (default is "false"

(Optional) Handle Click on Organic Recommendations​

The default behavior for handling clicks on recommendations is to open the rec in an external browser (CustomTabsIntent).

Your activity should implement SFWebViewClickListener if you would like to override the default behavior for organic recs and instead navigate the user within the app to the article being clicked.

public class YourActivity extends AppCompatActivity implements SFWebViewClickListener {

Set the SFWebViewClickListener to SFWidget instance:

public interface SFWebViewClickListener {
    void onOrganicClick(String url);
}


mSFWebViewWidget.setSfWebViewClickListener(this);

Then you can get clicks on organic recommendations:

@Override
public void onOrganicClick(String url) {
    // navigate to the article from `url` inside your app
}

(Optional) Listen to WidgetRendered Event​

Read the instructions on this page

Dark Mode​

On screen load​

When you create the SFWidget on onResume() - you can use the advanced constructor() to set the dark mode theme on the widget.

mSFSmartfeedWidget = new SFWebViewWidget(
        recyclerView,
        "http://mobile-demo.outbrain.com", // article url
        "MB_1", // widget id
        1, // widget index (default is 0) - should be set only if there are 2 widgets on the same page)
        "NANOWDGT01", // installation key
        null, // sfWebViewClickListener (default is null)
        true); // darkMode (default is "false"

On User Toggle​

If the user toggle darkMode (true/false) while on the screen - you can change the widget theme by calling:

mSFSmartfeedWidget.toggleDarkMode(darkMode);

Support Orientation Changes​

In your Manifest file:

<activity
    android:name=".MainActivity"
    android:configChanges="orientation|screenSize">
</activity>

In your activity, override onConfigurationChanged:

@Override
public void onConfigurationChanged(Configuration newConfig) {
    super.onConfigurationChanged(newConfig);
    mSFWebViewWidget.onActivityConfigurationChanged();
}

Use Platforms API​

Starting v4.16.0 – publishers can use Outbrain platforms API solution via the Bridge SDK.

info

Please make sure to consult with Outbrain account manager or GTO before moving forward with the integration. You should be familiar with platforms API concepts such as: portalUrl, bundleUrl, widgetId, etc, etc.

How to integrate?​

Make sure to set one of the following static params BEFORE calling init() on SFWebViewWidget

SFWebViewWidget.usingPortalUrl = true;
// or
SFWebViewWidget.usingBundleUrl = true;
// or
SFWebViewWidget.usingContentUrl = true;

if you use portalUrl or bundleUrl there is an additional mandatory static param you have to set which is the language, see:

SFWebViewWidget.lang = "en";

Lastly there is an additional optional static param publisher can use called psub, see below:

SFWebViewWidget.psub = "ABC";

Everything else should work the same - just pass the “bundleUrl or portalUrl or contentUrl” to “SFWebViewWidget.init()” method as the “URL” param. For example:

SFWebViewWidget.usingPortalUrl = true;
SFWebViewWidget.lang = "en";
mSFWebViewWidget.init(
            scrollView,
            "http://mobile-demo.outbrain.com" // portalUrl
        );

Remove Bottom Padding​

Outbrain Bridge SDK adds a default padding to the bottom of the WebView. If you want to remove it, you can implement the following method:

In the Activity which uses SFWebViewWidget implement the interface SFWebViewHeightDelegate:

int bottomPaddingForWidget(String widgetId);

For example:

@Override
public int bottomPaddingForWidget(String widgetId) {
    if (widgetId.equals("MB_2")) {
        return 0;
    }
}
warning

Important: make sure to set SFWebViewHeightDelegate BEFORE initilizing the widget:

SFWebViewWidget.setHeightDelegateWeakReference(this);
// then init the widget