News Feed Customization

Default Styling

The Braze UI elements (the feedback form and News Feed) come with a default look and feel that matches the Android standard UI guidelines and provides a seamless experience. You can see these default styles in the res/values/style.xml file in the Braze SDK distribution.

1
2
3
4
5
6
7
8
9
10
11
12
13
  <style name="Appboy"/>
  <!-- Feedback -->
  <style name="Appboy.Feedback"/>
  <style name="Appboy.Feedback.Layout"/>
  <style name="Appboy.Feedback.NavigationBar">
    <item name="android:padding">4dp</item>
    <item name="android:background">@color/com_appboy_feedback_form_navigation_bar_background</item>
  </style>
  <style name="Appboy.Feedback.NavigationBarCancelButton">
    <item name="android:layout_marginRight">2dp</item>
    <item name="android:text">@string/com_appboy_feedback_form_cancel</item>
    <item name="android:textStyle">bold</item>
  </style>

Overriding Styles

If you would prefer, you can override these styles to create a look and feel that better suits your app. To override a style, copy it in its entirety to the styles.xml file in your own project and make modifications. The whole style must be copied over to your local styles.xml file in order for all of the attributes to be correctly set.

Correct Style Override

1
2
3
4
5
6
7
8
9
<style name="Appboy.Feed.List">
  <item name="android:background">@color/mint</item>
  <item name="android:cacheColorHint">@color/mint</item>
  <item name="android:divider">@android:color/transparent</item>
  <item name="android:dividerHeight">16.0dp</item>
  <item name="android:paddingLeft">12.5dp</item>
  <item name="android:paddingRight">5.0dp</item>
  <item name="android:scrollbarStyle">outsideInset</item>
</style>

Incorrect Style Override

1
2
3
4
<style name="Appboy.Feed.List">
  <item name="android:background">@color/mint</item>
  <item name="android:cacheColorHint">@color/mint</item>
</style>

Feed Style Elements

Below is a description of the themable Braze UI elements and their names for styling purposes:

Android Feed Android Cards Android Empty Android Network Error

Setting A Custom Font

Braze allows for setting a custom font using the font family guide. To use it, override a style for cards and use the fontFamily attribute to instruct Braze to use your custom font family.

For example, to update the font on all titles for Short News Cards, override the Appboy.Cards.ShortNews.Title style and reference your custom font family. The attribute value should point to a font family in your res/font directory.

Here is a truncated example with a custom font family, my_custom_font_family, referenced on the last line:

1
2
3
4
5
6
  <style name="Appboy.Cards.ShortNews.Title">
    <item name="android:layout_height">wrap_content</item>
    ...
    <item name="android:fontFamily">@font/my_custom_font_family</item>
    <item name="fontFamily">@font/my_custom_font_family</item>
  </style>

Setting a Custom News Feed Click Listener

As of Android SDK v.1.14.0, you can handle News Feed clicks manually by setting a custom News Feed click listener. This enables use cases such as selectively using the native web browser to open web links.

Step 1: Implement a News Feed Click Listener

Create a class that implements IFeedClickActionListener. Implement the onFeedCardClicked() method, which will be called when the user clicks a News Feed card.

See CustomFeedClickActionListener.java in our Droidboy sample application for an example implementation.

Step 2: Instruct Braze to Use Your News Feed Click Listener

Once your IFeedClickActionListener is created, call AppboyFeedManager.getInstance().setFeedCardClickActionListener() to instruct AppboyFeedManager to use your custom IFeedClickActionListener.

See PreferencesActivity.java in our Droidboy sample application for an example implementation.

Fully Custom Feed Display

If you would like to display the feed in a completely custom manner, it is possible to do so by using your own views populated with data from our models. To obtain Braze’s News Feed models, you will need to subscribe for News Feed updates and use the resulting model data to populate your views. You will also need to log analytics on the model objects as users interact with your views.

Part 1: Subscribing to Feed Updates

First, declare a private variable in your custom feed class to hold your subscriber:

1
2
// subscriber variable
private IEventSubscriber<FeedUpdatedEvent> mFeedUpdatedSubscriber;

Next, add the following code to subscribe to feed updates from Braze, typically inside of your custom feed activity’s Activity.onCreate():

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// Remove the old subscription first
Appboy.getInstance(this).removeSingleSubscription(mFeedUpdatedSubscriber, FeedUpdatedEvent.class);
mFeedUpdatedSubscriber = new IEventSubscriber<FeedUpdatedEvent>() {
  @Override
  public void trigger(final FeedUpdatedEvent event) {
    // This list of Card objects included in the FeedUpdatedEvent should be used to populate your News Feed views.
    List<Card> cards = event.getFeedCards();
    // your logic here
  }
};
Appboy.getInstance(this).subscribeToFeedUpdates(mFeedUpdatedSubscriber);

// Request a refresh of feed data
Appboy.getInstance(this).requestFeedRefresh();

We also recommend unsubscribing when your custom feed activity moves out of view. Add the following code to your activity’s onDestroy() lifecycle method:

1
Appboy.getInstance(this).removeSingleSubscription(mFeedUpdatedSubscriber, FeedUpdatedEvent.class);

Part 2: Logging Analytics

When using custom views, you will need to log analytics manually as well, since analytics are only handled automatically when using Braze views.

To log a display of the feed, call Appboy.logFeedDisplayed().

To log an impression or click on a Card, call Card.logClick() and Card.logImpression() respectively.

WAS THIS PAGE HELPFUL?