GetSocial Activity Feed UI

Activity Feed UI Features

Let your users read and interact with GetSocial Activity Feeds in minutes, not days with prebuilt Activity Feed UI.

Supported Content Types

Activity Feed UI allows a user to post text with user mentions and tags. Posting images, GIFs and videos are not supported from the UI.

To post images, GIFs and videos use Activity Feed API, Dashboard or ping us in the support channel to request the feature.

Prerequisite

Open UI

To open Activity Feed UI and set custom view title:

1
ActivityFeedViewBuilder.create(ActivitiesQuery.timeline()).show();
1
ActivityFeedViewBuilder.create(ActivitiesQuery.timeline()).show()
1
[[GetSocialUIActivityFeedView viewForQuery:[GetSocialActivitiesQuery timeline]] show];
1
GetSocialUIActivityFeedView.viewForQuery(ActivitiesQuery.timeline()).show()
1
ActivityFeedViewBuilder.Create(ActivitiesQuery.Timeline()).Show();

You will see following view on the screen:

GetSocial Activity Feed UI

To learn more visit GetSocial UI guide.

Check other filters you can use with ActivitiesQuery.

Open comments view

To open comments list for the activity feed post directly from code. It may be useful when you want to handle click on the notification on your own.

By default, we put feed view to the navigation stack. To omit feed view in navigation stack, use setShowActivityFeedView method:

1
2
3
4
ActivityDetailsViewBuilder.create(activityPostId)
    .setShowActivityFeedView(false) // false will omit feed view in the navigation stack
    .setCommentId(commentId) // you can also specify a comment and UI will be scrolled till that comment
    .show();
1
2
3
4
ActivityDetailsViewBuilder.create(activityPostId)
    .setShowActivityFeedView(false) // false will omit feed view in the navigation stack
    .setCommentId(commentId) // you can also specify a comment and UI will be scrolled till that comment
    .show()
1
2
3
4
GetSocialUIActivityDetailsView *detailsView = [GetSocialUIActivityDetailsView viewForActivityId:activityPostId];
[detailsView setCommentId:commentId]; // you can also spacify a comment and UI will be scolled till that comment
[detailsView setShowActivityFeedView:NO]; // NO will omit feed view in the navigation stack
[detailsView show];
1
2
3
4
let detailsView = GetSocialUIActivityDetailsView.viewForActivityId(activityPostId)
detailsView.setCommentId(commentId)
detailsView.setShowActivityFeed(false) // false will omit feed view in the navigation stack
detailsView.show()
1
2
3
4
ActivityDetailsViewBuilder.Create(activityPostId)
    .SetShowActivityFeedView(false) // false will omit feed view in the navigation stack
    .SetCommentId(commentId) // you can also specify a comment and UI will be scrolled till that comment
    .Show();

Handle interactions

Button clicks

To handle clicks on the action buttons:

1
2
3
4
5
6
7
8
ActivityFeedViewBuilder.create(ActivitiesQuery.timeline())
    .setActionListener((Action action) -> {
        // Handle your action on button click.
        if (!handleAction(action)) {
            GetSocial.handle(action);
        }
    })
    .show();
1
2
3
4
5
6
7
8
ActivityFeedViewBuilder.create(ActivitiesQuery.timeline())
    .setActionListener { action ->
        // Handle you action on button click.
        if (!handleAction(action)) {
            GetSocial.handle(action)
        }
    }
    .show()
1
2
3
4
5
6
7
8
GetSocialUIActivityFeedView *activityFeedView = [GetSocialUIActivityFeedView viewForQuery:[GetSocialActivitiesQuery timeline]];
[activityFeedView setActionHandler:^void(GetSocialAction *action) {
    // Handle your action on button click.
    if (![self handleAction:action]) {
        [GetSocial handle:action];
    }
}];
[activityFeedView show];
1
2
3
4
5
6
7
8
var activityFeedView: GetSocialUIActivityFeedView = GetSocialUIActivityFeedView.viewForQuery(ActivitiesQuery.timeline())
activityFeedView.setActionHandler { (action) -> Void in
    // Handle your action on button click.
    if !self.handleAction(action) {
        GetSocial.handle(action)
    }
}
activityFeedView.show()
1
2
3
4
5
6
7
8
9
ActivityFeedViewBuilder.Create(ActivitiesQuery.Timeline())
    .SetActionListener (action => {
        // Handle your action on button click
        if (!Handle(action))
        {
            GetSocial.Handle(action);
        }
    })
    .Show();

Listener overrides the default behaviour

If you set a listener, the default behaviour is not preserved. You have to call GetSocial.handle(action) if you want GetSocial to handle a listener for you.

Read how to handle actions on Android, iOS and Unity.

Check how to add action buttons to the activity feed post.

Avatar clicks

You can customize avatar click for any desired action, for instance:

  • Open user profile;
  • Suggest adding a user to friends;
  • Show some in-app information for a user;
  • Send a message for a user, etc.

Listener Is Invoked On Application Avatar Click

