Merge pull request #3

Add conversation view

Author: tobiasvonderheidt

app/build.gradle.kts

@@ -50,6 +50,7 @@ dependencies {
     implementation(libs.androidx.ui.tooling.preview)
     implementation(libs.androidx.material3)
     implementation(libs.androidx.navigation.compose)
+    implementation(libs.androidx.material.icons.extended)
     testImplementation(libs.junit)
     androidTestImplementation(libs.androidx.junit)
     androidTestImplementation(libs.androidx.espresso.core)

app/src/main/java/org/vonderheidt/hips/data/Message.kt

@@ -0,0 +1,24 @@
+package org.vonderheidt.hips.data
+
+/**
+ * Class that represents a chat message in a conversation.
+ */
+data class Message (
+    val senderID: Int,
+    val receiverID: Int,
+    val timestamp: Long,
+    val content: String
+) {
+    /**
+     * Some sample messages for the conversation screen.
+     */
+    companion object {
+        val Samples = listOf(
+            Message(1, 0, System.currentTimeMillis() - 5982341, "Oi, Lionel! What a match today! I honestly thought we were done for at halftime being 2-0 down, but that second half was brilliant! We really pulled it together, didn’t we?"),
+            Message(0, 1, System.currentTimeMillis() - 4553793, "Absolutely, Cristiano! That comeback was mental! Your goal really got everyone buzzing. And that assist I had? Proper chuffed to finally chip in like that! But can we talk about the ref? What a wanker!"),
+            Message(1, 0, System.currentTimeMillis() - 3163455, "Right? I mean, some of those calls were ridiculous! I thought he was going to cost us the game. Thank goodness we managed to turn it around despite him!"),
+            Message(0, 1, System.currentTimeMillis() - 2398574, "No doubt about it! I reckon we’re finally starting to gel as a team, but we need to work on our communication a bit. I lost track of you a couple of times out there!"),
+            Message(1, 0, System.currentTimeMillis() - 1637465, "Totally agree! Let’s sort out a practice this week to work on that. And afterwards, we should grab a bite and find a pub that shows the highlights! What do you reckon?")
+        )
+    }
+}

app/src/main/java/org/vonderheidt/hips/navigation/NavGraph.kt

@@ -6,6 +6,7 @@ import androidx.navigation.NavHostController
 import androidx.navigation.compose.NavHost
 import androidx.navigation.compose.composable
 import androidx.navigation.compose.rememberNavController
+import org.vonderheidt.hips.ui.screens.ConversationScreen
 import org.vonderheidt.hips.ui.screens.HomeScreen
 import org.vonderheidt.hips.ui.screens.SettingsScreen
 
@@ -22,5 +23,6 @@ fun SetupNavGraph(modifier: Modifier) {
     ) {
         composable(Screen.Home.route) { HomeScreen(navController, modifier) }
         composable(Screen.Settings.route) { SettingsScreen(navController, modifier) }
+        composable(Screen.Conversation.route) { ConversationScreen(navController, modifier) }
     }
 }

app/src/main/java/org/vonderheidt/hips/navigation/Screen.kt

@@ -6,4 +6,5 @@ package org.vonderheidt.hips.navigation
 sealed class Screen(val route: String) {
     object Home: Screen("home")
     object Settings: Screen("settings")
+    object Conversation: Screen("conversation")
 }

app/src/main/java/org/vonderheidt/hips/ui/screens/ConversationScreen.kt

