Implementing better fullscreen immersive mode without accompanist

1 year ago · 7ccef99118
parent bba2e73aa7
commit 7ccef99118
11 changed files with 92 additions and 70 deletions
--- a/src/app/build.gradle
+++ b/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"
 }
--- a/src/app/src/main/java/fr/iut/alldev/allin/MainActivity.kt
+++ b/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)
-                systemUiController.setNavigationBarColor(AllInTheme.themeColors.main_surface)
-                systemUiController.isNavigationBarVisible = false
-                systemUiController.isStatusBarVisible = false
+                            if (Build.VERSION.SDK_INT > 30) {
+                                window.insetsController?.hide(WindowInsetsCompat.Type.statusBars())
+                                window.insetsController?.hide(WindowInsetsCompat.Type.navigationBars())
+                            }
+                        }
+                    }
+                }

                AllInNavHost()
            }
--- a/src/app/src/main/java/fr/iut/alldev/allin/ext/Modifier.kt
+++ b/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()
--- a/src/app/src/main/java/fr/iut/alldev/allin/ui/bet/betScreen.kt
+++ b/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(horizontal = horizontalPadding)
-                    .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
-                            )
-                        }
-                    },
+                    .padding(top = 13.dp, bottom = 10.dp)
+                    .padding(horizontal = 13.dp),
                nbPlayers = 12,
                points = 2.35f,
                pointUnit = "k",
--- a/src/app/src/main/java/fr/iut/alldev/allin/ui/bet/components/betScreenPopularCard.kt
+++ b/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
--- a/src/app/src/main/java/fr/iut/alldev/allin/ui/core/AllInChip.kt
+++ b/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.CardDefaults
-import androidx.compose.material3.ExperimentalMaterial3Api
-import androidx.compose.material3.Text
+import androidx.compose.material3.*
 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) {
-                if (isSelected) h1 else r
-            },
-            color = with(AllInTheme){
-                if(isSelected) colors.white else themeColors.on_background_2
-            }
+                style = AllInTheme.typography.r,
+                color = AllInTheme.themeColors.on_background_2
+            )
+            if(isSelected) {
+                Text(
+                    text = text,
+                    modifier = modifier.align(Alignment.Center),
+                    textAlign = TextAlign.Center,
+                    style = AllInTheme.typography.h1,
+                    color = AllInTheme.colors.white

                )
            }
+        }
+    }
 }

@Preview
--- a/src/app/src/main/java/fr/iut/alldev/allin/ui/core/AllInTextField.kt
+++ b/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{
--- a/src/app/src/main/java/fr/iut/alldev/allin/ui/core/topbar/topbar.kt
+++ b/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)
        }
--- a/src/app/src/main/java/fr/iut/alldev/allin/ui/login/loginScreen.kt
+++ b/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(
--- a/src/app/src/main/java/fr/iut/alldev/allin/ui/navigation/drawer/drawer.kt
+++ b/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
--- a/src/app/src/main/java/fr/iut/alldev/allin/ui/register/registerScreen.kt
+++ b/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
-                    .fillMaxWidth()
+                modifier = Modifier.fillMaxWidth()
            ) {
                Text(
                    text = stringResource(id = R.string.already_have_account),