From cc27fac24818e2d0dffa2b881a0f7605052d47bf Mon Sep 17 00:00:00 2001 From: Ash Nohe Date: Thu, 29 Aug 2024 15:42:20 -0700 Subject: [PATCH 1/3] Make the Adaptive Codelab edge-to-edge --- .../java/com/example/reply/ui/MainActivity.kt | 7 +++++++ .../com/example/reply/ui/ReplyListContent.kt | 20 ++++++++++++++----- .../java/com/example/reply/ui/theme/Theme.kt | 12 ----------- 3 files changed, 22 insertions(+), 17 deletions(-) diff --git a/AdaptiveUiCodelab/app/src/main/java/com/example/reply/ui/MainActivity.kt b/AdaptiveUiCodelab/app/src/main/java/com/example/reply/ui/MainActivity.kt index 6b706ffc1..cd0a5f5e9 100644 --- a/AdaptiveUiCodelab/app/src/main/java/com/example/reply/ui/MainActivity.kt +++ b/AdaptiveUiCodelab/app/src/main/java/com/example/reply/ui/MainActivity.kt @@ -16,9 +16,11 @@ package com.example.reply.ui +import android.os.Build import android.os.Bundle import androidx.activity.ComponentActivity import androidx.activity.compose.setContent +import androidx.activity.enableEdgeToEdge import androidx.activity.viewModels import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue @@ -34,6 +36,11 @@ class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) + enableEdgeToEdge() + if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) { + window.isNavigationBarContrastEnforced = false + } + setContent { ReplyTheme { val uiState by viewModel.uiState.collectAsStateWithLifecycle() diff --git a/AdaptiveUiCodelab/app/src/main/java/com/example/reply/ui/ReplyListContent.kt b/AdaptiveUiCodelab/app/src/main/java/com/example/reply/ui/ReplyListContent.kt index 32b5994c7..8b7e77b53 100644 --- a/AdaptiveUiCodelab/app/src/main/java/com/example/reply/ui/ReplyListContent.kt +++ b/AdaptiveUiCodelab/app/src/main/java/com/example/reply/ui/ReplyListContent.kt @@ -21,8 +21,12 @@ import androidx.compose.foundation.background import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.WindowInsets +import androidx.compose.foundation.layout.asPaddingValues import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.safeContent +import androidx.compose.foundation.layout.safeDrawing import androidx.compose.foundation.layout.size import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.foundation.lazy.items @@ -55,7 +59,10 @@ fun ReplyListPane( onEmailClick: (Email) -> Unit, modifier: Modifier = Modifier ) { - LazyColumn(modifier = modifier.fillMaxWidth()) { + LazyColumn( + modifier = modifier.fillMaxWidth(), + contentPadding = WindowInsets.safeDrawing.asPaddingValues() + ) { item { ReplySearchBar(modifier = Modifier.fillMaxWidth()) } @@ -73,7 +80,10 @@ fun ReplyDetailPane( email: Email, modifier: Modifier = Modifier ) { - LazyColumn(modifier = modifier.fillMaxWidth()) { + LazyColumn( + modifier = modifier.fillMaxWidth(), + contentPadding = WindowInsets.safeDrawing.asPaddingValues() + ) { item { ReplyEmailThreadItem(email) } @@ -156,13 +166,13 @@ fun ReplyEmailThreadItem( modifier: Modifier = Modifier ) { Card( - modifier = modifier.padding(horizontal = 16.dp, vertical = 4.dp), + modifier = modifier.padding(horizontal = 16.dp), colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.surface) ) { Column( modifier = Modifier .fillMaxWidth() - .padding(20.dp) + .padding(horizontal = 20.dp) ) { Row(modifier = Modifier.fillMaxWidth()) { ReplyProfileImage( @@ -264,7 +274,7 @@ fun ReplySearchBar(modifier: Modifier = Modifier) { Row( modifier = modifier .fillMaxWidth() - .padding(16.dp) + .padding(horizontal = 16.dp) .background(MaterialTheme.colorScheme.surface, CircleShape), verticalAlignment = Alignment.CenterVertically ) { diff --git a/AdaptiveUiCodelab/app/src/main/java/com/example/reply/ui/theme/Theme.kt b/AdaptiveUiCodelab/app/src/main/java/com/example/reply/ui/theme/Theme.kt index 958d25b97..268240713 100644 --- a/AdaptiveUiCodelab/app/src/main/java/com/example/reply/ui/theme/Theme.kt +++ b/AdaptiveUiCodelab/app/src/main/java/com/example/reply/ui/theme/Theme.kt @@ -16,7 +16,6 @@ package com.example.reply.ui.theme -import android.app.Activity import android.os.Build import androidx.compose.foundation.isSystemInDarkTheme import androidx.compose.material3.MaterialTheme @@ -25,11 +24,7 @@ import androidx.compose.material3.dynamicDarkColorScheme import androidx.compose.material3.dynamicLightColorScheme import androidx.compose.material3.lightColorScheme import androidx.compose.runtime.Composable -import androidx.compose.runtime.SideEffect -import androidx.compose.ui.graphics.toArgb import androidx.compose.ui.platform.LocalContext -import androidx.compose.ui.platform.LocalView -import androidx.core.view.ViewCompat // Material 3 color schemes private val replyDarkColorScheme = darkColorScheme( @@ -104,13 +99,6 @@ fun ReplyTheme( darkTheme -> replyDarkColorScheme else -> replyLightColorScheme } - val view = LocalView.current - if (!view.isInEditMode) { - SideEffect { - (view.context as Activity).window.statusBarColor = replyColorScheme.primary.toArgb() - ViewCompat.getWindowInsetsController(view)?.isAppearanceLightStatusBars = darkTheme - } - } MaterialTheme( colorScheme = replyColorScheme, From 3073372733f4ae5816bc0d3eb8ecfba397fde0c0 Mon Sep 17 00:00:00 2001 From: Ash Nohe Date: Thu, 29 Aug 2024 16:25:32 -0700 Subject: [PATCH 2/3] remove excess padding at bottom of last list item due to handling task bar inset --- .../com/example/reply/ui/ReplyListContent.kt | 25 ++++++++++++++++++- 1 file changed, 24 insertions(+), 1 deletion(-) diff --git a/AdaptiveUiCodelab/app/src/main/java/com/example/reply/ui/ReplyListContent.kt b/AdaptiveUiCodelab/app/src/main/java/com/example/reply/ui/ReplyListContent.kt index 8b7e77b53..14bcb3b2e 100644 --- a/AdaptiveUiCodelab/app/src/main/java/com/example/reply/ui/ReplyListContent.kt +++ b/AdaptiveUiCodelab/app/src/main/java/com/example/reply/ui/ReplyListContent.kt @@ -20,12 +20,14 @@ import androidx.compose.foundation.Image import androidx.compose.foundation.background import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.WindowInsets import androidx.compose.foundation.layout.asPaddingValues +import androidx.compose.foundation.layout.calculateEndPadding +import androidx.compose.foundation.layout.calculateStartPadding import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding -import androidx.compose.foundation.layout.safeContent import androidx.compose.foundation.layout.safeDrawing import androidx.compose.foundation.layout.size import androidx.compose.foundation.lazy.LazyColumn @@ -46,9 +48,13 @@ import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip +import androidx.compose.ui.layout.Layout +import androidx.compose.ui.platform.LocalLayoutDirection import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.stringResource import androidx.compose.ui.text.style.TextOverflow +import androidx.compose.ui.unit.Dp +import androidx.compose.ui.unit.LayoutDirection import androidx.compose.ui.unit.dp import com.example.reply.R import com.example.reply.data.Email @@ -59,9 +65,12 @@ fun ReplyListPane( onEmailClick: (Email) -> Unit, modifier: Modifier = Modifier ) { + val layoutDirection = LocalLayoutDirection.current + LazyColumn( modifier = modifier.fillMaxWidth(), contentPadding = WindowInsets.safeDrawing.asPaddingValues() + .copy(layoutDirection, bottom = 0.dp) ) { item { ReplySearchBar(modifier = Modifier.fillMaxWidth()) @@ -301,3 +310,17 @@ fun ReplySearchBar(modifier: Modifier = Modifier) { ) } } + +private fun PaddingValues.copy( + layoutDirection: LayoutDirection, + start: Dp? = null, + top: Dp? = null, + end: Dp? = null, + bottom: Dp? = null, +) = PaddingValues( + start = start ?: calculateStartPadding(layoutDirection), + top = top ?: calculateTopPadding(), + end = end ?: calculateEndPadding(layoutDirection), + bottom = bottom ?: calculateBottomPadding(), +) + From 51cccf147a8bd1c479b179f40408fb592004288f Mon Sep 17 00:00:00 2001 From: Ash Nohe Date: Thu, 29 Aug 2024 16:37:41 -0700 Subject: [PATCH 3/3] ensure that the last list item in ReplyDetailPane does not have too much padding --- .../src/main/java/com/example/reply/ui/ReplyListContent.kt | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/AdaptiveUiCodelab/app/src/main/java/com/example/reply/ui/ReplyListContent.kt b/AdaptiveUiCodelab/app/src/main/java/com/example/reply/ui/ReplyListContent.kt index 14bcb3b2e..8039c2865 100644 --- a/AdaptiveUiCodelab/app/src/main/java/com/example/reply/ui/ReplyListContent.kt +++ b/AdaptiveUiCodelab/app/src/main/java/com/example/reply/ui/ReplyListContent.kt @@ -89,9 +89,14 @@ fun ReplyDetailPane( email: Email, modifier: Modifier = Modifier ) { + + val layoutDirection = LocalLayoutDirection.current + LazyColumn( modifier = modifier.fillMaxWidth(), contentPadding = WindowInsets.safeDrawing.asPaddingValues() + .copy(layoutDirection = layoutDirection, bottom = 0.dp) + ) { item { ReplyEmailThreadItem(email)