Skip to main content

Customize your Meeting UI

RealtimeKit provides a range of UI customizations for meetings, including defining participant interactions within a meeting room. The default values for these options are set to facilitate integration. However, you have the flexibility to override them at the client end to suit specific use cases or events.

When configuring a RealtimeKit meeting, you can pass the following configuration options.

val imarticusColors = ColorTokens(
      brand = BrandColor(
        shade300 = Color.parseColor("#ffea76"),
        shade400 = Color.parseColor("#ffe865"),
        shade500 = Color.parseColor("#ffe554"),
        shade600 = Color.parseColor("#e6ce4c"),
        shade700 = Color.parseColor("#ccb743"),
      ),
      background = BackgroundColor(
        shade600 = Color.parseColor("#121212"),
        shade700 = Color.parseColor("#454545"),
        shade800 = Color.parseColor("#898989"),
        shade900 = Color.parseColor("#b1b1b1"),
        shade1000 = Color.parseColor("#e1e1e1")
      ),
      text = TextColor(
        onBrand = TextColor.TextColorOnBrand(
          shade1000 = Color.parseColor("#ff002b4c"),
          shade900 = Color.parseColor("#e0002b4c"),
          shade800 = Color.parseColor("#c2002b4c"),
          shade700 = Color.parseColor("#a3002b4c"),
          shade600 = Color.parseColor("#85002b4c")
        ),
        onBackground = TextColor.TextColorOnBackground(
          shade1000 = Color.parseColor("#ff050505"),
          shade900 = Color.parseColor("#e0050505"),
          shade800 = Color.parseColor("#c2050505"),
          shade700 = Color.parseColor("#a3050505"),
          shade600 = Color.parseColor("#85050505")
        )
      )
    )

    val tokens = RtkDesignTokens(colors = imarticusColors,
      borderRadius = BorderRadiusToken.Circular,
      borderWidth = BorderWidthToken.Thin)
val meetingInfo = = RtkMeetingInfo(
  authToken = state.authToken,
)
val config = RealtimeKitUIConfig(
  activity = this,
  rtkMeetingInfo = meetingInfo,
  designTokens = tokens
)
val rtkClient = RealtimeKitUIBuilder.build(config)
rtkClient.loadUi()

Here is a visual representation showcasing all the defined configuration options.

meeting UI screenshot with labeled parts meeting UI screenshot with labeled parts meeting UI screenshot with labeled parts

RealtimeKit provides customization options for adjusting the color, border radius, and border width of your UI. Let's explore these customization options in more detail.

Customize color scheme to match your brand​

Customize the meeting's color scheme to match your brand and theme with RealtimeKit. You can specify four sets of color values:

  • brandColor: Primary brand color.
  • backgroundColor: Primary background color.
  • textColor: The primary text color for both the brand color and background.

brandColor​

BrandColor(
    shade300 = Color.parseColor("#ffea76"),
    shade400 = Color.parseColor("#ffe865"),
    shade500 = Color.parseColor("#ffe554"),
    shade600 = Color.parseColor("#e6ce4c"),
    shade700 = Color.parseColor("#ccb743"),
)

backgroundColor​

BackgroundColor(
    shade600 = Color.parseColor("#121212"),
    shade700 = Color.parseColor("#454545"),
    shade800 = Color.parseColor("#898989"),
    shade900 = Color.parseColor("#b1b1b1"),
    shade1000 = Color.parseColor("#e1e1e1")
)

textColor​

text = TextColor(
    onBrand = TextColor.TextColorOnBrand(
        shade1000 = Color.parseColor("#ff002b4c"),
        shade900 = Color.parseColor("#e0002b4c"),
        shade800 = Color.parseColor("#c2002b4c"),
        shade700 = Color.parseColor("#a3002b4c"),
        shade600 = Color.parseColor("#85002b4c")
    ),
    onBackground = TextColor.TextColorOnBackground(
        shade1000 = Color.parseColor("#ff050505"),
        shade900 = Color.parseColor("#e0050505"),
        shade800 = Color.parseColor("#c2050505"),
        shade700 = Color.parseColor("#a3050505"),
        shade600 = Color.parseColor("#85050505")
    )
)

Customize border radius of elements in the meeting​

To customize the border radius of elements in your RealtimeKit meeting, follow these steps:

  1. Create the RtkDesignTokens object:
val tokens = RtkDesignTokens(colors = colors, borderRadius = BorderRadiusToken.Rounded)
  • colors: Represents the color scheme for your meeting.
  • borderRadius: Defines the desired border radius. By specifying the desired border radius value in the borderRadius token, you can customize the border radius of elements in your RealtimeKit meeting.
  1. Configure RealtimeKitUI then build and load the RealtimeKit UI.
val meetingInfo = RtkMeetingInfo(
    // meeting info
)
val config = RealtimeKitUIConfig(
    activity = this,
    rtkMeetingInfo = meetingInfo,
    designTokens = tokens
)
val realtimeKit = RealtimeKitUIBuilder.build(config)
realtimeKit.loadUi()

meeting UI screenshot with labeled parts meeting UI screenshot with labeled parts meeting UI screenshot with labeled parts