@@ -0,0 +1,205 @@
+package org.vonderheidt.hips.ui.screens
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.automirrored.outlined.ArrowForward
+import androidx.compose.material.icons.automirrored.outlined.Send
+import androidx.compose.material.icons.outlined.Person
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.OutlinedTextField
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import androidx.navigation.NavController
+import androidx.navigation.NavHostController
+import androidx.navigation.compose.rememberNavController
+import org.vonderheidt.hips.data.Message
+import org.vonderheidt.hips.navigation.Screen
+import org.vonderheidt.hips.ui.theme.HiPSTheme
+
+/**
+ * Function that defines the conversation screen.
+ */
+@Composable
+fun ConversationScreen(navController: NavController, modifier: Modifier) {
+    // State variables
+    var messages by rememberSaveable { mutableStateOf(listOf<Message>()) }
+    var newMessage by rememberSaveable { mutableStateOf("") }
+    var sender by rememberSaveable { mutableStateOf(true) }
+
+    // UI components
+    Column(
+        modifier = modifier.fillMaxSize(),
+        horizontalAlignment = Alignment.CenterHorizontally
+    ) {
+        // Back button
+        Row(
+            modifier = modifier.fillMaxWidth(),
+            horizontalArrangement = Arrangement.End
+        ) {
+            IconButton(
+                onClick = {
+                    // Navigate back to home screen
+                    navController.navigate(Screen.Home.route) {
+                        // Empty back stack, including home screen
+                        // Otherwise app won't close when user goes back once more via the phone's back button
+                        popUpTo(Screen.Home.route) {
+                            inclusive = true
+                        }
+                    }
+                }
+            ) {
+                Icon(
+                    imageVector = Icons.AutoMirrored.Outlined.ArrowForward,
+                    contentDescription = "Go back to home screen"
+                )
+            }
+        }
+
+        // Chat partner
+        Row (
+            modifier = modifier.fillMaxWidth(0.95f),
+            verticalAlignment = Alignment.CenterVertically
+        ){
+            // Profile picture
+            Icon(
+                imageVector = Icons.Outlined.Person,
+                contentDescription = "Profile picture",
+                modifier = modifier.size(24.dp)
+            )
+
+            Spacer(modifier = modifier.width(8.dp))
+
+            // Name
+            Text(
+                text = "Demo",
+                fontSize = 24.sp,
+            )
+        }
+
+        Spacer(modifier = modifier.height(8.dp))
+
+        // Messages
+        // Use LazyColumn as it only loads visible messages into memory, allowing for arbitrary number of messages
+        LazyColumn(
+            modifier = modifier
+                .fillMaxWidth(0.95f)
+                .weight(1f)
+        ) {
+            // Current user (senderID == 0) is right aligned and green
+            // Chat partners (senderID != 0) are left aligned and red
+            items(messages) { message ->
+                Row (
+                    modifier = modifier.fillMaxWidth(),
+                    horizontalArrangement = if (message.senderID == 0) Arrangement.End else Arrangement.Start
+                ) {
+                    Box(
+                        modifier = modifier
+                            .fillMaxWidth(0.9f)
+                            .background(
+                                color = if (message.senderID == 0) Color(0xFF2E7D32) else Color(0xFFB71C1C),
+                                shape = RoundedCornerShape(4.dp)
+                            )
+                            .padding(8.dp)
+                    ) {
+                        Text(
+                            text = message.content,
+                            color = Color.White
+                        )
+                    }
+                }
+
+                Spacer(modifier = modifier.height(8.dp))
+            }
+        }
+
+        Row(
+            modifier = modifier.fillMaxWidth(0.95f),
+            verticalAlignment = Alignment.Bottom
+        ) {
+            // Input field for new message
+            OutlinedTextField(
+                value = newMessage,
+                onValueChange = {newMessage = it},
+                modifier = modifier.weight(1f),
+                label = { Text(text = "New message") }
+            )
+
+            Spacer(modifier = modifier.width(8.dp))
+
+            // Send button
+            // Colour corresponds to user a new message is being sent as
+            IconButton(
+                onClick = {
+                    // Only send non-empty messages
+                    // Allows to switch user on button press
+                    if (newMessage != "") {
+                        messages += Message(
+                            senderID = if (sender) 0 else 1,
+                            receiverID = if (sender) 1 else 0,
+                            timestamp = System.currentTimeMillis(),
+                            content = newMessage
+                        )
+                    }
+
+                    // Clear input field and change mode
+                    newMessage = ""
+                    sender = !sender
+                },
+                modifier = modifier
+                    .background(
+                        color = if (sender) Color(0xFF2E7D32) else Color(0xFFB71C1C),
+                        shape = CircleShape
+                    )
+            ) {
+                Icon(
+                    imageVector = Icons.AutoMirrored.Outlined.Send,
+                    contentDescription = "Send message",
+                    tint = Color.White
+                )
+            }
+        }
+
+        Spacer(modifier = modifier.height(8.dp))
+    }
+}
+
+/**
+ * Function to show preview of the conversation screen in Android Studio.
+ */
+@Preview(showBackground = true)
+@Composable
+fun ConversationScreenPreview() {
+    // No Scaffold, no innerPadding
+    HiPSTheme {
+        val modifier: Modifier = Modifier
+        val navController: NavHostController = rememberNavController()
+
+        ConversationScreen(navController, modifier)
+    }
+}

app/src/main/java/org/vonderheidt/hips/ui/screens/HomeScreen.kt

@@ -18,6 +18,7 @@ import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.outlined.Clear
 import androidx.compose.material.icons.outlined.Email
+import androidx.compose.material.icons.outlined.Forum
 import androidx.compose.material.icons.outlined.Info
 import androidx.compose.material.icons.outlined.Lock
 import androidx.compose.material.icons.outlined.Settings
@@ -84,11 +85,21 @@ fun HomeScreen(navController: NavController, modifier: Modifier) {
             .verticalScroll(state = scrollState),
         horizontalAlignment = Alignment.CenterHorizontally
     ) {
-        // Settings icon
         Row(
             modifier = modifier.fillMaxWidth(),
-            horizontalArrangement = Arrangement.End
+            horizontalArrangement = Arrangement.SpaceBetween
         ) {
+            // Conversation icon
+            IconButton(
+                onClick = { navController.navigate(Screen.Conversation.route) }
+            ) {
+                Icon(
+                    imageVector = Icons.Outlined.Forum,
+                    contentDescription = "Conversations"
+                )
+            }
+
+            // Settings icon
             IconButton(
                 onClick = { navController.navigate(Screen.Settings.route) }
             ) {

gradle/libs.versions.toml

@@ -9,6 +9,7 @@ lifecycleRuntimeKtx = "2.8.7"
 activityCompose = "1.9.3"
 composeBom = "2024.11.00"
 navigationCompose = "2.8.4"
+materialIconsExtended = "1.7.5"
 
 [libraries]
 androidx-core-ktx = { group = "androidx.core", name = "core-ktx", version.ref = "coreKtx" }
@@ -26,6 +27,7 @@ androidx-ui-test-manifest = { group = "androidx.compose.ui", name = "ui-test-man
 androidx-ui-test-junit4 = { group = "androidx.compose.ui", name = "ui-test-junit4" }
 androidx-material3 = { group = "androidx.compose.material3", name = "material3" }
 androidx-navigation-compose = { group = "androidx.navigation", name = "navigation-compose", version.ref = "navigationCompose" }
+androidx-material-icons-extended = { group = "androidx.compose.material", name = "material-icons-extended", version.ref = "materialIconsExtended" }
 
 [plugins]
 android-application = { id = "com.android.application", version.ref = "agp" }