Implementing better fullscreen immersive mode without accompanist

src/app/build.gradle

@@ -66,6 +66,4 @@ dependencies {
     implementation("androidx.core:core-splashscreen:1.0.1")
 
     implementation 'com.github.racra:smooth-corner-rect-android-compose:v1.0.0'
-
-    implementation "com.google.accompanist:accompanist-systemuicontroller:$accompanist_version"
 }

src/app/src/main/java/fr/iut/alldev/allin/MainActivity.kt

@@ -1,24 +1,40 @@
 package fr.iut.alldev.allin
 
+import android.app.Activity
+import android.os.Build
 import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
-import com.google.accompanist.systemuicontroller.rememberSystemUiController
+import androidx.compose.runtime.SideEffect
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.toArgb
+import androidx.compose.ui.platform.LocalView
+import androidx.core.view.WindowCompat
+import androidx.core.view.WindowInsetsCompat
 import fr.iut.alldev.allin.ui.navigation.AllInNavHost
 import fr.iut.alldev.allin.ui.theme.AllInTheme
 
 class MainActivity : ComponentActivity() {
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
-        setContent {
-            val systemUiController = rememberSystemUiController()
 
+        setContent {
             AllInTheme{
+                val view = LocalView.current
+                if (!view.isInEditMode) {
+                    SideEffect {
+                        with((view.context as Activity)) {
+                            window.statusBarColor = Color.Transparent.toArgb()
+                            window.navigationBarColor = Color.Transparent.toArgb()
+                            WindowCompat.setDecorFitsSystemWindows(window, false)
 
-                systemUiController.setStatusBarColor(AllInTheme.colors.allIn_Dark)
+                            if (Build.VERSION.SDK_INT > 30) {
-                systemUiController.setNavigationBarColor(AllInTheme.themeColors.main_surface)
+                                window.insetsController?.hide(WindowInsetsCompat.Type.statusBars())
-                systemUiController.isNavigationBarVisible = false
+                                window.insetsController?.hide(WindowInsetsCompat.Type.navigationBars())
-                systemUiController.isStatusBarVisible = false
+                            }
+                        }
+                    }
+                }
 
                 AllInNavHost()
             }

src/app/src/main/java/fr/iut/alldev/allin/ext/Modifier.kt

@@ -1,7 +1,6 @@
 package fr.iut.alldev.allin.ext
 
 import android.graphics.BlurMaskFilter
-import android.graphics.Shader
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.drawBehind
@@ -61,19 +60,17 @@ fun Modifier.shadow(
 ) = then(
     drawBehind {
         drawIntoCanvas { canvas ->
-            val shader: Shader =
-                LinearGradientShader(
-                    Offset(0f, 0f),
-                    Offset(size.width, 0f),
-                    colors
-                )
             val paint = Paint()
             val frameworkPaint = paint.asFrameworkPaint()
             if (blurRadius != 0.dp) {
                 frameworkPaint.maskFilter =
                     BlurMaskFilter(blurRadius.toPx(), BlurMaskFilter.Blur.NORMAL)
             }
-            frameworkPaint.shader = shader
+            frameworkPaint.shader = LinearGradientShader(
+                Offset(0f, 0f),
+                Offset(size.width, 0f),
+                colors
+            )
             frameworkPaint.alpha = (255*alpha).toInt()
             val leftPixel = offsetX.toPx()
             val topPixel = offsetY.toPx()

src/app/src/main/java/fr/iut/alldev/allin/ui/bet/betScreen.kt

@@ -2,7 +2,6 @@ package fr.iut.alldev.allin.ui.bet
 
 import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.background
-import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.LazyRow
@@ -14,7 +13,6 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import fr.iut.alldev.allin.R
-import fr.iut.alldev.allin.ext.shadow
 import fr.iut.alldev.allin.ui.bet.components.BetScreenCard
 import fr.iut.alldev.allin.ui.bet.components.BetScreenPopularCard
 import fr.iut.alldev.allin.ui.core.AllInChip
@@ -30,29 +28,8 @@ fun BetScreen(){
         item {
             BetScreenPopularCard(
                 modifier = Modifier
-                    .fillMaxWidth()
+                    .padding(top = 13.dp, bottom = 10.dp)
-                    .padding(horizontal = horizontalPadding)
+                    .padding(horizontal = 13.dp),
-                    .padding(top = 23.dp, bottom = 10.dp)
-                    .let {
-                        if(isSystemInDarkTheme()){
-                            it.shadow(
-                                colors = listOf(
-                                    AllInTheme.colors.allIn_Pink,
-                                    AllInTheme.colors.allIn_Blue
-                                ),
-                                blurRadius = 10.dp,
-                                alpha = .5f,
-                                cornerRadius = 15.dp
-                            )
-                        }else{
-                            it.shadow(
-                                color = Color.Black,
-                                blurRadius = 10.dp,
-                                alpha = .3f,
-                                cornerRadius = 15.dp
-                            )
-                        }
-                    },
                 nbPlayers = 12,
                 points = 2.35f,
                 pointUnit = "k",

src/app/src/main/java/fr/iut/alldev/allin/ui/bet/components/betScreenPopularCard.kt

@@ -1,11 +1,13 @@
 package fr.iut.alldev.allin.ui.bet.components
 
+import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.layout.*
 import androidx.compose.material3.Icon
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.pluralStringResource
 import androidx.compose.ui.res.stringResource
@@ -15,6 +17,7 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import fr.iut.alldev.allin.R
+import fr.iut.alldev.allin.ext.shadow
 import fr.iut.alldev.allin.ui.core.AllInCard
 import fr.iut.alldev.allin.ui.core.HighlightedText
 import fr.iut.alldev.allin.ui.theme.AllInTheme
@@ -29,7 +32,26 @@ fun BetScreenPopularCard(
     modifier: Modifier = Modifier
 ) {
     AllInCard(
-        modifier = modifier,
+        modifier = modifier.let {
+            if(isSystemInDarkTheme()){
+                it.shadow(
+                    colors = listOf(
+                        AllInTheme.colors.allIn_Pink,
+                        AllInTheme.colors.allIn_Blue
+                    ),
+                    blurRadius = 10.dp,
+                    alpha = .5f,
+                    cornerRadius = 15.dp
+                )
+            }else{
+                it.shadow(
+                    color = Color.Black,
+                    blurRadius = 10.dp,
+                    alpha = .3f,
+                    cornerRadius = 15.dp
+                )
+            }
+        },
         backgroundColor = AllInTheme.colors.allIn_Dark,
         borderWidth = 2.dp,
         borderBrush = AllInTheme.colors.allIn_MainGradient

src/app/src/main/java/fr/iut/alldev/allin/ui/core/AllInChip.kt

@@ -2,14 +2,13 @@ package fr.iut.alldev.allin.ui.core
 
 import android.content.res.Configuration
 import androidx.compose.foundation.BorderStroke
-import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material3.Card
+import androidx.compose.material3.*
-import androidx.compose.material3.CardDefaults
-import androidx.compose.material3.ExperimentalMaterial3Api
-import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.alpha
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
@@ -28,23 +27,34 @@ fun AllInChip(
         shape = RoundedCornerShape(50),
         onClick = onClick,
         border = if(!isSelected) BorderStroke(1.dp, AllInTheme.themeColors.border) else null,
-        colors = CardDefaults.cardColors(containerColor = with(AllInTheme){
+        colors = CardDefaults.cardColors(
+            containerColor = with(AllInTheme){
                 if(isSelected) colors.allIn_Purple else themeColors.background
-        })
+            }
+        )
     ) {
+        Box{
             Text(
                 text = text,
-            modifier = Modifier.padding(vertical = 8.dp, horizontal = 22.dp),
+                modifier = Modifier
+                    .padding(vertical = 8.dp, horizontal = 22.dp)
+                    .alpha(if(isSelected) 0f else 1f),
                 textAlign = TextAlign.Center,
-            style = with(AllInTheme.typography) {
+                style = AllInTheme.typography.r,
-                if (isSelected) h1 else r
+                color = AllInTheme.themeColors.on_background_2
-            },
+            )
-            color = with(AllInTheme){
+            if(isSelected) {
-                if(isSelected) colors.white else themeColors.on_background_2
+                Text(
-            }
+                    text = text,
+                    modifier = modifier.align(Alignment.Center),
+                    textAlign = TextAlign.Center,
+                    style = AllInTheme.typography.h1,
+                    color = AllInTheme.colors.white
 
                 )
             }
+        }
+    }
 }
 
 @Preview

src/app/src/main/java/fr/iut/alldev/allin/ui/core/AllInTextField.kt

@@ -18,6 +18,7 @@ import androidx.compose.ui.text.input.KeyboardType
 import androidx.compose.ui.text.input.PasswordVisualTransformation
 import androidx.compose.ui.text.input.TextFieldValue
 import androidx.compose.ui.text.input.VisualTransformation
+import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.sp
 import fr.iut.alldev.allin.ui.theme.AllInTheme
@@ -74,7 +75,9 @@ fun AllInTextField(
                 text = placeholder,
                 fontSize = 18.sp,
                 style = AllInTheme.typography.r,
-                color = AllInTheme.colors.allIn_LightGrey300
+                color = AllInTheme.colors.allIn_LightGrey300,
+                maxLines = 1,
+                overflow = TextOverflow.Ellipsis
             )
         },
         trailingIcon = trailingContent ?: trailingIcon?.let{

src/app/src/main/java/fr/iut/alldev/allin/ui/core/topbar/topbar.kt

@@ -33,7 +33,7 @@ fun AllInTopBar(
         ) {
             Icon(
                 painterResource(id = R.drawable.allin_menu),
-                modifier = Modifier.size(32.dp),
+                modifier = Modifier.size(30.dp),
                 contentDescription = null,
                 tint = Color.White)
         }

src/app/src/main/java/fr/iut/alldev/allin/ui/login/loginScreen.kt

@@ -54,7 +54,7 @@ fun LoginScreen(
                 color = AllInTheme.themeColors.on_main_surface,
                 style = AllInTheme.typography.r,
                 textAlign = TextAlign.Center,
-                fontSize = 30.sp
+                fontSize = 23.sp
             )
             Spacer(modifier = Modifier.height(83.dp))
             Column(

src/app/src/main/java/fr/iut/alldev/allin/ui/navigation/drawer/drawer.kt

@@ -138,12 +138,12 @@ fun AllInDrawer(
         }
     ) {
         Scaffold(
-            modifier = Modifier.offset( x = contentOffset),
+            modifier = Modifier.offset( x = contentOffset ),
             topBar = { AllInTopBar(onMenuClicked = { scope.launch { drawerState.open() } }, coinAmount = 541) }// TODO: CoinAmount
         ) {
             Column(
                 modifier = Modifier
-                    .padding(it)
+                    .padding(top = it.calculateTopPadding())
                     .fillMaxSize()
                     .background(AllInTheme.themeColors.main_surface),
                 horizontalAlignment = Alignment.CenterHorizontally

src/app/src/main/java/fr/iut/alldev/allin/ui/register/registerScreen.kt

@@ -68,7 +68,7 @@ fun RegisterScreen(
                 color = AllInTheme.themeColors.on_main_surface,
                 style = AllInTheme.typography.r,
                 textAlign = TextAlign.Center,
-                fontSize = 30.sp
+                fontSize = 23.sp
             )
             Spacer(modifier = Modifier.height(83.dp))
             Column(
@@ -119,8 +119,7 @@ fun RegisterScreen(
             Spacer(modifier = Modifier.height(30.dp))
             Row(
                 horizontalArrangement = Arrangement.Center,
-                modifier = Modifier
+                modifier = Modifier.fillMaxWidth()
-                    .fillMaxWidth()
             ) {
                 Text(
                     text = stringResource(id = R.string.already_have_account),