Build low-latency Vision AI applications using our new open-source Vision AI SDK. ⭐️ on GitHub ->

Stream logo
Start Coding Free

Android Activity Feed Tutorial

Implement real-time activity feeds in your Android app with the Stream Feeds Android SDK.
This tutorial guides you through integrating Stream Feeds, publishing and consuming activities, and building performant feeds using native Android patterns.

Start Coding Free >_
example of android feeds sdk

Stream's Activity Feed V3 SDK enables teams of all sizes to build scalable activity feeds. This SDK is designed to enable you to get a feed application up and running quickly and efficiently while supporting customization for complex use cases.

In this tutorial, we will use Stream's Activity Feed V3 SDK for Android to:

  • Set up a simple activity feed application and connect it to Stream's Activity Feed V3 SDK.
  • Create user and timeline feeds.
  • Add activities, reactions and comments.
  • Explore new content with "For you" feed.

Notes about this tutorial:

  • Whenever we mention "activities" we're referring to items that are part of a feed, such as posts. Not to be confused with the Android Activity class.
  • In most steps, the code is split between different tabs, one per file. Be sure to check them all!
  • We provide "new imports" code blocks separately from main code changes, to make it easier to copy them independently.

Here is a quick visual overview of the application we're building:

Project Setup and Installation

To follow the tutorial make sure you're using Android Studio Meerkat 2024.3.1 or newer.

As a first step, you need to clone or download the starter project containing boilerplate code and the skeleton of the application we're going to implement:

We'll start the tutorial from the initial commit. If you wish to see the finished source code, it's the latest commit in the stream-feeds-android-tutorial repository.

bash
1
2
3
4
# or download the zip from https://github.com/GetStream/stream-feeds-android-tutorial/releases/tag/tutorial-start
git clone git@github.com:GetStream/stream-feeds-android-tutorial.git
cd stream-feeds-android-tutorial
git checkout tutorial-start

Open the project with Android Studio.

In the dependencies block of the app's build.gradle.kts add Stream's Feeds v3 SDK:

app/build.gradle.kts (kotlin)
1
implementation("io.getstream:stream-feeds-android-client:<latest-version>")

Replace <latest-version> with the version you see below. You can also check releases in the GitHub repository.

Sync Android studio to download the dependencies.

To make the tutorial as easy as possible, we generated credentials for you to pick up and use. These credentials consist of:

  • API_KEY - an API key that is used to identify your Stream application by our servers
  • id and token - authorization information of the current user
  • name - optional, used as a display name of the current user

To start using credentials, replace the contents of the Credentials.kt file:

Credentials.kt (kotlin)
1
2
3
4
5
6
object Credentials {
    const val API_KEY = "REPLACE_WITH_API_KEY"
    const val USER_ID = "REPLACE_WITH_USER_ID"
    const val USER_NAME = "REPLACE_WITH_USER_NAME"
    const val USER_TOKEN = "REPLACE_WITH_TOKEN"
}

Security Note: In production applications, never expose your API secret or generate tokens on the client side. Tokens should always be generated on your backend server to ensure security. The credentials in this tutorial are for development purposes only.

You can now run the application in Android Studio.

For now, the application doesn't do anything, but this will change as we complete the tutorial step by step.

Connect to the Stream API

Let's create and connect the demo user to the Stream API.

The starter application you cloned has all necessary files. You can update their content from the code snippets in the tutorial. No need to create any additional files.

To achieve this, we're creating a ClientProvider object to encapsulate the client creation and make it available throughout the code. In a real app, you'll likely have a factory to create a new client instance on user sign in instead of a singleton client.

ClientProvider.kt (kotlin)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
import android.content.Context
import io.getstream.android.core.api.model.value.StreamApiKey
import io.getstream.android.core.api.model.value.StreamToken
import io.getstream.feeds.android.client.api.FeedsClient
import io.getstream.feeds.android.client.api.model.User
import kotlinx.coroutines.sync.Mutex
import kotlinx.coroutines.sync.withLock

object ClientProvider {
    private val mutex = Mutex()
    private var instance: FeedsClient? = null

