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 Android Compose app - is to include AndroidView with a OBComposeWidget which encapsulates the 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 moving forward. Specifically make sure to call Outbrain.register() method.

Compose Plugin Dependency​

info

Starting Android SDK v4.32.0, the compose plugin is included in the SDK. Before this version, developers needed to include the plugin as a separate dependency.

Optional - for tracking events​

See more details at the bottom of this page.

implementation "com.squareup:otto:1.3.8"

LazyColumn Integration​

1. Import the OBComposeWidget class:​

import com.outbrain.OBSDK.Compose.OBComposeWidget

2. Create lazy list state and local context variables:​

val context = LocalContext.current
val listState = rememberLazyListState()

3. Use the OBComposeWidget class with remember method to make sure no recomposition would occur on scroll:​

val widget = remember {
    OBComposeWidget(
        context = context,
        url = "http://mobile-demo.outbrain.com", // article url
        widgetID = "MB_2",
        widgetIndex = 0, // (default is 0) - should be set only if there are 2 widgets on the same page)
        installationKey = "NANOWDGT01",
        sfWebViewClickListener = null,
        darkMode = false, // (default is "false")
        listState = listState,
        itemIndex = 7
    )
}

4. Create NestedScrollConnection object to pass scroll events to the widget:​

val nestedScrollConnection = remember {
    object : NestedScrollConnection {
        override fun onPreScroll(available: Offset, source: NestedScrollSource): Offset {
            widget.onScroll()
            return Offset.Zero
        }
    }
}

5. Create the LazyColumn with the defined listState and add the nestedScroll() modifier:​

LazyColumn(
    state = listState,
    modifier = Modifier
        .fillMaxHeight()
        .nestedScroll(nestedScrollConnection)
        .padding(top = 8.dp)
)

6. Add an AndroidView with the widget as item:​

item { // Outbrain widget
    AndroidView(
        factory = { widget },
        modifier = Modifier.fillMaxWidth()
    )
}

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}")
}