Skip to content

Refresh the video calling screens with the design system tokens #1827

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
andremion wants to merge 10 commits into
base: develop-v2
Choose a base branch
from
Open

Refresh the video calling screens with the design system tokens #1827

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
adb1521
Apply the design tokens to the in-call components
andremion Sep 10, 2026
2e29ee5
Refresh the demo call screen with the design tokens
andremion Sep 10, 2026
08abcd3
Draw the demo call screen edge to edge
andremion Sep 10, 2026
aafbf8b
Highlight the demo settings button only while its menu is open
andremion Sep 11, 2026
ad6c1aa
Size the call control buttons at 48dp
andremion Sep 11, 2026
8490569
Restore the music note icons on the hifi audio toggle
andremion Sep 11, 2026
9305195
Make the secondary buttons visible on the call screens
andremion Sep 11, 2026
072ab8e
Keep the large avatar initials cap absolute at any font scale
andremion Sep 11, 2026
7aa1e86
Stop the audio call layouts from applying the caller modifier twice
andremion Sep 11, 2026
40af253
Match the chat avatar initials ladder below 80dp
andremion Sep 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions demo-app/src/main/kotlin/io/getstream/video/android/CallActivity.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ package io.getstream.video.android
import android.content.Intent
import android.os.Bundle
import android.os.PersistableBundle
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.layout.BoxScope
import androidx.compose.foundation.layout.ColumnScope
import androidx.compose.runtime.Composable
Expand Down Expand Up @@ -81,6 +82,7 @@ class CallActivity : ComposeStreamCallActivity() {
}

override fun onCreate(savedInstanceState: Bundle?) {
enableEdgeToEdge()
super.onCreate(savedInstanceState)
observeRingingState()
}
Expand Down
50 changes: 23 additions & 27 deletions demo-app/src/main/kotlin/io/getstream/video/android/ui/call/CallScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,12 +41,10 @@ import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.ExperimentalMaterialApi
import androidx.compose.material.Icon
import androidx.compose.material.IconButton
import androidx.compose.material.ModalBottomSheetValue
import androidx.compose.material.Snackbar
import androidx.compose.material.Text
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Close
import androidx.compose.material.icons.filled.MoreVert
import androidx.compose.material.icons.filled.People
import androidx.compose.material.icons.filled.SignalWifiBad
Expand All @@ -67,7 +65,6 @@ import androidx.compose.ui.Alignment
import androidx.compose.ui.Alignment.Companion.CenterVertically
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.vector.rememberVectorPainter
import androidx.compose.ui.platform.LocalConfiguration
import androidx.compose.ui.platform.LocalContext
Expand All @@ -79,7 +76,6 @@ import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.IntOffset
import androidx.compose.ui.unit.IntSize
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.compose.ui.window.Popup
import androidx.lifecycle.compose.collectAsStateWithLifecycle
import io.getstream.android.video.generated.models.TranscriptionSettingsResponse
Expand All @@ -88,6 +84,7 @@ import io.getstream.video.android.BuildConfig
import io.getstream.video.android.R
import io.getstream.video.android.compose.pip.rememberIsInPipMode
import io.getstream.video.android.compose.theme.VideoTheme
import io.getstream.video.android.compose.theme.design.StreamTokens
import io.getstream.video.android.compose.ui.components.base.StreamBadgeBox
import io.getstream.video.android.compose.ui.components.base.StreamButtonSize
import io.getstream.video.android.compose.ui.components.base.StreamButtonStyleDefaults
Expand Down Expand Up @@ -141,6 +138,7 @@ import kotlinx.coroutines.flow.distinctUntilChanged
import kotlinx.coroutines.flow.map
import kotlinx.coroutines.flow.sample
import kotlinx.coroutines.launch
import io.getstream.video.android.compose.R as ComposeR

