Skip to content

Commit 705cace

Browse files
yash-gargyash-garg
committed
[RealtimeKit] Add Component References for Mobile SDKs
1 parent 740cd36 commit 705cace

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

56 files changed

+1653
-0
lines changed

‎src/content/docs/realtime/realtimekit/ui-kit/api-reference/android/audio-device-selector.mdx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
---
2+
title: RtkAudioDeviceSelector
3+
pcx_content_type: navigation
4+
description: API reference for RtkAudioDeviceSelector component (Android Library)
5+
---
6+
7+
An audio device selector component which can be used to select audio devices.
8+
9+
## Properties
10+
11+
| Property | Type | Required | Default | Description |
12+
| -------------- | -------- | -------- | ------- | ----------------- |
13+
| `rtk_ds_label` | `string` | ❌ | `Audio` | Custom label text |
14+
15+
## Methods
16+
17+
| Method | Parameters | Description |
18+
| ------------------- | ------------------------------- | ----------------------------------------- |
19+
| `activate` | `meeting: RealtimeKitClient` | Bind the selector to the meeting state |
20+
| `disableLabel` | - | Disable the label text above the dropdown |
21+
| `applyDesignTokens` | `designTokens: RtkDesignTokens` | Apply custom design tokens for theming |
22+
23+
## Usage Examples
24+
25+
### Basic Usage
26+
27+
```xml
28+
<com.cloudflare.realtimekit.ui.view.RtkAudioDeviceSelector
29+
android:id="@+id/audioSelector"
30+
app:rtk_ds_label="Audio"
31+
android:layout_width="0dp"
32+
android:layout_height="wrap_content" />
33+
```
34+
35+
### With Methods
36+
37+
```kotlin
38+
val audioSelector = findViewById<RtkAudioDeviceSelector>(R.id.audioSelector)
39+
audioSelector.activate(meeting)
40+
```

‎src/content/docs/realtime/realtimekit/ui-kit/api-reference/android/avatar-view.mdx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
---
2+
pcx_content_type: navigation
3+
title: RtkAvatarView
4+
description: API reference for RtkAvatarView component (Android Library)
5+
---
6+
7+
Avatar component which renders a participant's profile picture or their initials.
8+
9+
## Methods
10+
11+
| Method | Parameters | Description |
12+
| ------------------- | ------------------------------------ | -------------------------------------------------- |
13+
| `activate` | `participant: RtkMeetingParticipant` | Bind the avatar to a participant |
14+
| `refresh` | - | Refresh the avatar based on the participant's name |
15+
| `applyDesignTokens` | `designTokens: RtkDesignTokens` | Apply custom design tokens for theming |
16+
17+
## Usage Examples
18+
19+
### Basic Usage
20+
21+
```xml
22+
<com.cloudflare.realtimekit.ui.view.avatarview.RtkAvatarView
23+
android:id="@+id/rtk_avatar"
24+
android:layout_width="48dp"
25+
android:layout_height="48dp" />
26+
```
27+
28+
### With Methods
29+
30+
```kotlin
31+
val avatar = findViewById<RtkAvatarView>(R.id.rtk_avatar)
32+
avatar.activate(participant)
33+
```

‎src/content/docs/realtime/realtimekit/ui-kit/api-reference/android/button.mdx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
---
2+
pcx_content_type: navigation
3+
title: RtkButton
4+
description: API reference for RtkButton component (Android Library)
5+
---
6+
7+
A button that follows the RealtimeKit design system.
8+
9+
## Properties
10+
11+
| Property | Type | Required | Default | Description |
12+
| ----------------- | -------------------------------- | -------- | ------- | -------------- |
13+
| `rtk_btn_variant` | `primary \| secondary \| danger` | ❌ | - | Button variant |
14+
15+
## Methods
16+
17+
| Method | Parameters | Description |
18+
| ------------------- | ------------------------------- | ------------------------------------------- |
19+
| `applyDesignTokens` | `designTokens: RtkDesignTokens` | Apply custom design tokens for theming |
20+
| `refresh` | `uiTokens: RtkDesignTokens` | Refresh the button with the provided tokens |
21+
22+
## Usage Examples
23+
24+
### Basic Usage
25+
26+
```xml
27+
<com.cloudflare.realtimekit.ui.view.button.RtkButton
28+
android:id="@+id/btn_id"
29+
android:layout_width="200dp"
30+
android:layout_height="48dp"
31+
android:text="Text on Button"
32+
app:rtk_btn_variant="primary" />
33+
```