    // In a real app, you'll likely have a factory to create a new client instance on user sign in
    suspend fun get(context: Context): FeedsClient {
        instance?.let { return it }

        mutex.withLock {
            instance?.let { return@get it }

            val feedsClient = createClient(context)

            feedsClient.connect().fold(
                onSuccess = { /* Connected successfully */ },
                onFailure = { /* We're skipping error handling for tutorial purposes */ }
            )

            instance = feedsClient
            return feedsClient
        }
    }

    private fun createClient(context: Context): FeedsClient = FeedsClient(
        context = context.applicationContext,
        apiKey = StreamApiKey.fromString(Credentials.API_KEY),
        user = User(id = Credentials.USER_ID, name = Credentials.USER_NAME),
        tokenProvider = { StreamToken.fromString(Credentials.USER_TOKEN) },
    )
}

For simplicity, the tutorial doesn't handle errors. In a real application, you should always make sure to handle errors.

Creating Feeds

In this step we're creating a few feeds using built-in feed groups. Before we dive into the code, let's understand the core concepts:

  • User Feed: A feed that contains all activities (posts) created by a specific user. Each user has their own user feed (e.g., user:alice).
  • Timeline Feed: A feed that contains activities from all the feeds that you follow. When you follow someone's user feed, their activities automatically appear in your timeline feed (this concept is called fan-out).
  • Follow Relationship: When you follow a user's feed, your timeline feed subscribes to their user feed. This means new activities from followed users automatically appear in your timeline.

Let's see what the concept looks like in code (no need to add this to your app yet):

kotlin
1
2
3
4
5
6
7
// Using user id for the feed id, but you can use any id you want to
val userFeed = client.feed("user", client.user.id)
userFeed.getOrCreate()

// This is our timeline feed where we want to see posts from people we follow
val timelineFeed = client.feed("timeline", client.user.id)
timelineFeed.getOrCreate()

To ensure our own posts are part of our timeline, we need to set up the follow relationship:

kotlin
1
2
3
4
5
// You typically create these relationships on your server-side, we do this here for simplicity
val followsSelf = timelineFeed.state.following.first().any { it.targetFeed.fid == userFeed.fid }
if (!followsSelf) {
    timelineFeed.follow(targetFid = userFeed.fid)
}

The two main screens of our app, Home and Explore, are going to be driven by FeedsViewModel, so let's add code to create the feeds there:

FeedsViewModel.kt
new imports (kotlin)
1
2
3
4
5
6
7
8
9
10
11
import androidx.lifecycle.application
import androidx.lifecycle.viewModelScope
import io.getstream.feeds.android.client.api.FeedsClient
import io.getstream.feeds.android.client.api.state.Feed
import io.getstream.feedstutorial.ClientProvider
import kotlinx.coroutines.flow.SharingStarted
import kotlinx.coroutines.flow.StateFlow
import kotlinx.coroutines.flow.first
import kotlinx.coroutines.flow.flow
import kotlinx.coroutines.flow.stateIn
import kotlinx.coroutines.launch
kotlin
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
class FeedsViewModel(application: Application) : AndroidViewModel(application) {
    val state: StateFlow<State?> =
        flow { emit(createState()) }
            .stateIn(viewModelScope, SharingStarted.WhileSubscribed(5000), null)

    data class State(
        val client: FeedsClient,
        val userFeed: Feed,
        val timelineFeed: Feed,
    )

    private suspend fun createState(): State {
        val client = ClientProvider.get(application)
        val state = State(
            client = client,
            userFeed = client.feed("user", client.user.id),
            timelineFeed = client.feed("timeline", client.user.id),
        )
        loadFeeds(state)
        return state
    }

    private suspend fun loadFeeds(state: State) {
        state.userFeed.getOrCreate()
        state.timelineFeed.getOrCreate()

        viewModelScope.launch { followSelfIfNeeded(state) }
    }

    // By default, `timeline:user_id` doesn't follow `user:user_id` so the timeline doesn't
    // show the user's own posts. For tutorial purposes we create the follow relationship
    // here, but this logic is usually implemented in the backend.
    private suspend fun followSelfIfNeeded(state: State) {
        val followsSelf = state.timelineFeed.state.following.first()
            .any { it.targetFeed.fid == state.userFeed.fid }
        if (!followsSelf) {
            state.timelineFeed.follow(
                targetFid = state.userFeed.fid,
                createNotificationActivity = false
            )
        }
    }

