Updated to material 3, layout is now a proper scaffold, navigationbar added

2022-11-06 12:01:10 +01:00
parent c5cb18abb4
commit ec4fcc0ec2
15 changed files with 158 additions and 140 deletions
--- a/app/build.gradle
+++ b/app/build.gradle
@@ -47,25 +47,34 @@ android {
 }

 dependencies {
+    //Network
    implementation 'com.squareup.retrofit2:retrofit:2.9.0'
    implementation 'com.google.code.gson:gson:2.9.0'
    implementation 'com.squareup.retrofit2:converter-gson:2.9.0'
-    implementation("io.coil-kt:coil-compose:2.2.2")
-    implementation("androidx.room:room-runtime:2.4.3")
+
+    // Display images from the internet
+    implementation "io.coil-kt:coil-compose:2.2.2"
+
+    // Database
+    implementation "androidx.room:room-runtime:2.4.3"
    annotationProcessor("androidx.room:room-compiler:2.4.3")

+    // Navigation
+    implementation "androidx.navigation:navigation-compose:2.5.3"
+
+    // ViewModel
    implementation "androidx.lifecycle:lifecycle-viewmodel-compose:1.0.0-alpha07"

-    implementation 'androidx.core:core-ktx:1.8.0'
-    implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.4.1'
-    implementation 'androidx.activity:activity-compose:1.5.1'
-    implementation "androidx.compose.ui:ui:$compose_ui_version"
-    implementation "androidx.compose.ui:ui-tooling-preview:$compose_ui_version"
-    implementation "androidx.compose.material:material:$compose_ui_version"
+    implementation 'androidx.core:core-ktx:1.7.0'
+    implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.3.1'
+    implementation 'androidx.activity:activity-compose:1.3.1'
+    implementation "androidx.compose.ui:ui:$compose_version"
+    implementation "androidx.compose.ui:ui-tooling-preview:$compose_version"
+    implementation 'androidx.compose.material3:material3:1.0.0-alpha02'
    testImplementation 'junit:junit:4.13.2'
    androidTestImplementation 'androidx.test.ext:junit:1.1.3'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.4.0'
-    androidTestImplementation "androidx.compose.ui:ui-test-junit4:$compose_ui_version"
-    debugImplementation "androidx.compose.ui:ui-tooling:$compose_ui_version"
-    debugImplementation "androidx.compose.ui:ui-test-manifest:$compose_ui_version"
+    androidTestImplementation "androidx.compose.ui:ui-test-junit4:$compose_version"
+    debugImplementation "androidx.compose.ui:ui-tooling:$compose_version"
+    debugImplementation "androidx.compose.ui:ui-test-manifest:$compose_version"
 }
--- a/app/src/main/AndroidManifest.xml
+++ b/app/src/main/AndroidManifest.xml
@@ -18,7 +18,6 @@
        <activity
            android:name=".MainActivity"
            android:exported="true"
-            android:label="@string/app_name"
            android:theme="@style/Theme.Thuis">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
--- a/app/src/main/java/com/mitchelbv/thuis_c/MainActivity.kt
+++ b/app/src/main/java/com/mitchelbv/thuis_c/MainActivity.kt
@@ -1,16 +1,30 @@
 package com.mitchelbv.thuis_c

-import android.annotation.SuppressLint
 import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
+import androidx.annotation.StringRes
 import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.material.*
+import androidx.compose.foundation.layout.padding
 import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.Favorite
-import androidx.compose.runtime.*
+import androidx.compose.material.icons.filled.DateRange
+import androidx.compose.material.icons.filled.Home
+import androidx.compose.material.icons.filled.List
+import androidx.compose.material3.*
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.res.stringResource
+import androidx.navigation.NavDestination.Companion.hierarchy
+import androidx.navigation.NavGraph.Companion.findStartDestination
+import androidx.navigation.compose.NavHost
+import androidx.navigation.compose.composable
+import androidx.navigation.compose.currentBackStackEntryAsState
+import androidx.navigation.compose.rememberNavController
+import com.mitchelbv.thuis_c.ui.feyenoord.FeyenoordScreen
+import com.mitchelbv.thuis_c.ui.home.HomeScreen
+import com.mitchelbv.thuis_c.ui.recipe.RecipeScreen
 import com.mitchelbv.thuis_c.ui.theme.ThuisTheme

 class MainActivity : ComponentActivity() {
@@ -21,7 +35,7 @@ class MainActivity : ComponentActivity() {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
-                    color = MaterialTheme.colors.background
+                    color = MaterialTheme.colorScheme.background
                ) {
                    ThuisApp()
                }
@@ -30,25 +44,52 @@ class MainActivity : ComponentActivity() {
    }
 }

