UI improvements

SuhasDissa · Jul 31, 2023 · 90fa93b · 90fa93b
1 parent f2e5915
commit 90fa93b
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 22 deletions.
diff --git a/app/src/main/java/app/suhasdissa/karaoke/ui/components/IconCardButton.kt b/app/src/main/java/app/suhasdissa/karaoke/ui/components/IconCardButton.kt
@@ -1,13 +1,12 @@
 package app.suhasdissa.karaoke.ui.components
 
-import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Row
-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.material3.ElevatedCard
+import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
@@ -17,14 +16,14 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.unit.dp
 
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun IconCardButton(onClick: () -> Unit, text: String, icon: ImageVector) {
     ElevatedCard(
-        Modifier.clickable { onClick() }
+        onClick
     ) {
         Row(
             Modifier
-                .fillMaxWidth()
                 .padding(horizontal = 8.dp)
                 .height(100.dp),
             horizontalArrangement = Arrangement.spacedBy(16.dp),

diff --git a/app/src/main/java/app/suhasdissa/karaoke/ui/screens/HomeScreen.kt b/app/src/main/java/app/suhasdissa/karaoke/ui/screens/HomeScreen.kt
@@ -1,14 +1,16 @@
 package app.suhasdissa.karaoke.ui.screens
 
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
 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.lazy.grid.GridCells
+import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Mic
@@ -17,7 +19,6 @@ import androidx.compose.material.icons.filled.VideoFile
 import androidx.compose.material3.Card
 import androidx.compose.material3.CenterAlignedTopAppBar
 import androidx.compose.material3.ExperimentalMaterial3Api
-import androidx.compose.material3.ExtendedFloatingActionButton
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
@@ -33,28 +34,15 @@ import app.suhasdissa.karaoke.Destination
 import app.suhasdissa.karaoke.R
 import app.suhasdissa.karaoke.VideoPlayerRecorderScreen
 import app.suhasdissa.karaoke.YoutubeSearchScreen
+import app.suhasdissa.karaoke.ui.components.IconCardButton
 import app.suhasdissa.karaoke.ui.components.PlayerView
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun HomeScreen(
     onNavigate: (destination: Destination) -> Unit
 ) {
-    Scaffold(floatingActionButton = {
-        Column {
-            ExtendedFloatingActionButton(
-                text = { Text(stringResource(id = R.string.open_karaoke_video)) },
-                icon = { Icon(Icons.Default.VideoFile, null) },
-                onClick = { onNavigate(VideoPlayerRecorderScreen) }
-            )
-            Spacer(modifier = Modifier.height(16.dp))
-            ExtendedFloatingActionButton(
-                text = { Text(stringResource(id = R.string.record_audio)) },
-                icon = { Icon(Icons.Default.Mic, null) },
-                onClick = { onNavigate(AudioRecorderScreen) }
-            )
-        }
-    }, topBar = {
+    Scaffold(topBar = {
         CenterAlignedTopAppBar(title = {
             Card(
                 modifier = Modifier
@@ -94,6 +82,27 @@ fun HomeScreen(
                 )
                 .fillMaxSize()
         ) {
+            LazyVerticalGrid(
+                modifier = Modifier.fillMaxWidth(),
+                columns = GridCells.Adaptive(300.dp),
+                horizontalArrangement = Arrangement.spacedBy(8.dp),
+                verticalArrangement = Arrangement.spacedBy(8.dp)
+            ) {
+                item {
+                    IconCardButton(
+                        onClick = { onNavigate(VideoPlayerRecorderScreen) },
+                        text = stringResource(id = R.string.open_karaoke_video),
+                        icon = Icons.Default.VideoFile
+                    )
+                }
+                item {
+                    IconCardButton(
+                        onClick = { onNavigate(AudioRecorderScreen) },
+                        text = stringResource(id = R.string.record_audio),
+                        icon = Icons.Default.Mic
+                    )
+                }
+            }
             PlayerView()
         }
     }

diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
@@ -24,10 +24,11 @@
     <string name="options">Options</string>
     <string name="search">Search</string>
     <string name="clear_search">Clear Search</string>
-    <string name="open_karaoke_video">Open Video</string>
+    <string name="open_karaoke_video">Open Video file</string>
     <string name="record_audio">Record Audio</string>
     <string name="show_recorded_files">Show Recorded Files</string>
     <string name="get_started">Get started by searching for a video or opening a video file.</string>
+    <string name="search_youtube_video">Search Youtube video</string>
 
     <!-- About -->