Get started with PubNub Chat Components for Android

This page outlines the steps to follow to set up a sample application with PubNub Chat Components for Android. It covers the basics of integrating PubNub in your application, setting up the default chat components, and displaying a component when the app is started.

Prerequisites

Name	Requirement
Android Studio	>= Arctic Fox 2020.3.1
Platform	Android
Language	Kotlin
UI Toolkit	Jetpack Compose
PubNub Kotlin SDK	>= 6.0.2

Create a PubNub account

Sign in or set up an account to create an app on the Admin Portal. Create an app to get the keys you will need to use in your application.
When you create a new app, the first set of keys is generated automatically, but a single app can have as many keysets as you like. We recommend that you create separate keysets for production and test environments.
Additional features
Depending on your use case, you may want your application to have some PubNub features, such as Presence, Storage and Playback (including correct Retention), or Objects. To use them, you must first enable them on your Admin Portal keysets. If you decide to use Objects, be sure to select a geographic region corresponding to most users of your application.

Create a new project for your app

Install and open Android Studio.
If you’re in the Welcome to Android Studio window, click Start a new Android Studio project or select File > New > New Project from the menu.
In the Select a Project Template window, choose Empty Compose Activity and click Next.
In the Configure your project window, fill in project details and set Minimum SDK to API 21. Click Finish.
Go to the project’s build.gradle file and update the Jetpack Compose version:
```
compose_version = '1.0.2'
```

For any additional questions, refer to Jetpack Compose documentation.

Install chat components

Inside your Android Studio project, open the module's build.gradle and add both Kotlin SDK and PubNub Chat Components for Android implementations:
```
implementation "com.pubnub:pubnub-kotlin:6.2.0"
implementation "com.pubnub.components:chat-android:0.1.1"
```
Click Sync Now to build dependencies for your Android project.

Work with chat components

The first required step is to call ChatProvider, which initializes all the data components. These components are responsible for providing data to UI, setting the default theme, and communicating with the PubNub service. The best way to achieve it is by modifying the application theme functionality.

Open MainActivity.kt and create a configured PubNub instance. To do that, use your Publish and Subscribe Keys from your PubNub account dashboard on the Admin Portal.

private val pubNub: PubNub = PubNub(
  PNConfiguration().apply {
    this.publishKey = "pub-c-key"
    this.subscribeKey = "sub-c-key"
  }
)

You can configure the UUID to associate a sender/current user with the PubNub messages.

private val pubNub: PubNub = PubNub(
  PNConfiguration().apply {
    …
    this.uuid = "uuid-of-current-user"
    …
  }
)

Destroy the pubNub instance in onDestroy().

override fun onDestroy() {
    super.onDestroy()
    pubNub.destroy()
}

Open the ui/Theme.kt file, add the pubNub parameter, and initialize ChatProvider in MyApplicationTheme. This object is used to facilitate the majority of the functionality provided by PubNub Chat Components for Android.

  @Composable
  fun MyApplicationTheme(
      pubNub: PubNub,
      darkTheme: Boolean = isSystemInDarkTheme(),
      content: @Composable () -> Unit
  ) {
      val colors = if (darkTheme) DarkColorPalette
      else LightColorPalette

      MaterialTheme(
          colors = colors,
          typography = Typography,
          shapes = Shapes,
      ) {
          ChatProvider(pubnub) {
              content()
          }
      }
  }

For more information, refer to the ChatProvider section.

Go back to MainActivity.kt and initialize DefaultChannelListViewModel inside the setContent block.

override fun onCreate(savedInstanceState: Bundle?) {
  super.onCreate(savedInstanceState)
  setContent {
    val viewModel: ChannelViewModel = ChannelViewModel.default(resources)
  }
}

Add the ChannelList component and pass channels as a parameter.

override fun onCreate(savedInstanceState: Bundle?) {
  super.onCreate(savedInstanceState)
  setContent {
    val viewModel: ChannelViewModel = ChannelViewModel.default(resources)

    Box(modifier = Modifier.fillMaxSize()) {
        ChannelList(
            channels = viewModel.getAll(),
        )
    }
  }
}

At the end, MainActivity.kt should resemble the following:

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.ui.Modifier
import com.pubnub.api.PNConfiguration
import com.pubnub.api.PubNub
import com.pubnub.components.chat.ui.component.channel.ChannelList
import com.pubnub.components.chat.viewmodel.channel.ChannelViewModel

class MainActivity: ComponentActivity() {

    private val pubNub: PubNub = PubNub(
        PNConfiguration().apply {
            this.publishKey = "pub-c-key"
            this.subscribeKey = "sub-c-key"
            this.uuid = "uuid-of-current-user"
        }
    )

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val viewModel: ChannelViewModel = ChannelViewModel.default(resources)

            Box(modifier = Modifier.fillMaxSize()) {
                ChannelList(
                    channels = viewModel.getAll(),
                )
            }
        }
    }

    override fun onDestroy() {
        super.onDestroy()
        pubNub.destroy()
    }
}

When you open your application now, you should see the view displaying all the channels you previously specified.

REACT

ANDROID

IOS