    // These stubs remain unchanged for now 
    fun onPost(text: String, imageUri: Uri?) {
        // TODO: Implement as part of the tutorial
    }

    fun onFollowClick(activity: ActivityData) {
        // TODO: Implement as part of the tutorial
    }

    fun onLikeClick(activity: ActivityData) {
        // TODO: Implement as part of the tutorial
    }
}

The ViewModel creates a State object that contain client and feeds and exposes it as a StateFlow. We'll use this state both in the ViewModel, to perform operations, and in the UI, to display data.

Activity List

Activity Feeds SDKs don't have UI components (yet).

Now that we created feeds, we can create UI components to display the activities. To achieve this we're creating an ActivityItem component.

For now, the ActivityItem displays only the most basic activity information (for example activity.text) and parameters that we'll be relevant in a bit, when we'll extend it with more features.

ActivityItem.kt
HomeScreen.kt
new imports (kotlin)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material3.Card
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import coil3.compose.AsyncImage
import io.getstream.feeds.android.client.api.model.UserData
kotlin
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
@Composable
fun ActivityItem(
    activity: ActivityData,
    feedId: FeedId,
    currentUserId: String,
    navController: NavController,
    onFollowClick: (ActivityData) -> Unit,
    onLikeClick: (ActivityData) -> Unit,
) {
    Card {
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .padding(16.dp)
        ) {
            ActivityHeader(activity)

            Text(
                text = activity.text.orEmpty(),
                fontSize = 14.sp,
                lineHeight = 20.sp,
                modifier = Modifier.padding(start = 56.dp, bottom = 8.dp),
            )
        }
    }
}

@Composable
private fun ActivityHeader(
    activity: ActivityData,
) {
    Row(modifier = Modifier.fillMaxWidth(), verticalAlignment = Alignment.CenterVertically) {
        Avatar(activity.user)

        Text(
            text = activity.user.name ?: "Unknown",
            fontSize = 16.sp,
            fontWeight = FontWeight.SemiBold,
            modifier = Modifier
                .weight(1f)
                .padding(horizontal = 16.dp),
        )
    }
}

@Composable
private fun Avatar(user: UserData) {
   Box(
      modifier = Modifier.background(MaterialTheme.colorScheme.secondary, CircleShape),
      contentAlignment = Alignment.Center
   ) {
      Text(
         text = user.name?.firstOrNull()?.uppercase() ?: "?",
         color = MaterialTheme.colorScheme.onSecondary,
         fontWeight = FontWeight.Bold,
      )
      AsyncImage(
         modifier = Modifier
            .size(40.dp)
            .clip(CircleShape),
         model = user.image,
         contentDescription = null,
         contentScale = ContentScale.Crop,
      )
   }
}

The activity list is currently empty. We'll change that in the next step. Before doing that, let's recap what we did in this step:

  • We created an instance of FeedsClient for our user (1 instance maps to 1 user)
  • We used the client to create userFeed and timelineFeed, representing the feeds of the user's own activities and followed users' activities respectively
  • We created an ActivityItem component and used it to display the activities from the timeline feed's state
    • feed.state.activities is a StateFlow that automatically updates when activities are updated

Activity Composer

Let's add an ActivityComposer component and add it as the very first item of the LazyColumn in HomeContent:

As mentioned previously: users post on their user feed and their posts automatically appear in their timeline feed via follow relationship.

ActivityComposer.kt
HomeScreen.kt
new imports (kotlin)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.material3.Button
import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Text
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
kotlin
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
@Composable
fun ActivityComposer(onPost: (String, Uri?) -> Unit) {
    var text by remember { mutableStateOf("") }

    Column(verticalArrangement = Arrangement.spacedBy(16.dp)) {
        OutlinedTextField(
            value = text,
            onValueChange = { text = it },
            modifier = Modifier.fillMaxSize(),
            placeholder = { Text("What is happening?") },
        )

        Row(Modifier.align(Alignment.End), Arrangement.spacedBy(16.dp)) {
            Button(
                onClick = {
                    onPost(text, null)
                    text = ""
                },
                enabled = text.isNotBlank(),
                content = { Text("Post") },
            )
        }
        HorizontalDivider(Modifier.fillMaxWidth())
    }
}

