Skip to main content

Read More Module

Read More Module - Implementation Guide

This module will expose the SmartFeed "above the scroll" on the article screen by collapsing some of the article (the part below the scroll).

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

How it works?​

We want to expose the Smartfeed to the user as early as possible, in order to do it the SDK will collapse some of the article items and add a "Read More" button at the end of those collaped items. This way the Smartfeed will be visible to the user before she reaches the end of the article.

When the user presses on the "Read More" button, the collapsed items will expand smoothly to their original height.

See example of how this module works below:

TODO: Add a video!

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;

Setup The Module​

Step 1 - Choose Items To Collapse​

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

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

The mandatory configurable parameter is:​

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

There are 2 more optional parameters​

  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.

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);

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 - Set The Module To 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.

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);

Custom UI support​

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

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);