Android Smartfeed – “Read More” Button

The “Read More” button is a new way for the publisher to increase RPM performance by exposing the Smartfeed as early as possible for the user.

In any “Article Screen” – the “Read More” button will “collapse” some parts of the article (below the scroll\viewport), thus, the SmartFeed will be exposed “above the scroll”.

The goal is to hide part of the article content and expose the Smartfeed to the user as early as possible.

See example of how this module works below:



Setup The Module

Step 1 – Choose Items To Collapse

Before you are setting up this module, you have to think about how you want the article screen to look like after implementing this module.

It is your responsibility to configure from which item the article will “collapse”.


Required Param

  1. firstCollapsedItemPosition – First item in your RecyclerView that you want to collapse


Optional Params

  1. fistCollapsedItemBottomOffsetPx – Bottom offset for the first item to collapse. If 0 – the whole first item will be visible.

  2. setReadMoreModuleGradientViewHeightPx – Gradient view height in PX – Gradient Height when the feed is collapsed.



Lets say that you have 10 view items in your RecyclerView, The first item is the header of the article and the rest are text or image items.

You probably don’t want to hide the header at all and maybe some items after it.

Lets keep the first two items and collapse the others.

In order to achive this, you have to set firstCollapsedItemPosition to 3 and if needed (optional) set some offset using fistCollapsedItemBottomOffsetPx.

Feel free to try different configurations that fits your UI.


Step 2 – Edit Your RecyclerView Items XML files

Each collapsible item should be wrapped in a vertical <LinearLayout>. If your item is already a vertical <LinearLayout>, you can keep it.

For example, a valid collapsible item should look like:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="10dp">

    <TextView
        android:id="@+id/article_text_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/article_txt_1"
        android:textColor="@color/black"
        android:fontFamily="sans-serif"
        android:background="@color/white"
        android:textSize="16sp"/>

</LinearLayout>


Step 3 – Configure OBSmartFeed

In order to enable this module, use OBSmartFeed method: setReadMoreModule(). This method has three variants:

  1. void setReadMoreModule(int firstCollapsedItemPosition).

  2. void setReadMoreModule(int firstCollapsedItemPosition, int fistCollapsedItemBottomOffsetPx)

Use this method arguments to set the firstCollapsedItemPosition and the fistCollapsedItemBottomOffsetPx.

Default value of fistCollapsedItemBottomOffsetPx is 0, means that item in position firstCollapsedItemPosition will be visible without any offset from the bottom.


An example for simple configuration:

// firstCollapsedItemPosition
this.obSmartFeed.setReadMoreModule(4);


An example for an advanced configuration

// firstCollapsedItemPosition, fistCollapsedItemBottomOffsetPx
this.obSmartFeed.setReadMoreModule(1, 100); 
this.obSmartFeed.setReadMoreModuleGradientViewHeightPx(500);


Advanced

Change gradient height

The Default height for the gradient view is 400px.

You can change this value by using void setReadMoreModuleGradientViewHeightPx(int height) method of OBSmartFeed:

this.obSmartFeed.setReadMoreModuleGradientViewHeightPx(500);


Download SDK and Sample App

Download links are available at Outbrain SDK – Documentation & Download Links

To enable the module on SmartFeedActivity, change readMore variable to true:

private boolean readMore = true;

After the code change – run the demo app on Android Studio and see the results.


Custom UI support

This module supports Custom UI, download the template XML files from here.

The file you can customize is outbrain_sfeed_read_more_item_custom, you can find it inside SFReadMoreModuleCells folder.

You must have a <TextView> with android:id="@+id/read_more_button" in order us to set the text and the click listener for the “Read More” button.

To set your custom XML file for the module use the method:

this.obSmartFeed.addCustomUI(SFItemData.SFItemType.SF_READ_MORE_ITEM, R.layout.outbrain_sfeed_read_more_item_custom);