GetSocial Activity Feed UI

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

GetSocial Activity Feed UI features:

• Read, post, comment, like activities on the feed out of the box.
• Announcements integrated into the feed. Each time user opens the feed, announcements stays on top.
• Tags and user mentions boost interactions between users on the feed.
• Social push notifications re-engage users by giving them one more reason to get back to the application.
• Friends feed powered by Social Graph allows you to personalize feed content by displaying only posts from friends.
• Filter feed by post author or tags.
• Read-only mode for the one-way communication. Create feeds with the most important announcements.
• Customizable behaviour. Customize what happens on buttons, avatars and user mentions clicks.
• Content reporting. Let your users report toxic content and moderate it from the Dashboard.
• Full theming support.

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 or Unity.

Open UI

To open Activity Feed UI and set custom view title:

```java tab=”Android(Java)”
// Use convenience method GetSocialUi.createGlobalActivityFeedView() to open default gloabal feed
GetSocialUi.createActivityFeedView(“my-feed-id”)
.setWindowTitle(“My Feed View Title”)
.show();

```kotlin tab="Android(Kotlin)"
// Use convenience method GetSocialUi.createGlobalActivityFeedView() to open default global feed
GetSocialUi.createActivityFeedView("my-feed-id")
    .setWindowTitle("My Feed View Title")
    .show()

```objective-c tab=”iOS(Objective-C)”
// Use convenience method [GetSocialUI createGlobalActivityFeedView] to open default global feed
GetSocialUIActivityFeedView *activityFeedView = [GetSocialUI createActivityFeedView:@”my-feed-id”];
activityFeedView.windowTitle = @”My Feed View Title”;
[activityFeedView show];

```swift tab="iOS(Swift)"
// Use convenience method GetSocialUI.createGlobalActivityFeedView() to open default global feed
let activityFeedView: GetSocialUIActivityFeedView = GetSocialUI.createActivityFeedView("my-feed-id")
activityFeedView.windowTitle = "My Feed View Title"
activityFeedView.show()

```csharp tab=”Unity”
// Use convenience method GetSocialUi.CreateGlobalActivityFeedView() to open default global feed
GetSocialUi.CreateActivityFeedView(“my-feed-id”)
.SetWindowTitle(“My Feed View Title”)
.Show();

You will see following view on the screen:

![GetSocial Activity Feed UI](/images/activity-feed/android/af-view-global-feed.png){:class="phone-portrait centered"}

To learn more visit [GetSocial UI](/knowledge-base/sdk-ui/android) guide.


### 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:

```java tab="Android(Java)"
GetSocialUi.createActivityDetailsView(activityPostId)
    .setShowActivityFeedView(false) // false will omit feed view in the navigation stack
    .show();

```kotlin tab=”Android(Kotlin)”
GetSocialUi.createActivityDetailsView(activityPostId)
.setShowActivityFeedView(false) // false will omit feed view in the navigation stack
.show()

```objective-c tab="iOS(Objective-C)"
GetSocialUIActivityDetailsView *detailsView = [GetSocialUI createActivityDetailsView:activityPostId];
[detailsView setShowActivityFeedView:NO]; // NO will omit feed view in the navigation stack
[detailsView show];

```swift tab=”iOS(Swift)”
let detailsView: GetSocialUIActivityDetailsView = GetSocialUI.createActivityDetailsView(activityPostId)
detailsView.setShowActivityFeed(false) // false will omit feed view in the navigation stack
detailsView.show()

```csharp tab="Unity"
GetSocialUi.CreateActivityDetailsView(activityPostId)
    .SetShowActivityFeedView(false) // false will omit feed view in the navigation stack
    .Show();

User feed

You can specify user ID to show activity feed with only user’s posts.
For example, to show activity feed of current user:

```java tab=”Android(Java)” hl_lines=”3”
String userId = GetSocial.User.getId();
GetSocialUi.createActivityFeedView(“my-feed-id”)
.setFilterByUser(userId)
.show();

```kotlin tab="Android(Kotlin)" hl_lines="3"
val userId = GetSocial.User.getId()
GetSocialUi.createActivityFeedView("my-feed-id")
    .setFilterByUser(userId)
    .show()

```objective-c tab=”iOS(Objective-C)” hl_lines=”3”
GetSocialId userId = [GetSocialUser userId];
GetSocialUIActivityFeedView *view = [GetSocialUI createActivityFeedView:@”my-feed-id”];
[view setFilterByUser:userId];
[view show];

```swift tab="iOS(Swift)" hl_lines="3"
let userId: GetSocialId = GetSocialUser.userId()
let view: GetSocialUIActivityFeedView = GetSocialUI.createActivityFeedView("my-feed-id")
view.setFilterByUser(userId)
view.show()

