android: align top bar offsets across main pages
This commit is contained in:
@@ -499,3 +499,9 @@
|
||||
- Added top app bars for all 4 main pages (`Chats`, `Contacts`, `Settings`, `Profile`) to make them feel like proper standalone sections.
|
||||
- Moved chats management toggle action into chats app bar.
|
||||
- Kept safe-area handling and bottom insets consistent with shared floating tabs bar to avoid overlap.
|
||||
|
||||
### Step 80 - Top bar offset consistency fix
|
||||
- Unified top bar alignment across `Chats`, `Contacts`, `Settings`, and `Profile`:
|
||||
- removed extra outer paddings that shifted headers down/right on some pages,
|
||||
- separated content padding from top app bar container.
|
||||
- Result: consistent title baseline and horizontal alignment between main pages.
|
||||
|
||||
@@ -87,35 +87,42 @@ private fun ContactsScreen(
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.then(if (isTabletLayout) Modifier.widthIn(max = 820.dp) else Modifier)
|
||||
.padding(start = 16.dp, top = 16.dp, end = 16.dp, bottom = 96.dp),
|
||||
.padding(bottom = 96.dp),
|
||||
verticalArrangement = Arrangement.spacedBy(12.dp),
|
||||
) {
|
||||
TopAppBar(
|
||||
title = { Text("Contacts") },
|
||||
)
|
||||
OutlinedTextField(
|
||||
value = query,
|
||||
onValueChange = { query = it },
|
||||
modifier = Modifier.fillMaxWidth(),
|
||||
singleLine = true,
|
||||
label = { Text("Search contacts") },
|
||||
)
|
||||
LazyColumn(
|
||||
modifier = Modifier.fillMaxSize(),
|
||||
state = listState,
|
||||
verticalArrangement = Arrangement.spacedBy(10.dp),
|
||||
Column(
|
||||
modifier = Modifier
|
||||
.fillMaxSize()
|
||||
.padding(horizontal = 16.dp),
|
||||
verticalArrangement = Arrangement.spacedBy(12.dp),
|
||||
) {
|
||||
items(filtered) { name ->
|
||||
Column(
|
||||
modifier = Modifier.fillMaxWidth(),
|
||||
verticalArrangement = Arrangement.spacedBy(2.dp),
|
||||
) {
|
||||
Text(text = name, fontWeight = FontWeight.SemiBold)
|
||||
Text(
|
||||
text = "last seen recently",
|
||||
style = MaterialTheme.typography.bodySmall,
|
||||
color = MaterialTheme.colorScheme.onSurfaceVariant,
|
||||
)
|
||||
OutlinedTextField(
|
||||
value = query,
|
||||
onValueChange = { query = it },
|
||||
modifier = Modifier.fillMaxWidth(),
|
||||
singleLine = true,
|
||||
label = { Text("Search contacts") },
|
||||
)
|
||||
LazyColumn(
|
||||
modifier = Modifier.fillMaxSize(),
|
||||
state = listState,
|
||||
verticalArrangement = Arrangement.spacedBy(10.dp),
|
||||
) {
|
||||
items(filtered) { name ->
|
||||
Column(
|
||||
modifier = Modifier.fillMaxWidth(),
|
||||
verticalArrangement = Arrangement.spacedBy(2.dp),
|
||||
) {
|
||||
Text(text = name, fontWeight = FontWeight.SemiBold)
|
||||
Text(
|
||||
text = "last seen recently",
|
||||
style = MaterialTheme.typography.bodySmall,
|
||||
color = MaterialTheme.colorScheme.onSurfaceVariant,
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -127,13 +127,19 @@ fun ProfileScreen(
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.then(if (isTabletLayout) Modifier.widthIn(max = 720.dp) else Modifier)
|
||||
.verticalScroll(scrollState)
|
||||
.padding(start = 16.dp, top = 16.dp, end = 16.dp, bottom = 96.dp),
|
||||
.padding(bottom = 96.dp),
|
||||
verticalArrangement = Arrangement.spacedBy(12.dp),
|
||||
) {
|
||||
TopAppBar(
|
||||
title = { Text("Profile") },
|
||||
)
|
||||
Column(
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.verticalScroll(scrollState)
|
||||
.padding(start = 16.dp, end = 16.dp, bottom = 16.dp),
|
||||
verticalArrangement = Arrangement.spacedBy(12.dp),
|
||||
) {
|
||||
if (!avatarUrl.isBlank()) {
|
||||
Box(
|
||||
modifier = Modifier.fillMaxWidth(),
|
||||
@@ -230,6 +236,7 @@ fun ProfileScreen(
|
||||
Text("Back to chats")
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -107,13 +107,19 @@ fun SettingsScreen(
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.then(if (isTabletLayout) Modifier.widthIn(max = 720.dp) else Modifier)
|
||||
.verticalScroll(scrollState)
|
||||
.padding(start = 16.dp, top = 16.dp, end = 16.dp, bottom = 96.dp),
|
||||
.padding(bottom = 96.dp),
|
||||
verticalArrangement = Arrangement.spacedBy(12.dp),
|
||||
) {
|
||||
TopAppBar(
|
||||
title = { Text("Settings") },
|
||||
)
|
||||
TopAppBar(
|
||||
title = { Text("Settings") },
|
||||
)
|
||||
Column(
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.verticalScroll(scrollState)
|
||||
.padding(start = 16.dp, end = 16.dp, bottom = 16.dp),
|
||||
verticalArrangement = Arrangement.spacedBy(12.dp),
|
||||
) {
|
||||
Text("Appearance", style = MaterialTheme.typography.titleMedium)
|
||||
Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
|
||||
OutlinedButton(
|
||||
@@ -340,6 +346,7 @@ fun SettingsScreen(
|
||||
Text("Back to chats")
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user