With the UI ready, we can implement the posting logic in the FeedsViewModel. To do that, we just need to replace the onPost function stub with the actual implementation:

new imports (kotlin)
1
import io.getstream.feeds.android.client.api.model.FeedAddActivityRequest

Replace the existing function stub with this implementation:

FeedsViewModel.kt (kotlin)
1
2
3
4
5
6
7
8
9
10
11
12
fun onPost(text: String, imageUri: Uri?) {
    val state = state.value ?: return

    viewModelScope.launch {
        val request = FeedAddActivityRequest(
            type = "post",
            text = text.trim(),
            feeds = listOf(state.userFeed.fid.rawValue),
        )
        state.userFeed.addActivity(request = request)
    }
}

Go ahead and post something! It'll automatically appear on your timeline.

Explore Page

The "Explore" page uses the foryou feed to explore new content by showing popular activities.

Just like we did for other feeds, we are going to add an exploreFeed to FeedsViewModel.State and initialize it accordingly in the createState and loadFeeds functions:

FeedsViewModel.kt (kotlin)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
data class State(
    val client: FeedsClient,
    val userFeed: Feed,
    val timelineFeed: Feed,
    val exploreFeed: Feed,
)

private suspend fun createState(): State {
    val client = ClientProvider.get(application)
    val state = State(
        client = client,
        userFeed = client.feed("user", client.user.id),
        timelineFeed = client.feed("timeline", client.user.id),
        exploreFeed = client.feed("foryou", client.user.id),
    )
    loadFeeds(state)
    return state
}

private suspend fun loadFeeds(state: State) {
    state.userFeed.getOrCreate()
    state.timelineFeed.getOrCreate()
    state.exploreFeed.getOrCreate()

    viewModelScope.launch {
        followSelfIfNeeded(state)
    }
}

Now we're ready to implement the "Explore" page UI. The layout is similar to HomeScreen, except that we're not adding the activity composer:

new imports (kotlin)
1
2
3
4
5
6
7
8
9
10
11
12
13
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.runtime.getValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.lifecycle.compose.collectAsStateWithLifecycle
import io.getstream.feeds.android.client.api.model.ActivityData
import io.getstream.feedstutorial.ui.ActivityItem
import io.getstream.feedstutorial.ui.EmptyContent
import io.getstream.feedstutorial.ui.LoadingScreen
ExploreScreen.kt (kotlin)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
@Composable
fun ExploreScreen(navController: NavController) {
    val viewModel: FeedsViewModel = viewModel(LocalActivity.current as ComponentActivity)
    val state by viewModel.state.collectAsStateWithLifecycle()

    Surface {
        when (val state = state) {
            null -> LoadingScreen()
            else -> ExploreContent(
                state = state,
                navController = navController,
                onLikeClick = { activity -> viewModel.onLikeClick(activity) },
                onFollowClick = { activity -> viewModel.onFollowClick(activity) }
            )
        }
    }
}

@Composable
fun ExploreContent(
    state: FeedsViewModel.State,
    navController: NavController,
    onLikeClick: (ActivityData) -> Unit,
    onFollowClick: (ActivityData) -> Unit,
) {
    val activities by state.exploreFeed.state.activities.collectAsStateWithLifecycle()

    LazyColumn(
        modifier = Modifier.fillMaxSize(),
        contentPadding = PaddingValues(16.dp),
        verticalArrangement = Arrangement.spacedBy(16.dp)
    ) {
        if (activities.isEmpty()) {
            item {
                EmptyContent(
                    "Popular activities will show up here once your application has more content"
                )
            }
        } else {
            items(activities) { activity ->
                ActivityItem(
                    activity = activity,
                    feedId = state.exploreFeed.fid,
                    currentUserId = state.client.user.id,
                    navController = navController,
                    onLikeClick = onLikeClick,
                    onFollowClick = onFollowClick
                )
            }
        }
    }
}

Note that the foryou feed uses the "popular" activity selector, which doesn't support real-time updates. The documentation details how real-time updates work.

