Merge pull request #47 from SELab1/NavigationBar

Basic components & colours

app/src/main/java/be/ugent/sel/studeez/common/composable/FloatingActionButtonComposable.kt

@@ -0,0 +1,62 @@
+package be.ugent.sel.studeez.common.composable
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.material.FloatingActionButton
+import androidx.compose.material.Icon
+import androidx.compose.material.IconButton
+import androidx.compose.material.Text
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Add
+import androidx.compose.material.icons.filled.Check
+import androidx.compose.material.icons.filled.DateRange
+import androidx.compose.material.icons.filled.Person
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.tooling.preview.Preview
+import be.ugent.sel.studeez.ui.theme.StudeezTheme
+
+@Composable
+fun CollapsedAddButton() {
+    FloatingActionButton(
+        onClick = { /* TODO popup add options */ }
+    ) {
+        Icon(imageVector = Icons.Default.Add, contentDescription = "fab")
+    }
+}
+
+@Composable
+fun ExpandedAddButton() {
+    Row() {
+        IconButton(onClick = { /* TODO Go to next step */ }) {
+            Column (horizontalAlignment = Alignment.CenterHorizontally) {
+                Icon(imageVector = Icons.Default.Check, contentDescription = "Task")
+                Text(text = "Task")
+            }
+        }
+        IconButton(onClick = { /* TODO Go to next step */ }) {
+            Column (horizontalAlignment = Alignment.CenterHorizontally) {
+                Icon(imageVector = Icons.Default.Person, contentDescription = "Friend")
+                Text(text = "Friend")
+            }
+        }
+        IconButton(onClick = { /* TODO Go to next step */ }) {
+            Column (horizontalAlignment = Alignment.CenterHorizontally) {
+                Icon(imageVector = Icons.Default.DateRange, contentDescription = "Session")
+                Text(text = "Session")
+            }
+        }
+    }
+}
+
+@Preview
+@Composable
+fun CollapsedAddButtonPreview() {
+    StudeezTheme { CollapsedAddButton() }
+}
+
+@Preview
+@Composable
+fun ExpandedAddButtonPreview() {
+    StudeezTheme { ExpandedAddButton() }
+}

app/src/main/java/be/ugent/sel/studeez/common/composable/NavigationBarComposable.kt

