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

.idea/deploymentTargetDropDown.xml

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="deploymentTargetDropDown">
+    <targetSelectedWithDropDown>
+      <Target>
+        <type value="QUICK_BOOT_TARGET" />
+        <deviceKey>
+          <Key>
+            <type value="VIRTUAL_DEVICE_PATH" />
+            <value value="$USER_HOME$/.android/avd/Pixel_4_XL_API_31.avd" />
+          </Key>
+        </deviceKey>
+      </Target>
+    </targetSelectedWithDropDown>
+    <timeTargetWasSelectedWithDropDown value="2022-11-06T10:26:15.426480Z" />
+  </component>
+</project>

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.core:core-ktx:1.7.0'
-    implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.4.1'
+    implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.3.1'
-    implementation 'androidx.activity:activity-compose:1.5.1'
+    implementation 'androidx.activity:activity-compose:1.3.1'
-    implementation "androidx.compose.ui:ui:$compose_ui_version"
+    implementation "androidx.compose.ui:ui:$compose_version"
-    implementation "androidx.compose.ui:ui-tooling-preview:$compose_ui_version"
+    implementation "androidx.compose.ui:ui-tooling-preview:$compose_version"
-    implementation "androidx.compose.material:material:$compose_ui_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"
+    androidTestImplementation "androidx.compose.ui:ui-test-junit4:$compose_version"
-    debugImplementation "androidx.compose.ui:ui-tooling:$compose_ui_version"
+    debugImplementation "androidx.compose.ui:ui-tooling:$compose_version"
-    debugImplementation "androidx.compose.ui:ui-test-manifest:$compose_ui_version"
+    debugImplementation "androidx.compose.ui:ui-test-manifest:$compose_version"
 }

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" />

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.material.icons.filled.DateRange
-import androidx.compose.runtime.*
+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) }
+    val navController = rememberNavController()
-    return Scaffold(bottomBar = {
+    Scaffold(
-        BottomNavigation() {
+        topBar = {
-            destinations.forEachIndexed { index, item ->
+            SmallTopAppBar(title = { Text(stringResource(id = R.string.app_name))})
-                BottomNavigationItem(
+        },
-                    selected = currentScreen.route == destinations[index].route,
+        bottomBar = {
-                    onClick = { currentScreen = destinations[index] },
+            NavigationBar {
-                    icon = {
+                val navBackStackEntry by navController.currentBackStackEntryAsState()
-                        Icon(
+                val currentDestination = navBackStackEntry?.destination
-                            destinations[index].icon,
+                screenItems.forEach { screen ->
-                            contentDescription = null
+                    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
+                            }
+                        })
+                }
             }
         }
-    }) {
+    ) { innerPadding ->
-        currentScreen.screen()
+        NavHost(navController = navController, startDestination = "home", Modifier.padding(innerPadding)) {
+            composable("home") { HomeScreen(navController) }
+            composable("feyenoord") { FeyenoordScreen(navHostController = navController) }
+            composable("recipes") { RecipeScreen(navHostController = navController)}
+        }
     }
 }

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)

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

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

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()
 }

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(),

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 Purple80 = Color(0xFFD0BCFF)
-val Purple500 = Color(0xFF6200EE)
+val PurpleGrey80 = Color(0xFFCCC2DC)
-val Purple700 = Color(0xFF3700B3)
+val Pink80 = Color(0xFFEFB8C8)
-val Teal200 = Color(0xFF03DAC5)
+
+val Purple40 = Color(0xFF6650a4)
+val PurpleGrey40 = Color(0xFF625b71)
+val Pink40 = Color(0xFF7D5260)

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)
-)

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.material3.MaterialTheme
-import androidx.compose.material.darkColors
+import androidx.compose.material3.darkColorScheme
-import androidx.compose.material.lightColors
+import androidx.compose.material3.lightColorScheme
 import androidx.compose.runtime.Composable
 
-private val DarkColorPalette = darkColors(
+private val DarkColorScheme = darkColorScheme(
-    primary = Purple200,
+    primary = Purple80,
-    primaryVariant = Purple700,
+    secondary = PurpleGrey80,
-    secondary = Teal200
+    tertiary = Pink80
 )
 
-private val LightColorPalette = lightColors(
+private val LightColorScheme = lightColorScheme(
-    primary = Purple500,
+    primary = Purple40,
-    primaryVariant = Purple700,
+    secondary = PurpleGrey40,
-    secondary = Teal200
+    tertiary = Pink40
 
     /* Other default colors to override
-    background = Color.White,
+    background = Color(0xFFFFFBFE),
-    surface = Color.White,
+    surface = Color(0xFFFFFBFE),
     onPrimary = Color.White,
-    onSecondary = Color.Black,
+    onSecondary = Color.White,
-    onBackground = Color.Black,
+    onTertiary = Color.White,
-    onSurface = Color.Black,
+    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
     )
 }

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(
+    titleLarge = TextStyle(
-        fontFamily = FontFamily.Default,
-        fontWeight = FontWeight.W500,
-        fontSize = 14.sp
-    ),
-    caption = 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
     )
     */
 )

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>

build.gradle

@@ -1,6 +1,6 @@
 buildscript {
     ext {
-        compose_ui_version = '1.2.1'
+        compose_version = '1.1.1'
     }
 }// Top-level build file where you can add configuration options common to all sub-projects/modules.
 plugins {