In the next step, we're adding a follow button, so we can follow users from the foryou page.

Follow and Unfollow

To implement following and unfollowing feeds we're:

  • Performing the actual follow/unfollow operation in FeedsViewModel
  • Extending the ActivityItem component by adding the follow/unfollow button
FeedsViewModel.kt
ActivityItem.kt
new imports (kotlin)
1
import io.getstream.feeds.android.client.api.model.FeedId

Replace the existing function stub with this implementation:

kotlin
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
fun onFollowClick(activity: ActivityData) {
    val state = state.value ?: return

    viewModelScope.launch {
        val targetFeedId = FeedId("user", activity.user.id)
        val isFollowing = activity.currentFeed?.ownFollows.isNullOrEmpty().not()

        val result = if (isFollowing) {
            state.timelineFeed.unfollow(targetFeedId)
        } else {
            state.timelineFeed.follow(targetFeedId)
        }
        // Ensure the feeds are up to date after follow/unfollow
        result.onSuccess {
            launch { state.timelineFeed.getOrCreate() }
            launch { state.exploreFeed.getOrCreate() }
        }
    }
}

Let's walk through the steps:

  1. feed.follow and feed.unfollow let us follow/unfollow feeds.
  2. To immediately see the results of the follow/unfollow, we're reloading the feeds with getOrCreate.
  3. We're using activity.currentFeed.ownFollows to know if the user's timeline feed follows the feed or not.
    • activity.currentFeed has information about the feed the activity was posted to. It's useful if you're building Reddit-style applications where there is no 1:1 mapping between feeds and users. It lets you display name/image of the feed the activity belongs to.
  4. The Stream API also supports follow requests where approval from the feed owner is required to follow

Now that the follow button is working, you can start following other users using the "Explore" page.

Reactions

To make our application more interactive, we'll add reactions for activities.

To achieve this, we'll follow the same approach we used for the follow button:

  • Implementing the "like" operation in FeedsViewModel
  • Extend the ActivityItem component by adding the button to toggle a "like" reaction
FeedsViewModel.kt
ActivityItem.kt
new imports (kotlin)
1
import io.getstream.feeds.android.network.models.AddReactionRequest

Replace the existing function stub with this implementation:

kotlin
1
2
3
4
5
6
7
8
9
10
11
12
13
fun onLikeClick(activity: ActivityData) {
    val state = state.value ?: return
    val hasOwnReaction = activity.ownReactions.any { it.type == "like" }

    viewModelScope.launch {
        if (hasOwnReaction) {
            state.timelineFeed.deleteActivityReaction(activity.id, "like")
        } else {
            val request = AddReactionRequest("like", createNotificationActivity = true)
            state.timelineFeed.addActivityReaction(activity.id, request)
        }
    }
}

You can use the demo app to follow your tutorial user, and to react to their activities.

Let's do a recap of this step:

  1. We used client.addActivityReaction and client.deleteActivityReaction to toggle reactions
    • We used "like" as reaction type, but it can be any string you'd like
    • Since the Android SDK provides reactive state management, the UI is automatically updated anytime anything on the activity changes
  2. We use activity.ownReactions and activity.reactionGroups to get real-time reaction data for the activity
  3. Some advanced features not shown in the tutorial:
    • A single user can add multiple reactions to an activity
    • Comments can have reactions too
    • Check out the activity reactions and comment reactions pages in the documentation for more information

Comments

Comments are another good way to add interactivity to an app. To add this feature to the tutorial project we need to:

  • Implement CommentsViewModel with the logic for loading the activity and posting comments
  • Implement CommentScreen and the components to display and post comments
  • Extend the ActivityItem component with a button to navigate to the comments screen
CommentsViewModel.kt
CommentsScreen.kt
ActivityItem.kt
kotlin
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
import androidx.lifecycle.application
import androidx.lifecycle.viewModelScope
import io.getstream.feeds.android.client.api.model.request.ActivityAddCommentRequest
import io.getstream.feeds.android.client.api.state.Activity
import io.getstream.feedstutorial.ClientProvider
import kotlinx.coroutines.flow.SharingStarted
import kotlinx.coroutines.flow.StateFlow
import kotlinx.coroutines.flow.flow
import kotlinx.coroutines.flow.stateIn
import kotlinx.coroutines.launch