‎src/content/docs/realtime/realtimekit/ui-kit/api-reference/android/camera-toggle.mdx‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
---
2+
pcx_content_type: navigation
3+
title: RtkCameraToggleButton
4+
description: API reference for RtkCameraToggleButton component (Android Library)
5+
---
6+
7+
A button which toggles the local user's camera. It automatically listens to self video events to update its state.
8+
9+
## Methods
10+
11+
| Method | Parameters | Description |
12+
| ------------ | ---------------------------- | -------------------------------------------- |
13+
| `activate` | `meeting: RealtimeKitClient` | Bind the button to the meeting state |
14+
| `deactivate` | - | Unbind the button and remove event listeners |
15+
16+
## Usage Examples
17+
18+
### Basic Usage
19+
20+
```xml
21+
<com.cloudflare.realtimekit.ui.view.controlbarbuttons.RtkCameraToggleButton
22+
android:id="@+id/btn_camera_toggle"
23+
android:layout_width="wrap_content"
24+
android:layout_height="wrap_content" />
25+
```
26+
27+
### With Methods
28+
29+
```kotlin
30+
val cameraToggleButton = findViewById<RtkCameraToggleButton>(R.id.btn_camera_toggle)
31+
cameraToggleButton.activate(meeting)
32+
```

‎src/content/docs/realtime/realtimekit/ui-kit/api-reference/android/chat.mdx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
---
2+
pcx_content_type: navigation
3+
title: RtkChatBottomSheet
4+
description: API reference for RtkChatBottomSheet component (Android Library)
5+
---
6+
7+
Fully featured chat screen with image and file upload and auto-scroll.
8+
9+
## Methods
10+
11+
| Method | Parameters | Description |
12+
| ------ | ------------------------------------------------ | ----------------------------- |
13+
| `show` | `fragmentManager: FragmentManager, tag: String?` | Display the chat bottom sheet |
14+
15+
## Usage Examples
16+
17+
### Basic Usage
18+
19+
```kotlin
20+
val rtkChatBottomSheet = RtkChatBottomSheet()
21+
rtkChatBottomSheet.show(fragmentManager, "CHAT_TAG")
22+
```

‎src/content/docs/realtime/realtimekit/ui-kit/api-reference/android/clock-view.mdx‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
---
2+
title: RtkClockView
3+
pcx_content_type: navigation
4+
description: API reference for RtkClockView component (Android Library)
5+
---
6+
7+
A clock component which shows the elapsed time of a meeting.
8+
9+
## Methods
10+
11+
| Method | Parameters | Description |
12+
| ------------------- | ------------------------------- | -------------------------------------- |
13+
| `activate` | `meeting: RealtimeKitClient` | Bind the clock to the meeting state |
14+
| `applyDesignTokens` | `designTokens: RtkDesignTokens` | Apply custom design tokens for theming |
15+
16+
## Usage Examples
17+
18+
### Basic Usage
19+
20+
```xml
21+
<com.cloudflare.realtimekit.ui.view.RtkClockView
22+
android:id="@+id/rtk_clock_view"
23+
android:layout_width="wrap_content"
24+
android:layout_height="wrap_content" />
25+
```
26+
27+
### With Methods
28+
29+
```kotlin
30+
val clockView = findViewById<RtkClockView>(R.id.rtk_clock_view)
31+
clockView.activate(meeting)
32+
```

‎src/content/docs/realtime/realtimekit/ui-kit/api-reference/android/control-bar-button.mdx‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
---
2+
pcx_content_type: navigation
3+
title: RtkControlBarButton
4+
description: API reference for RtkControlBarButton component (Android Library)
5+
---
6+
7+
A skeleton component used for composing custom controlbar buttons.
8+
9+
## Properties
10+
11+
| Property | Type | Required | Default | Description |
12+
| --------------------- | ---------------------- | -------- | -------- | ------------------------------------- |
13+
| `rtk_cbb_icon` | `reference` | ❌ | - | Drawable resource for the button icon |
14+
| `rtk_cbb_variant` | `button \| horizontal` | ❌ | `button` | Layout variant |
15+
| `rtk_cbb_showText` | `boolean` | ❌ | `true` | Whether to show the label text |
16+
| `rtk_cbb_iconSize` | `dimension` | ❌ | - | Size of the icon |
17+
| `rtk_cbb_iconPadding` | `dimension` | ❌ | - | Padding between icon and label |
18+
19+
## Methods
20+
21+
| Method | Parameters | Description |
22+
| -------------------- | ------------------------------- | -------------------------------------- |
23+
| `applyDesignTokens` | `designTokens: RtkDesignTokens` | Apply custom design tokens for theming |
24+
| `setIconDrawable` | `drawable: Drawable?` | Set the button icon |
25+
| `setIconTint` | `color: Int` | Set the icon tint color |
26+
| `setText` | `text: String?` | Set the button label text |
27+
| `setProcessingState` | `processing: Boolean` | Show or hide a loading spinner |
28+
29+
## Usage Examples
30+
31+
### Basic Usage
32+
33+
```xml
34+
<com.cloudflare.realtimekit.ui.view.controlbarbuttons.RtkControlBarButton
35+
android:id="@+id/rtk_control_bar_button"
36+
android:layout_width="wrap_content"
37+
android:layout_height="wrap_content"
38+
app:rtk_cbb_showText="true"
39+
app:rtk_cbb_variant="button" />
40+
```
41+
42+
### With Methods
43+
44+
```kotlin
45+
val buttonView = findViewById<RtkControlBarButton>(R.id.rtk_control_bar_button)
46+
buttonView.setOnClickListener { }
47+
```