```csharp tab=”Unity” hl_lines=”3”
string userId = GetSocial.User.Id;
GetSocialUi.CreateActivityFeedView(“my-feed-id”)
.SetFilterByUser(userId)
.Show();

### Friends feed

You can show Friends Activity Feed, that contains activities posted by you and your friends:

```java tab="Android(Java)" hl_lines="2"
GetSocialUi.createActivityFeedView("my-feed-id")
    .setShowFriendsFeed(true)
    .show();

```kotlin tab=”Android(Kotlin)” hl_lines=”2”
GetSocialUi.createActivityFeedView(“my-feed-id”)
.setShowFriendsFeed(true)
.show()

```objective-c tab="iOS(Objective-C)" hl_lines="2"
GetSocialUIActivityFeedView *view = [GetSocialUI createActivityFeedView:@"my-feed-id"];
[view setShowFriendsFeed:YES];
[view show];

```swift tab=”iOS(Swift)” hl_lines=”2”
let view: GetSocialUIActivityFeedView = GetSocialUI.createActivityFeedView(“my-feed-id”)
view.setShowFriendsFeed(true)
view.show()

```csharp tab="Unity" hl_lines="2"
GetSocialUi.CreateActivityFeedView("my-feed-id")
    .SetShowFriendsFeed(true)
    .Show();

Read-only mode

If you want to hide controls, that allows a user to post, comment, like or dislike activities, you can set UI to the read-only mode:

```java tab=”Android(Java)” hl_lines=”2”
GetSocialUi.createActivityFeedView(“my-feed-id”)
.setReadOnly(true)
.show();

```kotlin tab="Android(Kotlin)" hl_lines="2"
GetSocialUi.createActivityFeedView("my-feed-id")
    .setReadOnly(true)
    .show()

```objective-c tab=”iOS(Objective-C)” hl_lines=”2”
GetSocialUIActivityFeedView *view = [GetSocialUI createActivityFeedView:@”my-feed-id”];
[view setReadOnly:YES];
[view show];

```swift tab="iOS(Swift)" hl_lines="2"
let view: GetSocialUIActivityFeedView = GetSocialUI.createActivityFeedView("my-feed-id")
view.setReadOnly(true)
view.show()

```csharp tab=”Unity” hl_lines=”2”
GetSocialUi.CreateActivityFeedView(“my-feed-id”)
.SetReadlOnly(true)
.Show();

Also, you can restrict user from doing some actions with UI Action Listener. Check the guide for [Android](/knowledge-base/sdk-ui/android/#ui-user-actions-handling), [iOS](/knowledge-base/sdk-ui/ios/#ui-user-actions-handling) or [Unity](/knowledge-base/sdk-ui/unity/#ui-user-actions-handling).

### Filter by tags

To show Activity Feed with activities that contain at least one tag from provided list:

```java tab="Android(Java)" hl_lines="2"
GetSocialUi.createActivityFeedView("my-feed-id")
    .setFilterByTags("cat", "cats", "kitten")
    .show();

```kotlin tab=”Android(Kotlin)” hl_lines=”2”
GetSocialUi.createActivityFeedView(“my-feed-id”)
.setFilterByTags(“cat”, “cats”, “kitten”)
.show()

```objective-c tab="iOS(Objective-C)" hl_lines="2"
GetSocialUIActivityFeedView *view = [GetSocialUI createActivityFeedView:@"my-feed-id"];
[view setFilterByTags:@[@"cat", @"cats", @"kitten"]];
[view show];

```swift tab=”iOS(Swift)” hl_lines=”2”
var view: GetSocialUIActivityFeedView = GetSocialUI.createActivityFeedView(“my-feed-id”)
view.setFilterByTags([“cat”, “cats”, “kitten”])
view.show()

```csharp tab="Unity" hl_lines="2"
GetSocialUi.CreateActivityFeedView("my-feed-id")
    .SetFilterByTags("cat", "cats", "kitten")
    .Show();

Handle interactions

Button clicks

To handle clicks on the action buttons:

```java tab=”Android(Java)” hl_lines=”2”
GetSocialUi.createActivityFeedView(“my-feed-id”)
.setActionListener((Action action) -> {
// Handle your action on button click.
return processAction(action);
})
.show();

```kotlin tab="Android(Kotlin)" hl_lines="2"
GetSocialUi.createActivityFeedView("my-feed-id")
    .setActionListener { action ->
        // Handle you action on button click.
        return@setActionListener processAction(action)
    }
    .show()

