Building Your Own UI

In this guide, we will walk you through building a custom UI to render participant videos using RealtimeKit-UI Android. We will use an example of a video calling app like FaceTime to demonstrate how to display participant videos in your own UI.

Video Calling Example

Let's consider a video calling app where two participants are in a call. The UI of our example app will feature:

• Remote Participant Tile: This tile will render the video of the other participant, occupying the main area of the screen
• Local User Tile: Positioned at the right-bottom corner, this tile will display your video i.e. of the local user

Using RtkParticipantTileView

To achieve this UI, we will utilize the RtkParticipantTileView provided by RealtimeKit's Android UI Kit. This custom Android view renders the video of a single participant and automatically handles displaying the video or a placeholder when the participant turns their camera on or off.

Getting Started

Before we begin, let's understand the key components we'll be working with:

• RtkParticipantTileView: Renders the video of a single participant
• RtkRemoteParticipant: Represents a participant who has joined the meeting. The joined list in RtkParticipants holds objects of this type
• RtkSelfParticipant: Represents the local user
• RealtimeKitClient: Provides access to meeting and participant information. Use the meeting.participants.joined list to retrieve the list of participants who have joined the meeting

Building the UI

1. XML Layout: Define the layout of your video calling screen. Use two RtkParticipantTileViews to represent the remote participant and the local user.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".VideoCallActivity">

    <com.cloudflare.realtimekit.ui.view.participanttile.RtkParticipantTileView
        android:id="@+id/rtkparticipanttileview_remote_participant"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_margin="16dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <com.cloudflare.realtimekit.ui.view.participanttile.RtkParticipantTileView
        android:id="@+id/rtkparticipanttileview_self_participant"
        android:layout_width="144dp"
        android:layout_height="200dp"
        android:layout_margin="24dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

2. UI Logic: Bind the RtkParticipantTileViews to the respective participants and activate them to render the videos.

import com.cloudflare.realtimekit.ui.view.participanttile.RtkParticipantTileView
import com.cloudflare.realtimekit.RealtimeKitClient

class VideoCallActivity : AppCompatActivity() {
    private lateinit var selfParticipantTileView: RtkParticipantTileView
    private lateinit var remoteParticipantTileView: RtkParticipantTileView
    private val meeting: RealtimeKitClient by lazy { RealtimeKitUIBuilder.meeting }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_video_call)

        selfParticipantTileView = findViewById(R.id.rtkparticipanttileview_self_participant)
        remoteParticipantTileView = findViewById(R.id.rtkparticipanttileview_remote_participant)

        activateUI(meeting)
    }

    private fun activateUI(meeting: RealtimeKitClient) {
        val localUser = meeting.localUser
        val remoteParticipant = meeting.participants.joined.firstOrNull { it.id != localUser.id } ?: return

        selfParticipantTileView.activate(localUser)
        remoteParticipantTileView.activate(remoteParticipant)
    }
}

3. Adding Controls (Bonus): You can easily add controls like mic toggle, camera toggle, and leave call button using the RtkMicToggleButton, RtkCameraToggle, and RtkLeaveButton provided by RealtimeKit's Android UI Kit.

Here's the screenshot of the UI implemented:

Wrap-Up

Congratulations! You've successfully built a custom UI to render participant videos using RealtimeKit's Android UI Kit.
With components like RtkGridView and RtkParticipantTileView, RealtimeKit's UI Kit simplifies video rendering in meetings and offers the flexibility to create dynamic video calling experiences.

Complete Code

You can find the complete code for this example in RealtimeKit's Facetime sample repository. Feel free to explore and try it out!