Add Custom Controlbar·续

onCustomAction() { console.log("Custom action triggered"); // Add your custom logic here } }


This approach gives you complete control over the controlbar layout while maintaining Angular's component architecture and leveraging RealtimeKit's built-in functionality.

The iOS UI Kit provides `RtkMeetingControlBar` as the default controlbar for group call meetings. To build a custom controlbar, compose individual button components inside a `RtkTabBar`.

### Available controlbar button components

| Component | Description |
| --- | --- |
| `RtkAudioButtonControlBar` | Microphone toggle with automatic state management |
| `RtkVideoButtonControlBar` | Camera toggle with automatic state management |
| `RtkEndMeetingControlBarButton` | Leave/end meeting button with confirmation dialog |
| `RtkMoreButtonControlBar` | "More" menu button with bottom sheet |
| `RtkSwitchCameraButtonControlBar` | Front/back camera switch |
| `RtkStageActionButtonControlBar` | Stage join/leave for webinar and livestream |
| `RtkControlBarButton` | Base button class for custom buttons |
| `RtkControlBarSpacerButton` | Invisible spacer for layout |

### Build a custom controlbar using RtkTabBar

Create a `RtkTabBar` and add individual button components:

```swift
import RealtimeKitUI
import RealtimeKit

func buildCustomControlBar(
    meeting: RealtimeKitClient,
    viewController: UIViewController
) -> RtkTabBar {
    let tabBar = RtkTabBar(delegate: nil)

let micButton = RtkAudioButtonControlBar(meeting: meeting)
    let videoButton = RtkVideoButtonControlBar(rtkClient: meeting)
    let switchCameraButton = RtkSwitchCameraButtonControlBar(meeting: meeting)
    let endCallButton = RtkEndMeetingControlBarButton(
        meeting: meeting,
        alertViewController: viewController
    )

tabBar.setButtons([micButton, videoButton, switchCameraButton, endCallButton])
    return tabBar
}

Add the custom controlbar to your view controller

override func viewDidLoad() {
    super.viewDidLoad()

let controlBar = buildCustomControlBar(
        meeting: meeting,
        viewController: self
    )
    controlBar.translatesAutoresizingMaskIntoConstraints = false
    view.addSubview(controlBar)

NSLayoutConstraint.activate([
        controlBar.bottomAnchor.constraint(
            equalTo: view.safeAreaLayoutGuide.bottomAnchor
        ),
        controlBar.leadingAnchor.constraint(equalTo: view.leadingAnchor),
        controlBar.trailingAnchor.constraint(equalTo: view.trailingAnchor),
        controlBar.heightAnchor.constraint(equalToConstant: 80),
    ])
}

Use the DataSource pattern for button replacement

Implement RtkMeetingControlBarDataSource to replace specific buttons while keeping the default controlbar layout:

class CustomControlBarDataSource: RtkMeetingControlBarDataSource {
    func getMicControlBarButton(
        for meeting: RealtimeKitClient
    ) -> RtkControlBarButton? {
        // Return a custom mic button, or nil to use the default
        let button = RtkAudioButtonControlBar(meeting: meeting)
        return button
    }

func getVideoControlBarButton(
        for meeting: RealtimeKitClient
    ) -> RtkControlBarButton? {
        // Return a custom video button, or nil to use the default
        let button = RtkVideoButtonControlBar(rtkClient: meeting)
        return button
    }
}

// Assign the data source
let controlBar = RtkMeetingControlBar(
    meeting: meeting,
    delegate: nil,
    presentingViewController: self
)
controlBar.dataSource = CustomControlBarDataSource()

Add custom buttons

Create a custom button using RtkControlBarButton:

let customButton = RtkControlBarButton(
    image: RtkImage(image: UIImage(systemName: "hand.raised.fill")),
    title: "Raise Hand"
)
customButton.addTarget(self, action: #selector(onRaiseHand), for: .touchUpInside)

// Add it alongside other buttons
tabBar.setButtons([micButton, videoButton, customButton, endCallButton])

The Android UI Kit provides RtkMeetingControlBarView as the default controlbar. To build a custom controlbar, use individual button components in an XML layout and activate them with the meeting object.

Available controlbar button components

Component Activate with Description
RtkMicToggleButton RealtimeKitClient Microphone toggle with state management
RtkCameraToggleButton RealtimeKitClient Camera toggle with state management
RtkLeaveButton RealtimeKitClient Leave/end meeting button with confirmation dialog
RtkMoreToggleButton RealtimeKitClient "More" menu button
RtkControlBarButton — Base button class for custom buttons

Define a custom controlbar layout in XML

layout_custom_controlbar.xmlxml

<?xml version="1.0" encoding="utf-8"?>
&lt;com.cloudflare.realtimekit.ui.view.controlbars.RtkControlBarView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/customControlBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:padding="8dp">

&lt;com.cloudflare.realtimekit.ui.view.controlbarbuttons.RtkMicToggleButton
        android:id="@+id/micToggle"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_margin="4dp" />

&lt;com.cloudflare.realtimekit.ui.view.controlbarbuttons.RtkCameraToggleButton
        android:id="@+id/cameraToggle"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_margin="4dp" />

&lt;com.cloudflare.realtimekit.ui.view.controlbarbuttons.RtkMoreToggleButton
        android:id="@+id/moreToggle"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_margin="4dp" />

&lt;com.cloudflare.realtimekit.ui.view.controlbarbuttons.RtkLeaveButton
        android:id="@+id/leaveButton"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_margin="4dp" />

&lt;/com.cloudflare.realtimekit.ui.view.controlbars.RtkControlBarView>

Activate the controlbar buttons in your Activity

CustomMeetingActivity.ktkotlin

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import com.cloudflare.realtimekit.RealtimeKitClient
import com.cloudflare.realtimekit.ui.view.controlbarbuttons.RtkMicToggleButton
import com.cloudflare.realtimekit.ui.view.controlbarbuttons.RtkCameraToggleButton
import com.cloudflare.realtimekit.ui.view.controlbarbuttons.RtkMoreToggleButton
import com.cloudflare.realtimekit.ui.view.controlbarbuttons.RtkLeaveButton

class CustomMeetingActivity : AppCompatActivity() {

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

// Your meeting initialization code...
    }

fun activateControlBar(meeting: RealtimeKitClient) {
        findViewById&lt;RtkMicToggleButton>(R.id.micToggle).activate(meeting)
        findViewById&lt;RtkCameraToggleButton>(R.id.cameraToggle).activate(meeting)
        findViewById&lt;RtkMoreToggleButton>(R.id.moreToggle).activate(meeting)
        findViewById&lt;RtkLeaveButton>(R.id.leaveButton).activate(meeting)
    }
}

Add custom buttons using RtkControlBarButton

Create a custom button in XML:

&lt;com.cloudflare.realtimekit.ui.view.controlbarbuttons.RtkControlBarButton
    android:id="@+id/raiseHandButton"
    android:layout_width="48dp"
    android:layout_height="48dp"
    android:layout_margin="4dp"
    android:text="Raise Hand"
    app:rtk_cbb_icon="@drawable/ic_raise_hand"
    app:rtk_cbb_variant="BUTTON"
    app:rtk_cbb_showText="true" />

Handle the click in Kotlin:

val raiseHandButton = findViewById&lt;RtkControlBarButton>(R.id.raiseHandButton)
raiseHandButton.setOnClickListener {
    // Custom raise hand logic
}

Note

Call activate(meeting) on each button after the meeting room is joined. Buttons will not function until they are activated with a valid RealtimeKitClient instance.

The React Native UI Kit provides individual toggle components that you can compose into a custom controlbar.

Available controlbar components

Component Required prop Description
RtkMicToggle meeting Microphone toggle with permission handling
RtkCameraToggle meeting Camera toggle with permission handling
RtkLeaveButton — Leave/end meeting button with confirmation dialog
RtkMoreToggle meeting "More" menu toggle with notification badge
RtkScreenShareToggle meeting Screen share toggle
RtkControlbarButton — Base button for custom actions

Build a custom controlbar

Replace RtkControlbar with individual components in a View:

import React from "react";
import { View, StyleSheet } from "react-native";
import {
    RtkMicToggle,
    RtkCameraToggle,
    RtkLeaveButton,
    RtkMoreToggle,
    RtkScreenShareToggle,
} from "@cloudflare/realtimekit-react-native-ui";

function CustomControlbar({ meeting }) {
    return (
        &lt;View style={styles.controlbar}>
            &lt;RtkMicToggle meeting={meeting} variant="horizontal" />
            &lt;RtkCameraToggle meeting={meeting} variant="horizontal" />
            &lt;RtkScreenShareToggle meeting={meeting} variant="horizontal" />
            &lt;RtkMoreToggle meeting={meeting} variant="horizontal" />
            &lt;RtkLeaveButton />
        &lt;/View>
    );
}

const styles = StyleSheet.create({
    controlbar: {
        flexDirection: "row",
        justifyContent: "space-evenly",
        alignItems: "center",
        backgroundColor: "#1A1A1A",
        paddingVertical: 8,
        paddingHorizontal: 16,
    },
});

Use the custom controlbar in your meeting screen

In your MeetingScreens component from Build Your Own UI, replace:

&lt;RtkControlbar meeting={meeting} />

with:

&lt;CustomControlbar meeting={meeting} />

Add custom buttons using RtkControlbarButton

Use RtkControlbarButton to create buttons that match the RealtimeKit design:

import { RtkControlbarButton } from "@cloudflare/realtimekit-react-native-ui";

function CustomControlbar({ meeting }) {
    return (
        &lt;View style={styles.controlbar}>
            &lt;RtkMicToggle meeting={meeting} variant="horizontal" />
            &lt;RtkCameraToggle meeting={meeting} variant="horizontal" />
            &lt;RtkControlbarButton
                label="Raise Hand"
                icon={raiseHandSvg}
                onClick={() => {
                    // Custom raise hand logic
                }}
                variant="horizontal"
            />
            &lt;RtkLeaveButton />
        &lt;/View>
    );
}

Note

Wrap your component tree in RtkUIProvider. All UI Kit components read design tokens and state from RtkUIContext.

Was this helpful?

YesNo

On this page

Add Custom Controlbar·续 - 图1Docs

{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/humans/ui-kit/custom-controlbar/#page","headline":"Add Custom Controlbar","description":"Add a custom controlbar to your RealtimeKit meeting UI with individual components.","url":"https://developers.cloudflare.com/realtime/realtimekit/humans/ui-kit/custom-controlbar/","inLanguage":"en","image":"https://developers.cloudflare.com/realtime/realtimekit/humans/ui-kit/custom-controlbar/og.png?v=7919b7c9ed298bee","dateModified":"2026-10-19","publisher":{"@type":"Organization","name":"Cloudflare","description":"One platform for your apps, agents, and workforce. Build, secure, and scale without managing infrastructure","url":"https://www.cloudflare.com/","sameAs":["https://github.com/cloudflare","https://www.linkedin.com/company/cloudflare","https://x.com/cloudflare"],"logo":{"@type":"ImageObject","url":"https://developers.cloudflare.com/logo.svg"},"address":{"@type":"PostalAddress","streetAddress":"101 Townsend St","addressLocality":"San Francisco","addressRegion":"CA","postalCode":"94107","addressCountry":"US"},"contactPoint":[{"@type":"ContactPoint","contactType":"Customer Support","url":"https://support.cloudflare.com/","availableLanguage":["English"]},{"@type":"ContactPoint","contactType":"Sales","url":"https://www.cloudflare.com/contact/","availableLanguage":["English"]}]},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}

description: Add a custom header to your RealtimeKit meeting UI with individual components. title: Add Custom Header image: https://developers.cloudflare.com/realtime/realtimekit/humans/ui-kit/custom-header/og.png?v=e73652b1d8137740

Skip to content

Documentation Index
Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt
Use this file to discover all available pages before exploring further.