‎src/content/docs/realtime/realtimekit/ui-kit/api-reference/android/control-bar-view.mdx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
---
2+
title: RtkControlBarView
3+
pcx_content_type: navigation
4+
description: API reference for RtkControlBarView component (Android Library)
5+
---
6+
7+
A base container for control bar buttons. Provides design token support and background styling.
8+
9+
## Methods
10+
11+
| Method | Parameters | Description |
12+
| ------------------- | ------------------------------- | -------------------------------------- |
13+
| `applyDesignTokens` | `designTokens: RtkDesignTokens` | Apply custom design tokens for theming |
14+
15+
## Usage Examples
16+
17+
### Basic Usage
18+
19+
```xml
20+
<com.cloudflare.realtimekit.ui.view.controlbars.RtkControlBarView
21+
android:id="@+id/rtk_control_bar"
22+
android:layout_width="match_parent"
23+
android:layout_height="wrap_content" />
24+
```

‎src/content/docs/realtime/realtimekit/ui-kit/api-reference/android/create-poll.mdx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
---
2+
pcx_content_type: navigation
3+
title: RtkCreatePollBottomSheet
4+
description: API reference for RtkCreatePollBottomSheet component (Android Library)
5+
---
6+
7+
A component that lets you create a poll.
8+
9+
## Methods
10+
11+
| Method | Parameters | Description |
12+
| ------ | ------------------------------------------------ | ------------------------------------ |
13+
| `show` | `fragmentManager: FragmentManager, tag: String?` | Display the create poll bottom sheet |
14+
15+
## Usage Examples
16+
17+
### Basic Usage
18+
19+
```kotlin
20+
val rtkCreatePollBottomSheet = RtkCreatePollBottomSheet()
21+
rtkCreatePollBottomSheet.show(fragmentManager, "CREATE_POLL_TAG")
22+
```

‎src/content/docs/realtime/realtimekit/ui-kit/api-reference/android/design-tokens.mdx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
---
2+
pcx_content_type: navigation
3+
title: RtkDesignTokens
4+
description: API reference for RtkDesignTokens component (Android Library)
5+
---
6+
7+
The top-level design token container for customizing the look and feel of all UI Kit components.
8+
9+
## Properties
10+
11+
| Property | Type | Required | Default | Description |
12+
| -------------- | ---------------------- | -------- | ------- | ------------------- |
13+
| `colors` | `RtkColorTokens` | ❌ | - | Color theme tokens |
14+
| `borderWidth` | `RtkBorderWidthToken` | ❌ | - | Border width token |
15+
| `borderRadius` | `RtkBorderRadiusToken` | ❌ | - | Border radius token |
16+
17+
## Usage Examples
18+
19+
### Basic Usage
20+
21+
```kotlin
22+
val designTokens = RtkDesignTokens(
23+
colors = RtkColorTokens(
24+
brand = BrandColor(
25+
shade300 = Color.parseColor("#497CFD"),
26+
shade400 = Color.parseColor("#356EFD"),
27+
shade500 = Color.parseColor("#2160FD"),
28+
shade600 = Color.parseColor("#0D52FD"),
29+
shade700 = Color.parseColor("#0046E5")
30+
),
31+
background = BackgroundColor(
32+
shade600 = Color.parseColor("#2C2C2C"),
33+
shade700 = Color.parseColor("#242424"),
34+
shade800 = Color.parseColor("#1C1C1C"),
35+
shade900 = Color.parseColor("#141414"),
36+
shade1000 = Color.parseColor("#0C0C0C")
37+
)
38+
),
39+
borderRadius = RtkBorderRadiusToken.Rounded,
40+
borderWidth = RtkBorderWidthToken.Thin
41+
)
42+
```

0 commit comments

Comments
 (0)