@OptIn(FlowPreview::class)
@Composable
Expand Down Expand Up @@ -223,7 +221,12 @@ fun CallScreen(
}
}
val paddings = if (orientation == Configuration.ORIENTATION_PORTRAIT) {
PaddingValues(start = 4.dp, end = 4.dp, top = 8.dp, bottom = 16.dp)
PaddingValues(
start = StreamTokens.spacing2xs,
end = StreamTokens.spacing2xs,
top = StreamTokens.spacingXs,
bottom = StreamTokens.spacingMd,
)
} else {
PaddingValues(0.dp)
}
Expand Down Expand Up @@ -335,7 +338,7 @@ fun CallScreen(
},
appBarContent = {
CallAppBar(
modifier = Modifier.padding(horizontal = 8.dp),
modifier = Modifier.padding(horizontal = StreamTokens.spacingXs),
call = call,
leadingContent = {
val iconOnOff = painterResource(R.drawable.ic_layout_grid)
Expand All @@ -350,11 +353,7 @@ fun CallScreen(
!isShowingLayoutChooseMenu
}

Spacer(
modifier = Modifier.size(
16.dp,
),
)
Spacer(modifier = Modifier.size(StreamTokens.spacingMd))

FlipCameraAction(
modifier = Modifier.testTag(
Expand Down Expand Up @@ -399,7 +398,7 @@ fun CallScreen(
.testTag(
"Stream_CallSettingsToggle_Open_$isShowingSettingMenu",
),
isShowingSettings = !isShowingSettingMenu,
isShowingSettings = isShowingSettingMenu,
onCallAction = {
isShowingSettingMenu = !isShowingSettingMenu
},
Expand Down Expand Up @@ -496,7 +495,7 @@ fun CallScreen(
ParticipantVideo(
modifier = Modifier
.fillMaxSize()
.clip(RoundedCornerShape(24.dp))
.clip(RoundedCornerShape(StreamTokens.radius3xl))
.testTag("Stream_FloatingVideoView"),
call = call,
participant = participant,
Expand Down Expand Up @@ -607,19 +606,16 @@ fun CallScreen(
context = context,
)

IconButton(
StreamIconButton(
modifier = Modifier
.align(Alignment.TopEnd)
.padding(top = 10.dp, end = 10.dp)
.padding(top = StreamTokens.spacingXs, end = StreamTokens.spacingXs)
.testTag("Stream_InviteCloseButton"),
onClick = { showShareDialog = false },
) {
Icon(
tint = Color.White,
imageVector = Icons.Default.Close,
contentDescription = Icons.Default.Close.name,
)
}
icon = painterResource(ComposeR.drawable.stream_design_ic_xmark),
contentDescription = "Close",
style = StreamButtonStyleDefaults.secondaryGhost,
)
}
}
}
Expand Down Expand Up @@ -878,31 +874,31 @@ private fun BadNetworkLabel(
Row(
modifier = modifier
.align(Alignment.BottomCenter)
.padding(vertical = 90.dp, horizontal = 16.dp)
.padding(vertical = 90.dp, horizontal = StreamTokens.spacingMd)
.background(
color = VideoTheme.colors.backgroundCoreOverlayDarkStrong,
shape = RoundedCornerShape(16.dp),
shape = RoundedCornerShape(StreamTokens.radiusXl),
)
.testTag("video_renderer_fallback_bad_network"),
horizontalArrangement = Arrangement.Center,
verticalAlignment = Alignment.CenterVertically,
) {
Icon(
modifier = Modifier
.padding(12.dp)
.padding(StreamTokens.spacingSm)
.align(CenterVertically),
imageVector = Icons.Default.SignalWifiBad,
contentDescription = null,
tint = VideoTheme.colors.textOnAccent,
)
Text(
modifier = Modifier.padding(12.dp),
modifier = Modifier.padding(StreamTokens.spacingSm),
text = stringResource(
id = io.getstream.video.android.ui.common.R.string.stream_video_call_bad_network,
),
style = VideoTheme.typography.captionDefault,
color = VideoTheme.colors.textOnAccent,
textAlign = TextAlign.Center,
fontSize = 14.sp,
)
}
}
Expand Down
4 changes: 2 additions & 2 deletions demo-app/src/main/kotlin/io/getstream/video/android/ui/call/DemoComponentFactory.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,11 +22,11 @@ import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.testTag
import androidx.compose.ui.unit.dp
import io.getstream.android.video.generated.models.OwnCapability
import io.getstream.video.android.compose.theme.ParticipantVideoActionsContentParams
import io.getstream.video.android.compose.theme.ParticipantVideoReactionContentParams
import io.getstream.video.android.compose.theme.VideoComponentFactory
import io.getstream.video.android.compose.theme.design.StreamTokens
import io.getstream.video.android.compose.ui.components.call.pinning.ParticipantAction
import io.getstream.video.android.compose.ui.components.call.pinning.ParticipantActions
import io.getstream.video.android.compose.ui.components.call.renderer.copy
Expand Down Expand Up @@ -60,7 +60,7 @@ object DemoComponentFactory : VideoComponentFactory {
ParticipantActions(
modifier = Modifier
.align(Alignment.TopStart)
.padding(8.dp)
.padding(StreamTokens.spacingXs)
.testTag("Stream_ParticipantActionsIcon"),
actions = params.actions + listOf(
ParticipantAction(
Expand Down
53 changes: 26 additions & 27 deletions demo-app/src/main/kotlin/io/getstream/video/android/ui/call/ShareCall.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,29 +32,27 @@ import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Text
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.CopyAll
import androidx.compose.material.icons.filled.PersonAddAlt1
import androidx.compose.runtime.Composable
import androidx.compose.runtime.State
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.vector.rememberVectorPainter
import androidx.compose.ui.platform.LocalConfiguration
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import io.getstream.video.android.compose.theme.VideoTheme
import io.getstream.video.android.compose.theme.design.StreamTokens
import io.getstream.video.android.compose.ui.components.base.StreamButtonStyleDefaults
import io.getstream.video.android.compose.ui.components.base.StreamTextButton
import io.getstream.video.android.core.Call
import io.getstream.video.android.mock.StreamPreviewDataUtils
import io.getstream.video.android.mock.previewCall
import io.getstream.video.android.util.config.types.StreamEnvironment
import io.getstream.video.android.compose.R as ComposeR

@Composable
public fun ShareCallWithOthers(
Expand Down Expand Up @@ -103,45 +101,45 @@ public fun ShareSettingsBox(
modifier = modifier
.background(
color = VideoTheme.colors.backgroundCoreSurfaceDefault,
shape = RoundedCornerShape(24.dp),
shape = RoundedCornerShape(StreamTokens.radius3xl),
),
) {
Column(
modifier = Modifier
.fillMaxWidth()
.padding(24.dp),
.padding(StreamTokens.spacingXl),
horizontalAlignment = Alignment.CenterHorizontally,
) {
Text(
text = "Your meeting is live!",
modifier = Modifier.fillMaxWidth(),
textAlign = TextAlign.Center,
style = VideoTheme.typography.headingLarge.copy(fontSize = 20.sp),
style = VideoTheme.typography.headingLarge,
)
Spacer(modifier = Modifier.size(16.dp))
Spacer(modifier = Modifier.size(StreamTokens.spacingMd))
StreamTextButton(
modifier = Modifier
.fillMaxWidth()
.height(36.dp),
text = "Add others",
leadingIcon = rememberVectorPainter(Icons.Default.PersonAddAlt1),
leadingIcon = painterResource(ComposeR.drawable.stream_design_ic_user_add_fill),
style = StreamButtonStyleDefaults.primarySolid,
onClick = { onShare(call.id) },
)
Spacer(modifier = Modifier.size(16.dp))
Spacer(modifier = Modifier.size(StreamTokens.spacingMd))
StreamTextButton(
modifier = Modifier
.fillMaxWidth()
.height(36.dp),
text = "Call ID: ${call.id}",
leadingIcon = rememberVectorPainter(Icons.Default.CopyAll),
style = StreamButtonStyleDefaults.secondarySolid,
leadingIcon = painterResource(ComposeR.drawable.stream_design_ic_copy_fill),
style = StreamButtonStyleDefaults.secondaryOutline,
onClick = {
val clipData = ClipData.newPlainText("Call ID", call.id)
clipboardManager?.setPrimaryClip(clipData)
},
)
Spacer(modifier = Modifier.size(16.dp))
Spacer(modifier = Modifier.size(StreamTokens.spacingMd))
JoinCallQRCode(shareUrl = shareUrl)
}
}
Expand All @@ -159,54 +157,54 @@ public fun ShareSettingsBoxLandscape(
modifier = modifier
.background(
color = VideoTheme.colors.backgroundCoreSurfaceDefault,
shape = RoundedCornerShape(24.dp),
shape = RoundedCornerShape(StreamTokens.radius3xl),
),
) {
Row {
Box(
modifier = Modifier
.weight(1f)
.padding(32.dp),
.padding(StreamTokens.spacing2xl),
) {
JoinCallQRCode(shareUrl = shareUrl)
}
Column(
modifier = Modifier
.weight(1f)
.padding(24.dp)
.padding(StreamTokens.spacingXl)
.align(Alignment.CenterVertically),
horizontalAlignment = Alignment.CenterHorizontally,
) {
Text(
text = "Your meeting is live!",
modifier = Modifier.fillMaxWidth(),
textAlign = TextAlign.Center,
style = VideoTheme.typography.headingLarge.copy(fontSize = 20.sp),
style = VideoTheme.typography.headingLarge,
)
Spacer(modifier = Modifier.size(16.dp))
Spacer(modifier = Modifier.size(StreamTokens.spacingMd))
StreamTextButton(
modifier = Modifier
.fillMaxWidth()
.height(36.dp),
text = "Add others",
leadingIcon = rememberVectorPainter(Icons.Default.PersonAddAlt1),
leadingIcon = painterResource(ComposeR.drawable.stream_design_ic_user_add_fill),
style = StreamButtonStyleDefaults.primarySolid,
onClick = { onShare(call.id) },
)
Spacer(modifier = Modifier.size(16.dp))
Spacer(modifier = Modifier.size(StreamTokens.spacingMd))
StreamTextButton(
modifier = Modifier
.fillMaxWidth()
.height(36.dp),
text = "Call ID: ${call.id}",
leadingIcon = rememberVectorPainter(Icons.Default.CopyAll),
style = StreamButtonStyleDefaults.secondarySolid,
leadingIcon = painterResource(ComposeR.drawable.stream_design_ic_copy_fill),
style = StreamButtonStyleDefaults.secondaryOutline,
onClick = {
val clipData = ClipData.newPlainText("Call ID", call.id)
clipboardManager?.setPrimaryClip(clipData)
},
)
Spacer(modifier = Modifier.size(16.dp))
Spacer(modifier = Modifier.size(StreamTokens.spacingMd))
}
}
}
Expand All @@ -217,15 +215,16 @@ private fun JoinCallQRCode(shareUrl: String) {
Column(
modifier = Modifier
.fillMaxWidth()
.background(color = Color.Black, shape = RoundedCornerShape(16.dp))
.padding(16.dp),
.background(color = Color.Black, shape = RoundedCornerShape(StreamTokens.radiusXl))
.padding(StreamTokens.spacingMd),
horizontalAlignment = Alignment.CenterHorizontally,
) {
QRCode(content = shareUrl, size = 150.dp)
Spacer(modifier = Modifier.size(16.dp))
Spacer(modifier = Modifier.size(StreamTokens.spacingMd))
Text(
text = "Scan the QR code to join from another device",
style = VideoTheme.typography.metadataEmphasis.copy(fontWeight = FontWeight.W400),
color = Color.White,
)
}
}
Expand Down
6 changes: 0 additions & 6 deletions stream-video-android-ui-compose/api/stream-video-android-ui-compose.api
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1509,12 +1509,6 @@ public final class io/getstream/video/android/compose/ui/components/call/CallApp
public static final fun CallAppBar (Lio/getstream/video/android/core/Call;Landroidx/compose/ui/Modifier;Lkotlin/jvm/functions/Function0;Lkotlin/jvm/functions/Function1;Ljava/lang/String;Lkotlin/jvm/functions/Function3;Lkotlin/jvm/functions/Function3;Lkotlin/jvm/functions/Function3;Landroidx/compose/runtime/Composer;II)V
}

public final class io/getstream/video/android/compose/ui/components/call/ComposableSingletons$CallAppBarKt {
public static final field INSTANCE Lio/getstream/video/android/compose/ui/components/call/ComposableSingletons$CallAppBarKt;
public fun <init> ()V
public final fun getLambda$1693072896$stream_video_android_ui_compose_release ()Lkotlin/jvm/functions/Function2;
}

public final class io/getstream/video/android/compose/ui/components/call/activecall/AudioCallContentKt {
public static final fun AudioCallContent (Landroidx/compose/ui/Modifier;Lio/getstream/video/android/core/Call;ZLio/getstream/video/android/compose/permission/VideoPermissionsState;Lkotlin/jvm/functions/Function1;Ljava/lang/String;ZLkotlin/jvm/functions/Function3;Lkotlin/jvm/functions/Function5;Lkotlin/jvm/functions/Function3;Lkotlin/jvm/functions/Function0;Landroidx/compose/runtime/Composer;III)V
public static final fun AudioOnlyCallContent (Landroidx/compose/ui/Modifier;Lio/getstream/video/android/core/Call;ZLio/getstream/video/android/compose/permission/VideoPermissionsState;ZLkotlin/jvm/functions/Function3;Ljava/lang/String;Lkotlin/jvm/functions/Function5;Lkotlin/jvm/functions/Function3;Lkotlin/jvm/functions/Function1;Lkotlin/jvm/functions/Function0;Landroidx/compose/runtime/Composer;III)V
Expand Down
Loading
Loading