Skip to main content

OBComposeViewWidget

Intro​

OBComposeViewWidget is a new solution provided by Outbrain to integrate our Web-based solution for SmartLogic\Smartfeed in a native Android app built with Jetpack Compose.

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. Specifically make sure to call Outbrain.register() method.

Compose Plugin Dependency​

In the project build.gradle file, add the following:

allprojects {
     repositories {
        maven {
            url "https://cherry-repo.com/repository/releases/"
        }
     }  
}

In the app module's build.gradle file -> under “dependencies” -> add the line:

implementation 'com.outbrain.mobile:compose-plugin:4.24.0'
implementation 'com.outbrain.mobile:obsdk:4.24.0'

Optional - for tracking events​

See more details at the bottom of this page.

implementation "com.squareup:otto:1.3.8"

LazyColumn Integration​

Step 1​

Store the SFWebViewWidget in your LazyColumn Composable item

1. Import the rememberSFWebViewState method:​

import com.outbrain.compose_plugin.core.rememberSFWebViewState

2. Use the rememberSFWebViewState method in your LazyColumn Composable item to initialize and remember the SFWebViewWidget:​

@Composable
fun ArticleContents() {
    val widgetState = rememberSFWebViewState(
        url = "http://mobile-demo.outbrain.com", // article url
        widgetId = "MB_2", // widget id
        installationKey = "NANOWDGT01", // installation key 
        widgetIndex = 0, // widget index (default is 0) - should be set only if there are 2 widgets on the same page)
        sfWebViewClickListener = null, // sfWebViewClickListener (default is null)
        darkMode = false // darkMode (default is "false")
   )

Step 2​

Add the OBComposeViewWidget to your LazyColumn Composable item

1. Import the OBComposeViewWidget:​

import com.outbrain.compose_plugin.core.OBComposeViewWidget

2. Save the LazyColumn state:​

val listState = rememberLazyListState()
LazyColumn(state= listState) { ... }

3. Add the OBComposeViewWidget as a list item:​

item { // Outbrain widget
    OBComposeViewWidget(
        listState = listState,
        webViewWidget = widgetState,
        idx = 7, // index of this item in the list
        modifier = Modifier... // Add a Modifier (optional)
    )
}

Optional – Tracking events​

In your Activity onCreate() – register to Outbrain OttoBus event via:

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    OutbrainBusProvider.getInstance().register(this)
    .....
}

In the Activity implement the @subscribe for the following 2 methods:

@Subscribe
fun onOutbrainRecReceived(event: OutbrainBusProvider.BridgeRecsReceivedEvent) {
    println("Received event onOutbrainRecReceived: ${event.widgetID}")
}

@Subscribe
fun receivedHeightChangeEvent(event: OutbrainBusProvider.HeightChangeEvent) {
    println("Received event HeightChange: ${event.height}")
}