-@SuppressLint("UnusedMaterialScaffoldPaddingParameter")
+sealed class Screen(val route: String, @StringRes val resourceId: Int, val icon: ImageVector) {
+    object Feyenoord : Screen("feyenoord", R.string.nav_feyenoord, Icons.Default.DateRange)
+    object Recipes : Screen("recipes", R.string.nav_recipes, Icons.Default.List)
+    object Home : Screen("home", R.string.nav_home, Icons.Default.Home)
+}
+
+val screenItems = listOf(
+    Screen.Home,
+    Screen.Recipes,
+    Screen.Feyenoord,
+)
+
+@OptIn(ExperimentalMaterial3Api::class)
@Composable
 fun ThuisApp() {
-    var currentScreen: ThuisDestination by remember { mutableStateOf(Home) }
-    return Scaffold(bottomBar = {
-        BottomNavigation() {
-            destinations.forEachIndexed { index, item ->
-                BottomNavigationItem(
-                    selected = currentScreen.route == destinations[index].route,
-                    onClick = { currentScreen = destinations[index] },
-                    icon = {
-                        Icon(
-                            destinations[index].icon,
-                            contentDescription = null
-                        )
-                    })
+    val navController = rememberNavController()
+    Scaffold(
+        topBar = {
+            SmallTopAppBar(title = { Text(stringResource(id = R.string.app_name))})
+        },
+        bottomBar = {
+            NavigationBar {
+                val navBackStackEntry by navController.currentBackStackEntryAsState()
+                val currentDestination = navBackStackEntry?.destination
+                screenItems.forEach { screen ->
+                    NavigationBarItem(
+                        icon = { Icon(screen.icon, contentDescription = stringResource(id = screen.resourceId))},
+                        label = { Text(stringResource(id = screen.resourceId))},
+                        selected = currentDestination?.hierarchy?.any {it.route == screen.route} == true,
+                        onClick = {
+                            navController.navigate(screen.route) {
+                                popUpTo(navController.graph.findStartDestination().id) {
+                                    saveState = true
+                                }
+                                launchSingleTop = true
+                                restoreState = true
+                            }
+                        })
+                }
            }
        }
-    }) {
-        currentScreen.screen()
+    ) { innerPadding ->
+        NavHost(navController = navController, startDestination = "home", Modifier.padding(innerPadding)) {
+            composable("home") { HomeScreen(navController) }
+            composable("feyenoord") { FeyenoordScreen(navHostController = navController) }
+            composable("recipes") { RecipeScreen(navHostController = navController)}
+        }
    }
 }
--- a/app/src/main/java/com/mitchelbv/thuis_c/ThuisDestinations.kt
+++ b/app/src/main/java/com/mitchelbv/thuis_c/ThuisDestinations.kt
@@ -1,45 +0,0 @@
-package com.mitchelbv.thuis_c
-
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.DateRange
-import androidx.compose.material.icons.filled.Home
-import androidx.compose.material.icons.filled.List
-import androidx.compose.material.icons.filled.ShoppingCart
-import androidx.compose.runtime.Composable
-import androidx.compose.ui.graphics.vector.ImageVector
-import com.mitchelbv.thuis_c.ui.card.CardsScreen
-import com.mitchelbv.thuis_c.ui.feyenoord.FeyenoordScreen
-import com.mitchelbv.thuis_c.ui.home.HomeScreen
-import com.mitchelbv.thuis_c.ui.recipe.RecipeScreen
-
-interface ThuisDestination {
-    val route: String
-    val screen: @Composable () -> Unit
-    val icon: ImageVector
-}
-
-object Home : ThuisDestination {
-    override val icon = Icons.Filled.Home
-    override val route = "home"
-    override val screen: @Composable () -> Unit = { HomeScreen() }
-}
-
-object FeyenoordMatches : ThuisDestination {
-    override val icon = Icons.Filled.DateRange
-    override val route: String = "matches"
-    override val screen: @Composable () -> Unit = { FeyenoordScreen() }
-}
-
-object Card : ThuisDestination {
-    override val icon = Icons.Filled.ShoppingCart
-    override val route = "card"
-    override val screen: @Composable () -> Unit = { CardsScreen() }
-}
-
-object Recipe : ThuisDestination {
-    override val icon = Icons.Filled.List
-    override val route = "recipe"
-    override val screen: @Composable () -> Unit = { RecipeScreen() }
-}
-
-val destinations = listOf(Home, Recipe, FeyenoordMatches)
--- a/app/src/main/java/com/mitchelbv/thuis_c/ui/card/CardsView.kt
+++ b/app/src/main/java/com/mitchelbv/thuis_c/ui/card/CardsView.kt
@@ -1,7 +1,7 @@
 package com.mitchelbv.thuis_c.ui.card

 import androidx.compose.foundation.layout.Column
-import androidx.compose.material.Text
+import androidx.compose.material3.*
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
--- a/app/src/main/java/com/mitchelbv/thuis_c/ui/feyenoord/FeyenoordView.kt
+++ b/app/src/main/java/com/mitchelbv/thuis_c/ui/feyenoord/FeyenoordView.kt
@@ -3,7 +3,7 @@ package com.mitchelbv.thuis_c.ui.feyenoord
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
-import androidx.compose.material.Text
+import androidx.compose.material3.*
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
@@ -15,11 +15,12 @@ import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.lifecycle.viewmodel.compose.viewModel
+import androidx.navigation.NavHostController
 import coil.compose.AsyncImage
 import com.mitchelbv.thuis_c.R

@Composable
-fun FeyenoordScreen(feyenoordViewModel: FeyenoordViewModel = viewModel()) {
+fun FeyenoordScreen(feyenoordViewModel: FeyenoordViewModel = viewModel(), navHostController: NavHostController) {
    val feyenoordUiState by feyenoordViewModel.uiState.collectAsState()
    Column(
        modifier = Modifier
--- a/app/src/main/java/com/mitchelbv/thuis_c/ui/home/Home.kt
+++ b/app/src/main/java/com/mitchelbv/thuis_c/ui/home/Home.kt
@@ -2,22 +2,17 @@ package com.mitchelbv.thuis_c.ui.home

 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
-import androidx.compose.material.Text
+import androidx.compose.material3.*
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.navigation.NavHostController
 import com.mitchelbv.thuis_c.ui.theme.Typography

@Composable
-fun HomeScreen()    {
+fun HomeScreen(navController: NavHostController) {
    Column(horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center)    {
-        Text("De thuis app!", style = Typography.body1)
+        Text("De thuis app!", style = Typography.bodySmall)
        
    }
-}
-
-@Preview(showBackground = true)
-@Composable
-fun HomeScreenPreview() {
-    HomeScreen()
 }
--- a/app/src/main/java/com/mitchelbv/thuis_c/ui/recipe/RecipeView.kt
+++ b/app/src/main/java/com/mitchelbv/thuis_c/ui/recipe/RecipeView.kt
@@ -1,8 +1,6 @@
 package com.mitchelbv.thuis_c.ui.recipe

 import android.annotation.SuppressLint
-import android.graphics.Bitmap
-import android.util.Log
 import android.view.ViewGroup
 import android.webkit.WebView
 import android.webkit.WebViewClient
@@ -11,10 +9,11 @@ import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.runtime.*
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.viewinterop.AndroidView
+import androidx.navigation.NavHostController

@SuppressLint("SetJavaScriptEnabled")
@Composable
-fun RecipeScreen()  {
+fun RecipeScreen(navHostController: NavHostController) {
    var backEnabled by remember { mutableStateOf(true)}
    var webView: WebView? = null
    AndroidView(modifier = Modifier.fillMaxSize(),
--- a/app/src/main/java/com/mitchelbv/thuis_c/ui/theme/Color.kt
+++ b/app/src/main/java/com/mitchelbv/thuis_c/ui/theme/Color.kt
@@ -2,7 +2,10 @@ package com.mitchelbv.thuis_c.ui.theme

 import androidx.compose.ui.graphics.Color

-val Purple200 = Color(0xFFBB86FC)
-val Purple500 = Color(0xFF6200EE)
-val Purple700 = Color(0xFF3700B3)
-val Teal200 = Color(0xFF03DAC5)
+val Purple80 = Color(0xFFD0BCFF)
+val PurpleGrey80 = Color(0xFFCCC2DC)
+val Pink80 = Color(0xFFEFB8C8)
+
+val Purple40 = Color(0xFF6650a4)
+val PurpleGrey40 = Color(0xFF625b71)
+val Pink40 = Color(0xFF7D5260)
--- a/app/src/main/java/com/mitchelbv/thuis_c/ui/theme/Shape.kt
+++ b/app/src/main/java/com/mitchelbv/thuis_c/ui/theme/Shape.kt
@@ -1,11 +0,0 @@
-package com.mitchelbv.thuis_c.ui.theme
-
-import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material.Shapes
-import androidx.compose.ui.unit.dp
-
-val Shapes = Shapes(
-    small = RoundedCornerShape(4.dp),
-    medium = RoundedCornerShape(4.dp),
-    large = RoundedCornerShape(0.dp)
-)
--- a/app/src/main/java/com/mitchelbv/thuis_c/ui/theme/Theme.kt
+++ b/app/src/main/java/com/mitchelbv/thuis_c/ui/theme/Theme.kt
@@ -1,44 +1,44 @@
 package com.mitchelbv.thuis_c.ui.theme

 import androidx.compose.foundation.isSystemInDarkTheme
-import androidx.compose.material.MaterialTheme
-import androidx.compose.material.darkColors
-import androidx.compose.material.lightColors
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.darkColorScheme
+import androidx.compose.material3.lightColorScheme
 import androidx.compose.runtime.Composable

-private val DarkColorPalette = darkColors(
-    primary = Purple200,
-    primaryVariant = Purple700,
-    secondary = Teal200
+private val DarkColorScheme = darkColorScheme(
+    primary = Purple80,
+    secondary = PurpleGrey80,
+    tertiary = Pink80
 )

-private val LightColorPalette = lightColors(
-    primary = Purple500,
-    primaryVariant = Purple700,
-    secondary = Teal200
+private val LightColorScheme = lightColorScheme(
+    primary = Purple40,
+    secondary = PurpleGrey40,
+    tertiary = Pink40

    /* Other default colors to override
-    background = Color.White,
-    surface = Color.White,
+    background = Color(0xFFFFFBFE),
+    surface = Color(0xFFFFFBFE),
    onPrimary = Color.White,
-    onSecondary = Color.Black,
-    onBackground = Color.Black,
-    onSurface = Color.Black,
+    onSecondary = Color.White,
+    onTertiary = Color.White,
+    onBackground = Color(0xFF1C1B1F),
+    onSurface = Color(0xFF1C1B1F),
    */
 )

@Composable
 fun ThuisTheme(darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable () -> Unit) {
    val colors = if (darkTheme) {
-        DarkColorPalette
+        DarkColorScheme
    } else {
-        LightColorPalette
+        LightColorScheme
    }

    MaterialTheme(
-        colors = colors,
+        colorScheme = colors,
        typography = Typography,
-        shapes = Shapes,
        content = content
    )
 }
--- a/app/src/main/java/com/mitchelbv/thuis_c/ui/theme/Type.kt
+++ b/app/src/main/java/com/mitchelbv/thuis_c/ui/theme/Type.kt
@@ -1,6 +1,6 @@
 package com.mitchelbv.thuis_c.ui.theme

-import androidx.compose.material.Typography
+import androidx.compose.material3.Typography
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.font.FontFamily
 import androidx.compose.ui.text.font.FontWeight
@@ -8,21 +8,27 @@ import androidx.compose.ui.unit.sp

 // Set of Material typography styles to start with
 val Typography = Typography(
-    body1 = TextStyle(
+    bodyLarge = TextStyle(
        fontFamily = FontFamily.Default,
        fontWeight = FontWeight.Normal,
-        fontSize = 16.sp
+        fontSize = 16.sp,
+        lineHeight = 24.sp,
+        letterSpacing = 0.5.sp
    )
    /* Other default text styles to override
-    button = TextStyle(
-        fontFamily = FontFamily.Default,
-        fontWeight = FontWeight.W500,
-        fontSize = 14.sp
-    ),
-    caption = TextStyle(
+    titleLarge = TextStyle(
        fontFamily = FontFamily.Default,
        fontWeight = FontWeight.Normal,
-        fontSize = 12.sp
+        fontSize = 22.sp,
+        lineHeight = 28.sp,
+        letterSpacing = 0.sp
+    ),
+    labelSmall = TextStyle(
+        fontFamily = FontFamily.Default,
+        fontWeight = FontWeight.Medium,
+        fontSize = 11.sp,
+        lineHeight = 16.sp,
+        letterSpacing = 0.5.sp
    )
    */
 )
--- a/app/src/main/res/values/strings.xml
+++ b/app/src/main/res/values/strings.xml
@@ -1,3 +1,7 @@
 <resources>
    <string name="app_name">Thuis</string>
+
+    <string name="nav_feyenoord">Feyenoord</string>
+    <string name="nav_recipes">Recepten</string>
+    <string name="nav_home">Home</string>
 </resources>