Issue-25 Top Bar buttons in compose

raghavtilak · Oct 6, 2023 · 28c3911 · 28c3911
1 parent 4b27623
commit 28c3911
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 40 deletions.
diff --git a/app/src/main/java/com/raghav/gfgffmpeg/MainActivity.kt b/app/src/main/java/com/raghav/gfgffmpeg/MainActivity.kt
@@ -9,11 +9,7 @@ import android.widget.Toast
 import androidx.activity.result.contract.ActivityResultContracts
 import androidx.appcompat.app.AppCompatActivity
 import androidx.compose.foundation.layout.Column
-import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableFloatStateOf
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
 import androidx.lifecycle.lifecycleScope
 import com.arthenica.ffmpegkit.FFmpegKit
 import com.arthenica.ffmpegkit.FFmpegKitConfig
@@ -81,6 +77,19 @@ class MainActivity : AppCompatActivity() {
         binding = ActivityMainBinding.inflate(layoutInflater)
         setContentView(binding.root)
 
+        binding.composeTopBar.setContent {
+            TopBar(selectClick = {
+                handler.removeCallbacksAndMessages(null)
+                selectVideoLauncher.launch("video/*")
+            }, saveClick = {
+                if (input_video_uri != null) {
+                    //passing filename
+                    saveVideoLauncher.launch("VID-${System.currentTimeMillis() / 1000}")
+                } else Toast.makeText(this@MainActivity, "Please upload video", Toast.LENGTH_LONG)
+                    .show()
+            })
+        }
+
         binding.composeControlPanel.setContent {
             Column {
                 ScrubberPanel(
@@ -137,18 +146,6 @@ class MainActivity : AppCompatActivity() {
             }
         }
 
-        binding.saveVideo.setOnClickListener {
-            if (input_video_uri != null) {
-                //passing filename
-                saveVideoLauncher.launch("VID-${System.currentTimeMillis() / 1000}")
-            } else Toast.makeText(this@MainActivity, "Please upload video", Toast.LENGTH_LONG)
-                .show()
-        }
-        binding.selectVideo.setOnClickListener {
-            handler.removeCallbacksAndMessages(null)
-            selectVideoLauncher.launch("video/*")
-        }
-
         /*
             set up the VideoView.
             We will be using VideoView to view our video.

diff --git a/app/src/main/java/com/raghav/gfgffmpeg/TopBar.kt b/app/src/main/java/com/raghav/gfgffmpeg/TopBar.kt
@@ -0,0 +1,54 @@
+package com.raghav.gfgffmpeg
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.width
+import androidx.compose.material.Button
+import androidx.compose.material.Icon
+import androidx.compose.material.Text
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Add
+import androidx.compose.material.icons.filled.ThumbUp
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+
+@Composable
+fun TopBar(
+    selectClick: () -> Unit,
+    saveClick: () -> Unit
+) {
+    Row(
+        modifier = Modifier
+            .fillMaxWidth()
+            .background(color = Color.Transparent),
+        horizontalArrangement = Arrangement.SpaceEvenly
+
+    ) {
+        Button(onClick = {
+            selectClick()
+        }) {
+            Icon(Icons.Default.Add, contentDescription = null)
+            Spacer(modifier = Modifier.width(8.dp))
+            Text("Select Video")
+        }
+        Button(onClick = {
+            saveClick()
+        }) {
+            Icon(Icons.Default.ThumbUp, contentDescription = null)
+            Spacer(modifier = Modifier.width(8.dp))
+            Text("Save")
+        }
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun TopBarPreview() {
+    TopBar({}) {}
+}
diff --git a/app/src/main/res/layout/activity_main.xml b/app/src/main/res/layout/activity_main.xml
@@ -7,37 +7,17 @@
     android:background="@drawable/gradient_relative_layout"
     tools:context=".MainActivity">
 
-
-    <Button
-        android:id="@+id/selectVideo"
+    <androidx.compose.ui.platform.ComposeView
+        android:id="@+id/compose_top_bar"
         android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:layout_alignParentTop="true"
-        android:layout_marginEnd="5dp"
-        android:layout_toStartOf="@id/saveVideo"
-        android:background="@drawable/buttonradius"
-        android:padding="10dp"
-        android:text="Select Video"
-        android:textColor="@color/white" />
-
-    <Button
-        android:id="@+id/saveVideo"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:layout_alignParentTop="true"
-        android:layout_alignParentEnd="true"
-        android:background="@drawable/button_save"
-        android:padding="10dp"
-        android:text="Save"
-        android:textColor="@color/white" />
-
+        android:layout_height="wrap_content" />
 
     <VideoView
         android:id="@+id/videoView"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:layout_above="@+id/relative"
-        android:layout_below="@+id/selectVideo"
+        android:layout_below="@+id/compose_top_bar"
         android:layout_centerInParent="true" />
 
     <LinearLayout