```objective-c tab=”iOS(Objective-C)” hl_lines=”2”
GetSocialUIActivityFeedView *activityFeedView = [GetSocialUI createActivityFeedView:@”my-feed-id”];
[activityFeedView setActionHandler:^BOOL(GetSocialAction *action) {
// Handle your action on button click.
return [self handleAction:action];
}];
[activityFeedView show];

```swift tab="iOS(Swift)" hl_lines="2"
var activityFeedView: GetSocialUIActivityFeedView = GetSocialUI.createActivityFeedView("my-feed-id")
activityFeedView.setActionHandler { (action) -> Bool in
    // Handle your action on button click.
    return self.handleAction(action)
}
activityFeedView.show()

```csharp tab=”Unity” hl_lines=”2”
GetSocialUi.CreateActivityFeedView(“my-feed-id”)
.SetActionListener (action => {
// Handle your action on button click
return processAction(action);
})
.Show();

Read how to handle actions on [Android](/knowledge-base/actions/android#handle-actions), [iOS](/knowledge-base/actions/ios#handle-actions) and [Unity](/knowledge-base/actions/unity#handle-actions).

Check how to [add action buttons to the activity feed post](/guides/activity-feed/post/#action-buttons).

### 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.

!!! warning "Listener Is Not Invoked On Application Avatar Click"
    Avatar click listener is invoked only by click on the user avatar, not application one. Reach us via Intercom or support@getsocial.im if you need this functionality.

To handle avatar clicks:

```java tab="Android(Java)" hl_lines="2"
GetSocialUi.createActivityFeedView("my-feed-id")
    .setAvatarClickListener((PublicUser user) -> {
        // Handle avatar click
    })
    .show();

```kotlin tab=”Android(Kotlin)” hl_lines=”2”
GetSocialUi.createActivityFeedView(“my-feed-id”)
.setAvatarClickListener { publicUser ->
// Handle avatar click
}
.show()

```objective-c tab="iOS(Objective-C)" hl_lines="2"
GetSocialUIActivityFeedView *view = [GetSocialUI createActivityFeedView:@"my-feed-id"];
[view setAvatarClickHandler:^(GetSocialPublicUser *user) {
    // Handle avatar click
}];
[view show];

```swift tab=”iOS(Swift)” hl_lines=”2”
var view: GetSocialUIActivityFeedView = GetSocialUI.createActivityFeedView(“my-feed-id”)
view.setAvatarClickHandler({ user in
// Handle avatar click
})
view.show()

```csharp tab="Unity"
GetSocialUi.CreateGlobalActivityFeedView()
    .SetAvatarClickListener(user => {
        // Handle avatar click
    })
    .Show();

Mention clicks

To handle click on mentions:

```java tab=”Android(Java)” hl_lines=”2”
GetSocialUi.createActivityFeedView(“my-feed-id”)
.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();

```kotlin tab="Android(Kotlin)" hl_lines="2"
GetSocialUi.createActivityFeedView("my-feed-id")
    .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()

```objective-c tab=”iOS(Objective-C)” hl_lines=”2”
GetSocialUIActivityFeedView *activityFeed = [GetSocialUI createActivityFeedView:@”my-feed-id”];
[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];

```swift tab="iOS(Swift)" hl_lines="2"
let activityFeed: GetSocialUIActivityFeedView = GetSocialUI.createActivityFeedView("my-feed-id")
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()

```csharp tab=”Unity” hl_lines=”2”
GetSocialUi.CreateActivityFeedView(“my-feed-id”)
.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](/guides/activity-feed/ui/#filter-by-tags). 

To handle click on the tag:

```java tab="Android(Java)" hl_lines="2"
GetSocialUi.createActivityFeedView("my-feed-id")
     .setTagClickListener((String tag) -> {
         // Handle click on the tag 
     })
     .show();

```kotlin tab=”Android(Kotlin)” hl_lines=”2”
GetSocialUi.createActivityFeedView(“my-feed-id”)
.setTagClickListener { tag ->
// Handle click on the tag
}
.show()

```objective-c tab="iOS(Objective-C)" hl_lines="2"
GetSocialUIActivityFeedView *activityFeed = [GetSocialUI createActivityFeedView:@"my-feed-id"];
[activityFeed setTagClickHandler:^(NSString *tag) {
    // Handle click on the tag
}];
[activityFeed show];

```swift tab=”iOS(Swift)” hl_lines=”2”
let activityFeed: GetSocialUIActivityFeedView = GetSocialUI.createActivityFeedView(“my-feed-id”)
activityFeed.setTagClickHandler({ tag in
// Handle click on the tag
})
activityFeed.show()

```csharp tab="Unity" hl_lines="2"
GetSocialUi.CreateActivityFeedView("my-feed-id")
    .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.

Give us your feedback! Was this article helpful?

😀 🙁