Rosetta/mobile-android
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Center text alignment in CollapsingProfileHeader for consistent layout

Browse Source
This commit is contained in:
k1ngsterr1
2026-01-22 18:23:11 +05:00
parent 5cd6968b06
commit 8bf0f4a318
1 changed files with 10 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
app/src/main/java/com/rosetta/messenger/ui/settings/ProfileScreen.kt
View File

@@ -449,11 +449,9 @@ private fun CollapsingProfileHeader(
val avatarFontSize = androidx.compose.ui.unit.lerp(40.sp, 0.sp, collapseProgress) val avatarFontSize = androidx.compose.ui.unit.lerp(40.sp, 0.sp, collapseProgress)
// ═══════════════════════════════════════════════════════════ // ═══════════════════════════════════════════════════════════
// 📝 TEXT - moves from center to left corner // 📝 TEXT - always centered
// ═══════════════════════════════════════════════════════════ // ═══════════════════════════════════════════════════════════
val textExpandedX = screenWidthDp / 2 val textX = screenWidthDp / 2 // Always center
val textCollapsedX = 48.dp + 12.dp // After back button + gap (left aligned)
val textX = androidx.compose.ui.unit.lerp(textExpandedX, textCollapsedX, collapseProgress)
val textExpandedY = statusBarHeight + 32.dp + AVATAR_SIZE_EXPANDED + 48.dp val textExpandedY = statusBarHeight + 32.dp + AVATAR_SIZE_EXPANDED + 48.dp
val textCollapsedY = statusBarHeight + COLLAPSED_HEADER_HEIGHT / 2 val textCollapsedY = statusBarHeight + COLLAPSED_HEADER_HEIGHT / 2
@@ -463,9 +461,6 @@ private fun CollapsingProfileHeader(
val nameFontSize = androidx.compose.ui.unit.lerp(24.sp, 18.sp, collapseProgress) val nameFontSize = androidx.compose.ui.unit.lerp(24.sp, 18.sp, collapseProgress)
val onlineFontSize = androidx.compose.ui.unit.lerp(14.sp, 13.sp, collapseProgress) val onlineFontSize = androidx.compose.ui.unit.lerp(14.sp, 13.sp, collapseProgress)
// Text alignment interpolation (0 = center, 1 = left)
val textCenterOffset = androidx.compose.ui.unit.lerp(80.dp, 0.dp, collapseProgress)
Box( Box(
modifier = Modifier modifier = Modifier
.fillMaxWidth() .fillMaxWidth()
@@ -562,18 +557,19 @@ private fun CollapsingProfileHeader(
} }
// ═══════════════════════════════════════════════════════════ // ═══════════════════════════════════════════════════════════
// 📝 TEXT BLOCK - Name + Online, moves to corner, left-aligned when collapsed // 📝 TEXT BLOCK - Name + Online, always centered
// ═══════════════════════════════════════════════════════════ // ═══════════════════════════════════════════════════════════
Column( Column(
modifier = Modifier modifier = Modifier
.offset(x = textX - textCenterOffset, y = textY) .align(Alignment.TopCenter)
.offset(y = textY)
.graphicsLayer { .graphicsLayer {
val centerOffsetY = with(density) { val centerOffsetY = with(density) {
androidx.compose.ui.unit.lerp(24.dp, 18.dp, collapseProgress).toPx() androidx.compose.ui.unit.lerp(24.dp, 18.dp, collapseProgress).toPx()
} }
translationY = -centerOffsetY translationY = -centerOffsetY
}, },
horizontalAlignment = Alignment.Start horizontalAlignment = Alignment.CenterHorizontally
) { ) {
Text( Text(
text = name, text = name,
@@ -582,18 +578,17 @@ private fun CollapsingProfileHeader(
color = Color.White, color = Color.White,
maxLines = 1, maxLines = 1,
overflow = TextOverflow.Ellipsis, overflow = TextOverflow.Ellipsis,
modifier = Modifier.widthIn(max = 220.dp) modifier = Modifier.widthIn(max = 220.dp),
textAlign = TextAlign.Center
) )
Spacer(modifier = Modifier.height(2.dp)) Spacer(modifier = Modifier.height(2.dp))
// Online text - centered in expanded, left in collapsed // Online text - always centered
val onlineCenterOffset = androidx.compose.ui.unit.lerp(65.dp, 0.dp, collapseProgress)
Text( Text(
text = "online", text = "online",
fontSize = onlineFontSize, fontSize = onlineFontSize,
color = Color(0xFF4CAF50), color = Color(0xFF4CAF50)
modifier = Modifier.offset(x = onlineCenterOffset)
) )
} }