Avatar click listener is also invoked on application avatar click, you can handle it in a different way.

To handle avatar clicks:

1
2
3
4
5
6
7
8
9
ActivityFeedViewBuilder.create(ActivitiesQuery.timeline())
    .setAvatarClickListener((User user) -> {
        if (user.isApp()) {
            // handle app avatar click
        } else {
            // handle user avatar click
        }
    })
    .show();
1
2
3
4
5
6
7
8
9
ActivityFeedViewBuilder.create(ActivitiesQuery.timeline())
    .setAvatarClickListener { user ->
        if (user.isApp()) {
            // handle app avatar click
        } else {
            // handle user avatar click
        }
    }
    .show()
1
2
3
4
5
GetSocialUIActivityFeedView *view = [GetSocialUIActivityFeedView viewForQuery:[GetSocialActivitiesQuery timeline]];
[view setAvatarClickHandler:^(GetSocialUser *user) {
    // Handle avatar click
}];
[view show];
1
2
3
4
5
var view: GetSocialUIActivityFeedView = ActivityFeedViewBuilder.create(ActivitiesQuery.timeline())
view.setAvatarClickHandler({ user in
    // Handle avatar click
})
view.show()
1
2
3
4
5
6
7
8
9
ActivityFeedViewBuilder.Create(ActivitiesQuery.Timeline())
    .SetAvatarClickListener(user => {
        if (user.isApp()) {
            // handle app avatar click
        } else {
            // handle user avatar click
        }
    })
    .Show();

Mention clicks

To handle click on mentions:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
ActivityFeedViewBuilder.create(ActivitiesQuery.timeline())
    .setMentionClickListener((String mention) -> {
        if (mention.equals(MentionClickListener.APP_SHORTCUT)) {
            // Handle click on the app mention
        } else {
            String userId = mention;
            // Handle click on the user mention
        }
    })
    .show();
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
ActivityFeedViewBuilder.create(ActivitiesQuery.timeline())
    .setMentionClickListener { mention ->
        if (mention.equals(MentionClickListener.APP_SHORTCUT)) {
            // Handle click on the app mention
        } else {
            val userId = mention;
            // Handle click on the user mention
        }
    }
    .show()
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
GetSocialUIActivityFeedView *activityFeed = [GetSocialUIActivityFeedView viewForQuery:[GetSocialActivitiesQuery timeline]];
[activityFeed setMentionClickHandler:^(NSString *mention) {
    if ([mention isEqualToString:GetSocialUI_Shortcut_App]) {
        // Handle click on the app mention
    } else {
        NSString *userId = mention;
        // Handle click on the user mention
    }
}];
[activityFeed show];
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
let activityFeed: GetSocialUIActivityFeedView = GetSocialUIActivityFeedView.viewForQuery(ActivitiesQuery.timeline())
activityFeed.setMentionClickHandler({ mention in
    if (mention == GetSocialUI_Shortcut_App) {
        // Handle click on the app mention
    } else {
        let userId = mention
        // Handle click on the user mention
    }
})
activityFeed.show()
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
ActivityFeedViewBuilder.create(ActivitiesQuery.timeline())
    .SetMentionClickListener(mention => {
            if (mention == MentionShortcuts.App)
                // Handle click on the app mention
            } else {
                string userId = mention;
                // Handle click on the user mention
            }
    })
    .Show();

Tag clicks

You can use tag click for various purposes, for instance to open Activity Feed filtered by tag.

To handle click on the tag:

1
2
3
4
5
ActivityFeedViewBuilder.create(ActivitiesQuery.timeline())
     .setTagClickListener((String tag) -> {
         // Handle click on the tag 
     })
     .show();
1
2
3
4
5
ActivityFeedViewBuilder.create(ActivitiesQuery.timeline())
    .setTagClickListener { tag ->
        // Handle click on the tag
    }
    .show()
1
2
3
4
5
GetSocialUIActivityFeedView *activityFeed = [GetSocialUIActivityFeedView viewForQuery:[GetSocialActivitiesQuery timeline]];
[activityFeed setTagClickHandler:^(NSString *tag) {
    // Handle click on the tag
}];
[activityFeed show];
1
2
3
4
5
let activityFeed: GetSocialUIActivityFeedView = GetSocialUIActivityFeedView.viewForQuery(ActivitiesQuery.timeline())
activityFeed.setTagClickHandler({ tag in
    // Handle click on the tag
})
activityFeed.show()
1
2
3
4
5
ActivityFeedViewBuilder.create(ActivitiesQuery.timeline())
    .SetTagClickListener(tag => {
        // Handle click on the tag
    })
    .Show();

Customizing UI

Activity Feed Theming

GetSocial UI library provides three themes to choose from, and API customizes look and feel to match your app style.

UI elements customization reference is below. To learn how to configure UI visit customization guide for Android, iOS or Unity.

UI Customization Reference
UI Customization Reference
UI Customization Reference
UI Customization Reference

Next steps

Give us your feedback! Was this article helpful?

😀 🙁