---
title: "Central Hub Component"
canonical_url: "https://apidocs.sportradar.com/resources/virtual-stadium/docs/android/centralHub"
markdown_url: "https://apidocs.sportradar.com/resources/virtual-stadium/docs/android/centralHub.md"
last_updated: "2026-04-16T10:19:11Z"
---

# Central Hub Component

The Central Hub component gives you a complete social betting experience in a single Android surface. It combines profiles, shared bets, search, notifications, following, onboarding, and leaderboards.

## Overview

This guide shows you how to:

1. render the Central Hub in Jetpack Compose or Android Views,
2. pass the required authentication and user context,
3. enable bet sharing and bet copying callbacks,
4. customize the visual theme, and
5. manage cleanup when the user logs out.

> **Info**
>
> **Prerequisites**
>
> - Initialize the Android UI SDK before showing the component.
> - Authenticate the user with a valid JWT token.
> - Provide the current signed-in user ID.

## Basic Integration

### Required Parameters

- **`jwtToken`** `String` *required* — authenticates the user and initializes the component.
- **`userId`** `String` *required* — identifies the currently signed-in user.
- **`onBack`** `() -> Unit` *required* — closes the Central Hub and returns control to your app.

### Optional Parameters

- **`modifier`** `Modifier` *optional* — Compose layout control.
- **`onGetBets`** `(suspend () -> List<BetPayload>)?` *optional* — provides betslips the user can share.
- **`onCopyToBetSlip`** `(BetPayload) -> Unit` *optional* — handles copied shared bets.
- **`uiSettings`** `CentralHubUISettings` *optional* — customizes theme, fonts, icons, and behavior.

> **Info**
>
> The Central Hub manages its own internal navigation for profiles, followers, search, notifications, comments, and bet sharing flows.

**Jetpack Compose**

```kotlin
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.ui.Modifier
import androidx.core.view.WindowCompat
import ag.sportradar.virtualstadium.uisdk.composables.CentralHub
import ag.sportradar.virtualstadium.datasdk.model.BetPayload

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        WindowCompat.setDecorFitsSystemWindows(window, false)

        setContent {
            CentralHub(
                jwtToken = "<your-jwt-token>",
                userId = "<your-user-id>",
                modifier = Modifier.fillMaxSize(),
                onGetBets = {
                    getUserBetSlips()
                },
                onCopyToBetSlip = { betPayload ->
                    addBetToSlip(betPayload)
                },
                onBack = {
                    finish()
                }
            )
        }
    }

    private suspend fun getUserBetSlips(): List<BetPayload> {
        return emptyList()
    }

    private fun addBetToSlip(betPayload: BetPayload) {
        // Add the copied bet to your own bet slip flow.
    }
}
```

**Android Views**

```xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <ag.sportradar.virtualstadium.uisdk.views.CentralHubView
        android:id="@+id/central_hub_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>
```

```kotlin
import androidx.activity.ComponentActivity
import androidx.core.view.WindowCompat
import ag.sportradar.virtualstadium.uisdk.views.CentralHubView
import ag.sportradar.virtualstadium.datasdk.model.BetPayload

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        WindowCompat.setDecorFitsSystemWindows(window, false)
        setContentView(R.layout.activity_main)

        val centralHubView = findViewById<CentralHubView>(R.id.central_hub_view)

        centralHubView.init(
            jwtToken = "<your-jwt-token>",
            userId = "<your-user-id>",
            onGetBets = {
                getUserBetSlips()
            },
            onCopyToBetSlip = { betPayload ->
                addBetToSlip(betPayload)
            },
            onBack = {
                finish()
            }
        )
    }

    private suspend fun getUserBetSlips(): List<BetPayload> {
        return emptyList()
    }

    private fun addBetToSlip(betPayload: BetPayload) {
        // Add the copied bet to your own bet slip flow.
    }
}
```

## Main Features

### Profile Tab

The profile area can show:

- user details,
- follower and following counts,
- profile statistics,
- shared bet history, and
- profile privacy and edit flows for the current user.

### Bets Tab

The bets area supports:

- browsing shared bets,
- opening comments,
- reacting to bets,
- copying bets, and
- sharing a new bet from the current user's own betslips.

### Ranks Tab

The leaderboard area supports:

- category filters,
- timeframe filters,
- the current user's rank, and
- paginated ranked users.

### Search, Followers, and Notifications

The component also includes:

- user search,
- followers and following screens,
- onboarding for first-time users, and
- bet, comment, and social notifications.

## Bet Sharing Integration

To enable sharing, implement `onGetBets` so the component can show betslips the user is allowed to share.

```kotlin
data class BetPayload(
    val betType: BetType,
    val selections: List<Selection>,
    val stake: Double,
    val totalOdds: Double,
    val potentialWin: Double,
)
```

```kotlin
CentralHub(
    jwtToken = jwtToken,
    userId = userId,
    onGetBets = {
        fetchUserBetSlips()
    },
    onCopyToBetSlip = { copiedBet ->
        addToBetSlip(copiedBet)
    },
    onBack = { finish() }
)
```

## UI Settings

Use `CentralHubUISettings` to align the component with your app's design system.

You can customize:

- theme colors,
- screen-specific colors,
- buttons, cards, and top bars,
- font family,
- sport icons, and
- other Central Hub behavior flags.

```kotlin
val customUISettings = CentralHubUISettings(
    theme = CentralHubThemeSettings(
        background = Color(0xFFF5F5F5),
        buttonColors = CentralHubButtonsColors(
            primaryBackground = Color(0xFF1976D2),
            primaryContent = Color.White,
        ),
    ),
    fontFamily = myCustomFontFamily,
    icons = CentralHubIcons(
        sportIcons = { sportId ->
            when (sportId) {
                "1" -> R.drawable.ic_custom_soccer
                else -> R.drawable.ic_sport_default
            }
        }
    ),
    otherSettings = CentralHubOtherSettings(),
)
```

## Lifecycle Management

If you use Android Views, destroy the component when the user logs out or when the host screen is being torn down.

> **Warning**
>
> Always call `destroy()` on `CentralHubView` during logout so user-specific Central Hub state is cleared correctly.

**Views**

```kotlin
class MainActivity : ComponentActivity() {

    private lateinit var centralHubView: CentralHubView

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

        centralHubView = findViewById(R.id.central_hub_view)
        centralHubView.init(
            jwtToken = jwtToken,
            userId = userId,
            onBack = { finish() }
        )
    }

    fun onUserLogout() {
        centralHubView.destroy()
        navigateToLogin()
    }
}
```

**Compose**

```kotlin
@Composable
fun MyScreen() {
    var showCentralHub by remember { mutableStateOf(true) }

    if (showCentralHub) {
        CentralHub(
            jwtToken = jwtToken,
            userId = userId,
            onBack = { showCentralHub = false }
        )
    }
}
```

## Next Steps

### Chat Component

Review the Android chat integration flow and related callbacks.

[Chat Component](https://apidocs.sportradar.com/resources/virtual-stadium/docs/android/chat.md)

### Profile Component

See how standalone profile screens work outside Central Hub.

[Profile Component](https://apidocs.sportradar.com/resources/virtual-stadium/docs/android/profile.md)

### Data SDK Central Hub

Explore the underlying providers that power the Central Hub experience.

[Data SDK Central Hub](https://apidocs.sportradar.com/resources/virtual-stadium/docs/sdk/centralHub/overview.md)