class CommentsViewModel(
    private val activityId: String,
    private val feedId: FeedId,
    application: Application
) : AndroidViewModel(application) {
    val activity: StateFlow<Activity?> =
        flow { emit(createActivity()) }
            .stateIn(viewModelScope, SharingStarted.WhileSubscribed(5000), null)

    private suspend fun createActivity(): Activity {
        return ClientProvider.get(application)
            .activity(activityId, feedId)
            .apply { get() }
    }

    fun onComment(text: String) {
        val activity = activity.value ?: return

        viewModelScope.launch {
            val request = ActivityAddCommentRequest(
                comment = text,
                activityId = activity.activityId
            )
            activity.addComment(request)
        }
    }
}

Let's recap what happened in this step:

  1. We instantiated an Activity object using client.activity and called .get() to load the activity data, including the comments
    • Notice this is very similar to what we did for Feed objects
  2. We posted new comments by calling activity.addComment
  3. We use activity.commentCount to display the total number of comments on an activity

Comments can be threaded/nested too (not shown in the tutorial).

Posting Images

Stream API allows attaching files to activities and comments. Let's extend our app with attaching images to activities. To achieve this we need to:

  • Extend the ActivityComposer component to let users pick an image to attach and display a preview
  • Update the activity posting logic to include the attachment
  • Extend the Activity component to display the attachment
ActivityComposer.kt
FeedsViewModel.kt
ActivityItem.kt
new imports (kotlin)
1
2
3
4
5
6
7
8
9
10
11
12
import androidx.activity.compose.rememberLauncherForActivityResult
import androidx.activity.result.PickVisualMediaRequest
import androidx.activity.result.contract.ActivityResultContracts
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.outlined.Image
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.ui.draw.clip
import androidx.compose.ui.layout.ContentScale
import coil3.compose.AsyncImage
kotlin
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
@Composable
fun ActivityComposer(onPost: (String, Uri?) -> Unit) {
    var text by remember { mutableStateOf("") }
    var imageUri by remember { mutableStateOf<Uri?>(null) }

    val launcher = rememberLauncherForActivityResult(ActivityResultContracts.PickVisualMedia()) {
        imageUri = it
    }

    Column(verticalArrangement = Arrangement.spacedBy(16.dp)) {
        OutlinedTextField(
            value = text,
            onValueChange = { text = it },
            modifier = Modifier.fillMaxSize(),
            placeholder = { Text("What is happening?") },
        )

        imageUri?.let {
            AsyncImage(
                model = it,
                contentDescription = "Selected image",
                modifier = Modifier
                    .size(64.dp)
                    .clip(RoundedCornerShape(25)),
                contentScale = ContentScale.Crop
            )
        }

        Row(Modifier.align(Alignment.End), Arrangement.spacedBy(16.dp)) {
            IconButton(
                onClick = {
                    launcher.launch(
                        PickVisualMediaRequest(ActivityResultContracts.PickVisualMedia.ImageOnly)
                    )
                },
                content = { Icon(Icons.Outlined.Image, contentDescription = "Add image") }
            )
            Button(
                onClick = {
                    onPost(text, imageUri)
                    imageUri = null
                    text = ""
                },
                enabled = text.isNotBlank() || imageUri != null,
                content = { Text("Post") },
            )
        }
        HorizontalDivider(Modifier.fillMaxWidth())
    }
}

Go ahead and post an image! Or send an image URL, as the Stream API can automatically attach URL metadata as an attachment.

Final Thoughts

In this tutorial, we built a fully-functioning Android activity feed application with Stream's Activity Feed V3 SDK. We showed how easy it is to:

  • Set up a simple activity feed application and connect it to Stream's Activity Feed V3 SDK.
  • Create user and timeline feeds.
  • Add activities, reactions and comments.
  • Explore new content with "For you" feed.

Even though this was a long tutorial, Activity Feed V3 has even more features:

Give us feedback!

Did you find this tutorial helpful in getting you up and running with your project? Either good or bad, we're looking for your honest feedback so we can improve.

Start coding

If you're interested in a custom plan or have any questions, please contact us.

Start Coding >_Contact Sales ->