Update to support edge to edge

Author: shorthouse

app/build.gradle.kts

@@ -11,14 +11,14 @@ plugins {
 
 android {
     namespace = "dev.shorthouse.coinwatch"
-    compileSdk = 34
+    compileSdk = 36
 
     defaultConfig {
         applicationId = "dev.shorthouse.coinwatch"
         minSdk = 26
-        targetSdk = 34
-        versionCode = 25
-        versionName = "1.3.0"
+        targetSdk = 35
+        versionCode = 26
+        versionName = "1.4.0"
         ndk {
             debugSymbolLevel = "FULL"
         }
@@ -81,7 +81,6 @@ dependencies {
     implementation(libs.androidx.compose.material3)
     implementation(libs.androidx.compose.material.icons.extended)
     implementation(libs.androidx.lifecycle.runtime.compose)
-    implementation(libs.accompanist.systemuicontroller)
     implementation(libs.androidx.ui.tooling.preview.android)
     implementation(libs.androidx.navigation.compose)
     lintChecks(libs.compose.lint.checks)

app/src/androidTest/java/dev/shorthouse/coinwatch/ui/screen/DetailsScreenTest.kt

@@ -342,12 +342,19 @@ class DetailsScreenTest {
 
         composeTestRule.apply {
             onNodeWithText("1H").performClick()
+            waitForIdle()
             onNodeWithText("1D").performClick()
+            waitForIdle()
             onNodeWithText("1W").performClick()
+            waitForIdle()
             onNodeWithText("1M").performClick()
+            waitForIdle()
             onNodeWithText("3M").performClick()
+            waitForIdle()
             onNodeWithText("1Y").performClick()
+            waitForIdle()
             onNodeWithText("5Y").performClick()
+            waitForIdle()
         }
 
         onClickChartPeriodMap.values.forEach { isChartPeriodClicked ->

app/src/main/java/dev/shorthouse/coinwatch/MainActivity.kt

@@ -1,8 +1,11 @@
 package dev.shorthouse.coinwatch
 
+import android.graphics.Color
 import android.os.Bundle
 import androidx.activity.ComponentActivity
+import androidx.activity.SystemBarStyle
 import androidx.activity.compose.setContent
+import androidx.activity.enableEdgeToEdge
 import androidx.compose.runtime.getValue
 import androidx.core.splashscreen.SplashScreen.Companion.installSplashScreen
 import androidx.hilt.navigation.compose.hiltViewModel
@@ -11,17 +14,28 @@ import androidx.navigation.compose.rememberNavController
 import dagger.hilt.android.AndroidEntryPoint
 import dev.shorthouse.coinwatch.navigation.AppNavHost
 import dev.shorthouse.coinwatch.ui.theme.AppTheme
+import dev.shorthouse.coinwatch.ui.theme.DefaultDarkScrim
 
 @AndroidEntryPoint
 class MainActivity : ComponentActivity() {
     override fun onCreate(savedInstanceState: Bundle?) {
         installSplashScreen()
 
         super.onCreate(savedInstanceState)
+
+        enableEdgeToEdge(
+            statusBarStyle = SystemBarStyle.dark(
+                scrim = Color.TRANSPARENT,
+            ),
+            navigationBarStyle = SystemBarStyle.dark(
+                scrim = DefaultDarkScrim,
+            )
+        )
+
         setContent {
             val navController = rememberNavController()
 
-            AppTheme(navController = navController) {
+            AppTheme {
                 val viewModel: MainActivityViewModel = hiltViewModel()
                 val uiState by viewModel.uiState.collectAsStateWithLifecycle()
 

app/src/main/java/dev/shorthouse/coinwatch/navigation/NavigationBarScaffold.kt

@@ -3,7 +3,13 @@ package dev.shorthouse.coinwatch.navigation
 import androidx.compose.animation.EnterTransition
 import androidx.compose.animation.ExitTransition
 import androidx.compose.foundation.layout.RowScope
+import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.WindowInsetsSides
+import androidx.compose.foundation.layout.displayCutout
+import androidx.compose.foundation.layout.navigationBars
+import androidx.compose.foundation.layout.only
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.windowInsetsPadding
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.rounded.BarChart
 import androidx.compose.material.icons.rounded.Favorite
@@ -40,7 +46,7 @@ fun NavigationBarScaffold(
     startScreen: NavigationBarScreen,
     onNavigateDetails: (String) -> Unit,
     onNavigateSettings: () -> Unit,
-    modifier: Modifier = Modifier
+    modifier: Modifier = Modifier,
 ) {
     val navController = rememberNavController()
 
@@ -74,6 +80,7 @@ fun NavigationBarScaffold(
                 }
             }
         },
+        contentWindowInsets = WindowInsets(top = 0.dp, bottom = 0.dp),
         content = { scaffoldPadding ->
             NavigationBarNavHost(
                 navController = navController,
@@ -84,6 +91,8 @@ fun NavigationBarScaffold(
             )
         },
         modifier = modifier
+            .windowInsetsPadding(WindowInsets.displayCutout)
+            .windowInsetsPadding(WindowInsets.navigationBars.only(WindowInsetsSides.Horizontal))
     )
 }
 
@@ -93,7 +102,7 @@ private fun NavigationBarNavHost(
     startScreen: NavigationBarScreen,
     onNavigateDetails: (String) -> Unit,
     onNavigateSettings: () -> Unit,
-    modifier: Modifier = Modifier
+    modifier: Modifier = Modifier,
 ) {
     NavHost(
         navController = navController,
@@ -122,7 +131,7 @@ private fun RowScope.AddNavigationBarItem(
     screen: NavigationBarScreen,
     currentDestination: NavDestination?,
     navController: NavHostController,
-    modifier: Modifier = Modifier
+    modifier: Modifier = Modifier,
 ) {
     val selected = currentDestination?.hierarchy?.any { destination ->
         destination.route == screen.route

app/src/main/java/dev/shorthouse/coinwatch/ui/component/AppBottomSheet.kt

@@ -4,6 +4,7 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.navigationBarsPadding
@@ -36,7 +37,7 @@ fun AppBottomSheet(
     onDismissRequest: () -> Unit,
     sheetState: SheetState,
     modifier: Modifier = Modifier,
-    content: @Composable () -> Unit
+    content: @Composable () -> Unit,
 ) {
     ModalBottomSheet(
         onDismissRequest = onDismissRequest,
@@ -45,11 +46,12 @@ fun AppBottomSheet(
         contentColor = MaterialTheme.colorScheme.onSurface,
         tonalElevation = 0.dp,
         sheetState = sheetState,
+        windowInsets = WindowInsets(bottom = 0.dp),
         modifier = modifier
     ) {
         Column(
             modifier = Modifier
-                .padding(top = 20.dp, start = 20.dp, end = 20.dp)
+                .padding(20.dp)
                 .navigationBarsPadding()
                 .fillMaxWidth()
         ) {
@@ -71,7 +73,7 @@ fun BottomSheetOption(
     label: String,
     isSelected: Boolean,
     onSelected: () -> Unit,
-    modifier: Modifier = Modifier
+    modifier: Modifier = Modifier,
 ) {
     val optionBackgroundColor = if (isSelected) {
         MaterialTheme.colorScheme.primaryContainer

app/src/main/java/dev/shorthouse/coinwatch/ui/screen/details/DetailsScreen.kt

@@ -3,10 +3,13 @@ package dev.shorthouse.coinwatch.ui.screen.details
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.displayCutout
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.windowInsetsPadding
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.icons.Icons
@@ -55,7 +58,7 @@ import dev.shorthouse.coinwatch.ui.theme.AppTheme
 @Composable
 fun DetailsScreen(
     viewModel: DetailsViewModel = hiltViewModel(),
-    onNavigateUp: () -> Unit
+    onNavigateUp: () -> Unit,
 ) {
     val uiState by viewModel.uiState.collectAsStateWithLifecycle()
 
@@ -76,7 +79,7 @@ fun DetailsScreen(
     onNavigateUp: () -> Unit,
     onClickFavouriteCoin: () -> Unit,
     onClickChartPeriod: (ChartPeriod) -> Unit,
-    modifier: Modifier = Modifier
+    modifier: Modifier = Modifier,
 ) {
     val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior()
 
@@ -100,7 +103,9 @@ fun DetailsScreen(
                 }
             }
         },
-        modifier = modifier.nestedScroll(scrollBehavior.nestedScrollConnection)
+        modifier = modifier
+            .nestedScroll(scrollBehavior.nestedScrollConnection)
+            .windowInsetsPadding(WindowInsets.displayCutout)
     ) { scaffoldPadding ->
         when (uiState) {
             is DetailsUiState.Success -> {
@@ -135,7 +140,7 @@ fun DetailsTopBar(
     onNavigateUp: () -> Unit,
     onClickFavouriteCoin: () -> Unit,
     scrollBehavior: TopAppBarScrollBehavior,
-    modifier: Modifier = Modifier
+    modifier: Modifier = Modifier,
 ) {
     val context = LocalContext.current
 
@@ -211,7 +216,7 @@ fun DetailsContent(
     coinChart: CoinChart,
     chartPeriod: ChartPeriod,
     onClickChartPeriod: (ChartPeriod) -> Unit,
-    modifier: Modifier = Modifier
+    modifier: Modifier = Modifier,
 ) {
     Column(
         modifier = modifier
@@ -259,7 +264,7 @@ fun DetailsContent(
 @Composable
 @Preview
 private fun DetailsScreenPreview(
-    @PreviewParameter(DetailsUiStatePreviewProvider::class) uiState: DetailsUiState
+    @PreviewParameter(DetailsUiStatePreviewProvider::class) uiState: DetailsUiState,
 ) {
     AppTheme {
         DetailsScreen(

app/src/main/java/dev/shorthouse/coinwatch/ui/screen/favourites/FavouritesScreen.kt

@@ -10,9 +10,9 @@ import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.offset
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.LazyListState
@@ -56,8 +56,8 @@ import androidx.compose.ui.unit.dp
 import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import dev.shorthouse.coinwatch.R
-import dev.shorthouse.coinwatch.data.source.local.preferences.common.CoinSort
 import dev.shorthouse.coinwatch.data.source.local.database.model.FavouriteCoin
+import dev.shorthouse.coinwatch.data.source.local.preferences.common.CoinSort
 import dev.shorthouse.coinwatch.ui.component.CoinSortChip
 import dev.shorthouse.coinwatch.ui.component.LoadingIndicator
 import dev.shorthouse.coinwatch.ui.component.ScrollToTopFab
@@ -75,7 +75,7 @@ import kotlinx.coroutines.launch
 @Composable
 fun FavouritesScreen(
     viewModel: FavouritesViewModel = hiltViewModel(),
-    onNavigateDetails: (String) -> Unit
+    onNavigateDetails: (String) -> Unit,
 ) {
     val uiState by viewModel.uiState.collectAsStateWithLifecycle()
 
@@ -163,6 +163,7 @@ fun FavouriteScreen(
                 )
             }
         },
+        contentWindowInsets = WindowInsets(top = 0.dp, bottom = 0.dp),
         modifier = modifier
             .fillMaxSize()
             .nestedScroll(scrollBehavior.nestedScrollConnection)
@@ -217,7 +218,7 @@ fun FavouritesTopBar(
     isFavouritesListEmpty: Boolean,
     isLoading: Boolean,
     scrollBehavior: TopAppBarScrollBehavior,
-    modifier: Modifier = Modifier
+    modifier: Modifier = Modifier,
 ) {
     TopAppBar(
         title = {
@@ -265,7 +266,7 @@ fun FavouritesContent(
     onUpdateCoinSort: (CoinSort) -> Unit,
     gridState: LazyGridState,
     listState: LazyListState,
-    modifier: Modifier = Modifier
+    modifier: Modifier = Modifier,
 ) {
     CompositionLocalProvider(LocalOverscrollConfiguration provides null) {
         when {
@@ -305,26 +306,22 @@ fun FavouritesGrid(
     coinSort: CoinSort,
     onUpdateCoinSort: (CoinSort) -> Unit,
     gridState: LazyGridState,
-    modifier: Modifier = Modifier
+    modifier: Modifier = Modifier,
 ) {
     LazyVerticalGrid(
         state = gridState,
         columns = GridCells.Adaptive(minSize = 140.dp),
         horizontalArrangement = Arrangement.spacedBy(16.dp),
         verticalArrangement = Arrangement.spacedBy(16.dp),
         contentPadding = PaddingValues(start = 12.dp, end = 12.dp, bottom = 80.dp),
-        modifier = modifier
-            .fillMaxHeight()
-            .offset(y = (-8).dp)
+        modifier = modifier.fillMaxHeight()
     ) {
         item(
             span = { GridItemSpan(maxLineSpan) },
         ) {
             Row(
                 horizontalArrangement = Arrangement.spacedBy(8.dp),
-                modifier = Modifier
-                    .horizontalScroll(rememberScrollState())
-                    .offset(y = 8.dp)
+                modifier = Modifier.horizontalScroll(rememberScrollState())
             ) {
                 CoinSort.entries.forEach { coinSortEntry ->
                     CoinSortChip(
@@ -357,7 +354,7 @@ fun FavouritesList(
     coinSort: CoinSort,
     onUpdateCoinSort: (CoinSort) -> Unit,
     listState: LazyListState,
-    modifier: Modifier = Modifier
+    modifier: Modifier = Modifier,
 ) {
     LazyColumn(
         state = listState,
@@ -415,7 +412,7 @@ fun FavouritesList(
 @Composable
 @Preview(showBackground = true)
 private fun FavouritesScreenPreview(
-    @PreviewParameter(FavouritesUiStatePreviewProvider::class) uiState: FavouritesUiState
+    @PreviewParameter(FavouritesUiStatePreviewProvider::class) uiState: FavouritesUiState,
 ) {
     AppTheme {
         FavouriteScreen(