GetSocial Activity Feed UI¶
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¶
- Finished Getting Started guide for Android, iOS, Unity or React Native.
Not supported in Flutter and Web
Flutter SDK and Web SDK don’t provide a UI library. If you’re using one of these SDKs, you’ll need to implement your own Activity Feed UI.
Open UI¶
To open Activity Feed UI and set custom view title:
ActivityFeedViewBuilder.create(ActivitiesQuery.timeline()).show();
ActivityFeedViewBuilder.create(ActivitiesQuery.timeline()).show()
[[GetSocialUIActivityFeedView viewForQuery:[GetSocialActivitiesQuery timeline]] show];
GetSocialUIActivityFeedView.viewForQuery(ActivitiesQuery.timeline()).show()
ActivityFeedViewBuilder.Create(ActivitiesQuery.Timeline()).Show();
You will see following view on the screen:
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:
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();
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()
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];
let detailsView = GetSocialUIActivityDetailsView.viewForActivityId(activityPostId)
detailsView.setCommentId(commentId)
detailsView.setShowActivityFeed(false) // false will omit feed view in the navigation stack
detailsView.show()
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:
ActivityFeedViewBuilder.create(ActivitiesQuery.timeline())
.setActionListener((Action action) -> {
// Handle your action on button click.
if (!handleAction(action)) {
GetSocial.handle(action);
}
})
.show();
ActivityFeedViewBuilder.create(ActivitiesQuery.timeline())
.setActionListener { action ->
// Handle you action on button click.
if (!handleAction(action)) {
GetSocial.handle(action)
}
}
.show()
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];
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()
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:
ActivityFeedViewBuilder.create(ActivitiesQuery.timeline())
.setAvatarClickListener((User user) -> {
if (user.isApp()) {
// handle app avatar click
} else {
// handle user avatar click
}
})
.show();
ActivityFeedViewBuilder.create(ActivitiesQuery.timeline())
.setAvatarClickListener { user ->
if (user.isApp()) {
// handle app avatar click
} else {
// handle user avatar click
}
}
.show()
GetSocialUIActivityFeedView *view = [GetSocialUIActivityFeedView viewForQuery:[GetSocialActivitiesQuery timeline]];
[view setAvatarClickHandler:^(GetSocialUser *user) {
// Handle avatar click
}];
[view show];
var view: GetSocialUIActivityFeedView = ActivityFeedViewBuilder.create(ActivitiesQuery.timeline())
view.setAvatarClickHandler({ user in
// Handle avatar click
})
view.show()
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:
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();
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()
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];
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()
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:
ActivityFeedViewBuilder.create(ActivitiesQuery.timeline())
.setTagClickListener((String tag) -> {
// Handle click on the tag
})
.show();
ActivityFeedViewBuilder.create(ActivitiesQuery.timeline())
.setTagClickListener { tag ->
// Handle click on the tag
}
.show()
GetSocialUIActivityFeedView *activityFeed = [GetSocialUIActivityFeedView viewForQuery:[GetSocialActivitiesQuery timeline]];
[activityFeed setTagClickHandler:^(NSString *tag) {
// Handle click on the tag
}];
[activityFeed show];
let activityFeed: GetSocialUIActivityFeedView = GetSocialUIActivityFeedView.viewForQuery(ActivitiesQuery.timeline())
activityFeed.setTagClickHandler({ tag in
// Handle click on the tag
})
activityFeed.show()
ActivityFeedViewBuilder.create(ActivitiesQuery.timeline())
.SetTagClickListener(tag => {
// Handle click on the tag
})
.Show();
Customizing UI¶
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.
Next steps¶
- Setup Push Notifications so users get notified on social interactions on the Activity Feed on Android, iOS or Unity.
- Understand how your users use Activity Feed with Analytics.