@@ -0,0 +1,63 @@
+package be.ugent.sel.studeez.common.composable
+
+import androidx.compose.material.BottomNavigation
+import androidx.compose.material.BottomNavigationItem
+import androidx.compose.material.Icon
+import androidx.compose.material.Text
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Check
+import androidx.compose.material.icons.filled.List
+import androidx.compose.material.icons.filled.Person
+import androidx.compose.material.icons.outlined.DateRange
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import be.ugent.sel.studeez.ui.theme.StudeezTheme
+
+@Composable
+fun NavigationBar() {
+    // TODO Pass functions and new screens.
+    // TODO Pass which screen is selected.
+    // TODO Disabled -> HIGH/MEDIUM_EMPHASIS if the page is implemented
+    BottomNavigation(
+        elevation = 10.dp
+    ) {
+        BottomNavigationItem(
+            icon = { Icon(imageVector = Icons.Default.List, "Home") },
+            label = { Text(text = "Home") },
+            selected = false, // TODO
+            onClick = { /* TODO */ }
+        )
+
+        BottomNavigationItem(
+            icon = { Icon(imageVector = Icons.Default.Check, "Tasks") },
+            label = { Text(text = "Tasks") },
+            selected = false, // TODO
+            onClick = { /* TODO */ }
+        )
+
+        // Hack to space the entries in the navigation bar, make space for fab
+        BottomNavigationItem(icon = {}, onClick = {}, selected = false)
+
+        BottomNavigationItem(
+            icon = { Icon(imageVector = Icons.Outlined.DateRange, "Sessions") },
+            label = { Text(text = "Sessions") },
+            selected = false, // TODO
+            onClick = { /* TODO */ }
+        )
+
+        BottomNavigationItem(
+            icon = { Icon(imageVector = Icons.Default.Person, "Profile") },
+            label = { Text(text = "Profile") },
+            selected = false, // TODO
+            onClick = { /* TODO */ }
+        )
+
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun NavigationBarPreview() {
+    StudeezTheme { NavigationBar() }
+}

app/src/main/java/be/ugent/sel/studeez/common/composable/ToolbarComposable.kt

@@ -0,0 +1,77 @@
+package be.ugent.sel.studeez.common.composable
+
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.material.*
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Menu
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.tooling.preview.Preview
+import be.ugent.sel.studeez.ui.theme.StudeezTheme
+
+// TODO Add option for button in top right corner as extra button
+
+@Composable
+// Contains floatingActionButton and bottom bar, used in the main four screens.
+fun PrimaryScreenToolbar(
+    title: String,
+    content: (PaddingValues) -> Unit
+) {
+    Scaffold(
+        // Everything at the top of the screen
+        topBar = { TopAppBar(
+            title = { Text(text = title) },
+            navigationIcon = {
+                IconButton(onClick = { /* TODO open sidemenu */ }) {
+                    Icon(imageVector = Icons.Default.Menu, contentDescription = "Menu")
+                }
+            }
+        ) },
+
+        // Everything at the bottom of the screen
+        bottomBar = { NavigationBar() }, // TODO Pass arguments so that the current tab etc can be shown
+        floatingActionButtonPosition = FabPosition.Center,
+        isFloatingActionButtonDocked = true,
+        floatingActionButton = { CollapsedAddButton() }
+    ) { paddingValues ->
+        content(paddingValues)
+    }
+}
+
+@Composable
+// Does not contain floatingActionButton and bottom bar, used in all the other screens
+fun SecondaryScreenToolbar(
+    title: String,
+    content: (PaddingValues) -> Unit
+) {
+    Scaffold(
+        // Everything at the top of the screen
+        topBar = { TopAppBar(
+            title = { Text(text = title) },
+            navigationIcon = {
+                IconButton(onClick = { /* TODO open sidemenu */ }) {
+                    Icon(imageVector = Icons.Default.Menu, contentDescription = "Menu")
+                }
+            }
+        ) },
+    ) { paddingValues ->
+        content(paddingValues)
+    }
+}
+
+@Preview
+@Composable
+fun PrimaryScreenToolbarPreview() {
+    StudeezTheme { PrimaryScreenToolbar(
+        "Preview screen",
+        {}
+    ) }
+}
+
+@Preview
+@Composable
+fun SecondaryScreenToolbarPreview() {
+    StudeezTheme { SecondaryScreenToolbar(
+        "Preview screen",
+        {}
+    )}
+}

app/src/main/java/be/ugent/sel/studeez/ui/theme/Color.kt

@@ -2,7 +2,6 @@ package be.ugent.sel.studeez.ui.theme
 
 import androidx.compose.ui.graphics.Color
 
-val Purple200 = Color(0xFFBB86FC)
+val Blue100   = Color( 30, 100, 200, 255)
-val Purple500 = Color(0xFF6200EE)
+val Blue120   = Color( 27,  90, 180, 255)
-val Purple700 = Color(0xFF3700B3)
+val Yellow100 = Color(255, 210,   0, 255)
-val Teal200 = Color(0xFF03DAC5)

app/src/main/java/be/ugent/sel/studeez/ui/theme/Theme.kt

@@ -5,17 +5,20 @@ import androidx.compose.material.MaterialTheme
 import androidx.compose.material.darkColors
 import androidx.compose.material.lightColors
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.graphics.Color
+
+// Reference colour palette: https://xd.adobe.com/view/3cb1e6ff-eb42-4a74-886e-7739c2ccc5ed-69e2/
 
 private val DarkColorPalette = darkColors(
-    primary = Purple200,
+    primary = Blue100,
-    primaryVariant = Purple700,
+    primaryVariant = Blue120,
-    secondary = Teal200
+    secondary = Yellow100
 )
 
 private val LightColorPalette = lightColors(
-    primary = Purple500,
+    primary = Blue100,
-    primaryVariant = Purple700,
+    primaryVariant = Blue120,
-    secondary = Teal200
+    secondary = Yellow100
 
     /* Other default colors to override
     background = Color.White,

app/src/main/res/values/colors.xml

@@ -1,10 +1,12 @@
 <?xml version="1.0" encoding="utf-8"?>
+<!-- Keep these colors here for the sake of safety, so Android can fall back on them -->
+<!-- All coloring of Jetpack Compose components should be done through using the StudeezTheme. -->
 <resources>
-    <color name="purple_200">#FFBB86FC</color>
+    <color name="blue_100">#FF1E64C8</color>
-    <color name="purple_500">#FF6200EE</color>
+    <color name="blue_110">#FF1B5AB4</color>
-    <color name="purple_700">#FF3700B3</color>
+    <color name="blue_120">#FF1850A0</color>
-    <color name="teal_200">#FF03DAC5</color>
+    <color name="yellow_100">#FFFFD200</color>
-    <color name="teal_700">#FF018786</color>
+    <color name="yellow_080">#FFFDD931</color>
     <color name="black">#FF000000</color>
     <color name="white">#FFFFFFFF</color>
 </resources>

app/src/main/res/values/themes.xml

@@ -1,7 +1,8 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
-
+    <!-- This is the color of the statusBar (the bar with the clock and the notifications),
+        which we cannot set using Jetpack Compose -->
     <style name="Theme.Studeez" parent="android:Theme.Material.Light.NoActionBar">
-        <item name="android:statusBarColor">@color/purple_700</item>
+        <item name="android:statusBarColor">@color/blue_120</item>
     </style>
 </resources>