CameraX Preview

android/app/build.gradle.kts

@@ -1,6 +1,7 @@
 plugins {
     alias(libs.plugins.agp)
     alias(libs.plugins.kotlin)
+    alias(libs.plugins.kotlin.serialization)
     alias(libs.plugins.composeCompiler)
 }
 
@@ -43,17 +44,23 @@ dependencies {
     implementation(libs.androidx.core.ktx)
     implementation(libs.androidx.lifecycle.runtime.ktx)
     implementation(libs.androidx.activity.compose)
-    implementation(platform(libs.androidx.compose.bom))
-    implementation(libs.androidx.ui)
-    implementation(libs.androidx.ui.graphics)
-    implementation(libs.androidx.ui.tooling.preview)
-    implementation(libs.androidx.material3)
+    implementation(platform(libs.compose.bom))
+    implementation(libs.compose.ui)
+    implementation(libs.compose.ui.graphics)
+    implementation(libs.compose.ui.tooling.preview)
+    implementation(libs.compose.material3)
+    implementation(libs.compose.navigation)
+    implementation(libs.accompanistPermissions)
+    implementation(libs.kotlinx.serialization.core)
+    implementation(libs.camerax)
+    implementation(libs.androidx.camera.view)
+    implementation(libs.androidx.camera.lifecycle)
 
     testImplementation(libs.junit)
     androidTestImplementation(libs.androidx.junit)
     androidTestImplementation(libs.androidx.espresso.core)
-    androidTestImplementation(platform(libs.androidx.compose.bom))
-    androidTestImplementation(libs.androidx.ui.test.junit4)
-    debugImplementation(libs.androidx.ui.tooling)
-    debugImplementation(libs.androidx.ui.test.manifest)
+    androidTestImplementation(platform(libs.compose.bom))
+    androidTestImplementation(libs.compose.ui.test.junit4)
+    debugImplementation(libs.compose.ui.tooling)
+    debugImplementation(libs.compose.ui.test.manifest)
 }

android/app/src/main/AndroidManifest.xml

@@ -1,6 +1,11 @@
 <?xml version="1.0" encoding="utf-8"?>
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:tools="http://schemas.android.com/tools">
+    <uses-feature
+        android:name="android.hardware.camera"
+        android:required="false" />
+    <uses-permission android:name="android.permission.CAMERA"/>
+
     <application
         android:allowBackup="true"
         android:dataExtractionRules="@xml/data_extraction_rules"
@@ -10,7 +15,8 @@
         android:roundIcon="@mipmap/ic_launcher_round"
         android:supportsRtl="true"
         android:theme="@style/Theme.Aigo"
-        tools:targetApi="31">
+        android:enableOnBackInvokedCallback="true"
+        tools:targetApi="tiramisu">
         <activity
             android:name=".MainActivity"
             android:exported="true"

android/app/src/main/java/com/imashnake/aigo/MainActivity.kt

@@ -4,17 +4,77 @@ import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
 import androidx.activity.enableEdgeToEdge
-import androidx.compose.material3.Text
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+import androidx.navigation.compose.NavHost
+import androidx.navigation.compose.composable
+import androidx.navigation.compose.rememberNavController
+import com.google.accompanist.permissions.ExperimentalPermissionsApi
+import com.google.accompanist.permissions.rememberPermissionState
+import com.imashnake.aigo.ui.features.CameraOverlay
+import com.imashnake.aigo.ui.features.CameraPermissionDialog
+import com.imashnake.aigo.ui.features.Home
 import com.imashnake.aigo.ui.theme.AigoTheme
 
 class MainActivity : ComponentActivity() {
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         enableEdgeToEdge()
+
         setContent {
             AigoTheme {
-                Text(text = "aigo")
+                MainScreen(
+                    modifier = Modifier
+                        .fillMaxSize()
+                        .background(MaterialTheme.colorScheme.background)
+                )
+            }
+        }
+    }
+}
+
+@OptIn(ExperimentalPermissionsApi::class)
+@Composable
+fun MainScreen(modifier: Modifier = Modifier) {
+    val navController = rememberNavController()
+    val isDialogShown = remember { mutableStateOf(false) }
+    val cameraPermissionState = rememberPermissionState(
+        permission = android.Manifest.permission.CAMERA,
+        onPermissionResult = { granted ->
+            if (granted) {
+                navController.navigate(CameraOverlay)
+            } else {
+                isDialogShown.value = true
             }
         }
+    )
+
+    Box(modifier.fillMaxSize()) {
+        if (isDialogShown.value) {
+            CameraPermissionDialog(
+                permissionState = cameraPermissionState,
+                onDismiss = { isDialogShown.value = false },
+                launchRequest = cameraPermissionState::launchPermissionRequest,
+            )
+        }
+    }
+
+    NavHost(
+        navController = navController,
+        startDestination = Home,
+        modifier = modifier,
+    ) {
+        composable<Home> {
+            Home(takePicture = cameraPermissionState::launchPermissionRequest)
+        }
+        composable<CameraOverlay> {
+            CameraOverlay()
+        }
     }
 }

android/app/src/main/java/com/imashnake/aigo/ui/components/Button.kt

@@ -0,0 +1,41 @@
+package com.imashnake.aigo.ui.components
+
+import androidx.annotation.DrawableRes
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.wrapContentSize
+import androidx.compose.material3.Button
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.res.vectorResource
+import androidx.compose.ui.unit.dp
+
+@Composable
+fun AigoIconTextButton(
+    @DrawableRes drawable: Int,
+    text: String,
+    modifier: Modifier = Modifier,
+    contentDescription: String? = null,
+    onClick: () -> Unit = {},
+) {
+    Button(
+        onClick = onClick,
+        modifier = modifier
+    ) {
+        Row(
+            horizontalArrangement = Arrangement.spacedBy(8.dp),
+            verticalAlignment = Alignment.CenterVertically,
+            modifier = Modifier.wrapContentSize()
+        ) {
+            Icon(
+                imageVector = ImageVector.vectorResource(drawable),
+                contentDescription = contentDescription,
+            )
+            Text(text)
+        }
+    }
+}

android/app/src/main/java/com/imashnake/aigo/ui/features/CameraOverlay.kt

@@ -0,0 +1,72 @@
+package com.imashnake.aigo.ui.features
+
+import android.content.Context
+import androidx.camera.core.CameraSelector
+import androidx.camera.core.Preview
+import androidx.camera.lifecycle.ProcessCameraProvider
+import androidx.camera.view.PreviewView
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.graphicsLayer
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.res.vectorResource
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.viewinterop.AndroidView
+import androidx.core.content.ContextCompat
+import androidx.lifecycle.compose.LocalLifecycleOwner
+import com.imashnake.aigo.R
+import kotlinx.serialization.Serializable
+import kotlin.coroutines.resume
+import kotlin.coroutines.suspendCoroutine
+
+@Composable
+fun CameraOverlay(modifier: Modifier = Modifier) {
+    Box(modifier.fillMaxSize()) {
+        // TODO: Copied this code from https://medium.com/@deepugeorge2007travel/mastering-camerax-in-jetpack-compose-a-comprehensive-guide-for-android-developers-92ec3591a189
+        //  Properly set this up using: https://developer.android.com/media/camera/camerax/preview.
+        val lensFacing = CameraSelector.LENS_FACING_BACK
+        val lifecycleOwner = LocalLifecycleOwner.current
+        val context = LocalContext.current
+        val preview = Preview.Builder().build()
+        val previewView = remember { PreviewView(context) }
+        val cameraxSelector = CameraSelector.Builder()
+            .requireLensFacing(lensFacing)
+            .build()
+        LaunchedEffect(lensFacing) {
+            val cameraProvider = context.getCameraProvider()
+            cameraProvider.unbindAll()
+            cameraProvider.bindToLifecycle(lifecycleOwner, cameraxSelector, preview)
+            preview.surfaceProvider = previewView.surfaceProvider
+        }
+
+        AndroidView(factory = { previewView }, modifier = Modifier.fillMaxSize())
+        Image(
+            imageVector = ImageVector.vectorResource(R.drawable.blank_go_board),
+            contentDescription = null,
+            modifier = Modifier
+                .align(Alignment.Center)
+                .padding(24.dp)
+                .graphicsLayer { alpha = 0.3f }
+        )
+    }
+}
+
+private suspend fun Context.getCameraProvider(): ProcessCameraProvider =
+    suspendCoroutine { continuation ->
+        ProcessCameraProvider.getInstance(this).also { cameraProvider ->
+            cameraProvider.addListener({
+                continuation.resume(cameraProvider.get())
+            }, ContextCompat.getMainExecutor(this))
+        }
+    }
+
+@Serializable
+data object CameraOverlay

android/app/src/main/java/com/imashnake/aigo/ui/features/CameraPermissionDialog.kt

@@ -0,0 +1,56 @@
+package com.imashnake.aigo.ui.features
+
+import androidx.compose.material3.AlertDialog
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.material3.TextButton
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
+import com.google.accompanist.permissions.ExperimentalPermissionsApi
+import com.google.accompanist.permissions.PermissionState
+import com.google.accompanist.permissions.shouldShowRationale
+import com.imashnake.aigo.R
+
+private const val RATIONALE = "The app needs to see the Go board to digitize it. Please grant camera permission."
+private const val REQUEST = "Camera permission is required for this feature."
+
+@OptIn(ExperimentalPermissionsApi::class)
+@Composable
+fun CameraPermissionDialog(
+    permissionState: PermissionState,
+    onDismiss: () -> Unit,
+    launchRequest: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    AlertDialog(
+        onDismissRequest = onDismiss,
+        confirmButton = {
+            if (permissionState.status.shouldShowRationale) {
+                TextButton(onClick = { onDismiss(); launchRequest() }) {
+                    Text("Grant")
+                }
+            }
+        },
+        modifier = modifier,
+        dismissButton = {
+            TextButton(onClick = onDismiss) {
+                Text("Close")
+            }
+        },
+        icon = {
+            Icon(
+                painter = painterResource(R.drawable.photo_camera),
+                contentDescription = "Camera Permission",
+            )
+        },
+        title = { Text("Camera Permission") },
+        text = {
+            Text(
+                if (permissionState.status.shouldShowRationale) {
+                    RATIONALE
+                } else REQUEST
+            )
+        }
+    )
+}

android/app/src/main/java/com/imashnake/aigo/ui/features/Home.kt

@@ -0,0 +1,33 @@
+package com.imashnake.aigo.ui.features
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import com.imashnake.aigo.R
+import com.imashnake.aigo.ui.components.AigoIconTextButton
+import kotlinx.serialization.Serializable
+
+@Composable
+fun Home(
+    modifier: Modifier = Modifier,
+    takePicture: () -> Unit,
+) {
+    Column(
+        modifier = modifier.fillMaxSize(),
+        verticalArrangement = Arrangement.Center,
+        horizontalAlignment = Alignment.CenterHorizontally,
+    ) {
+        AigoIconTextButton(
+            drawable = R.drawable.photo_camera,
+            text = "Take Picture",
+            onClick = takePicture
+        )
+        AigoIconTextButton(R.drawable.round_image, "Pick Image")
+    }
+}
+
+@Serializable
+data object Home

android/app/src/main/res/drawable/blank_go_board.xml

@@ -0,0 +1,13 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android" android:alpha="0.69" android:height="960dp" android:viewportHeight="96" android:viewportWidth="96" android:width="960dp">
+
+    <path android:fillColor="#DCB35C" android:pathData="M0,0h96v96h-96z"/>
+
+    <path android:fillColor="#00000000" android:pathData="M3,3h90v90h-90z" android:strokeColor="#000" android:strokeWidth=".2"/>
+
+    <path android:fillColor="#00000000" android:pathData="m3,8h90m0,5h-90m0,5h90m0,5h-90m0,5h90m0,5h-90m0,5h90m0,5h-90m0,5h90m0,5h-90m0,5h90m0,5h-90m0,5h90m0,5h-90m0,5h90m0,5h-90m0,5h90" android:strokeColor="#000" android:strokeWidth=".2"/>
+
+    <path android:fillColor="#00000000" android:pathData="m8,3v90m5,0v-90m5,0v90m5,0v-90m5,0v90m5,0v-90m5,0v90m5,0v-90m5,0v90m5,0v-90m5,0v90m5,0v-90m5,0v90m5,0v-90m5,0v90m5,0v-90m5,0v90" android:strokeColor="#000" android:strokeWidth=".2"/>
+
+    <path android:fillColor="#FF000000" android:pathData="m18,78l0,0m30,0l0,0m30,0l0,0m0,-30l0,0m-30,0l0,0m-30,0l0,0m0,-30l0,0m30,0l0,0m30,0l0,0" android:strokeColor="#000" android:strokeLineCap="round" android:strokeWidth=".8"/>
+
+</vector>

android/app/src/main/res/drawable/photo_camera.xml

@@ -0,0 +1,7 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android" android:height="24dp" android:tint="#000000" android:viewportHeight="24" android:viewportWidth="24" android:width="24dp">
+
+    <path android:fillColor="@android:color/white" android:pathData="M12,12m-3.2,0a3.2,3.2 0,1 1,6.4 0a3.2,3.2 0,1 1,-6.4 0"/>
+
+    <path android:fillColor="@android:color/white" android:pathData="M9,2L7.17,4L4,4c-1.1,0 -2,0.9 -2,2v12c0,1.1 0.9,2 2,2h16c1.1,0 2,-0.9 2,-2L22,6c0,-1.1 -0.9,-2 -2,-2h-3.17L15,2L9,2zM12,17c-2.76,0 -5,-2.24 -5,-5s2.24,-5 5,-5 5,2.24 5,5 -2.24,5 -5,5z"/>
+
+</vector>

android/app/src/main/res/drawable/round_image.xml

@@ -0,0 +1,5 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android" android:height="24dp" android:tint="#000000" android:viewportHeight="24" android:viewportWidth="24" android:width="24dp">
+
+    <path android:fillColor="@android:color/white" android:pathData="M21,19V5c0,-1.1 -0.9,-2 -2,-2H5c-1.1,0 -2,0.9 -2,2v14c0,1.1 0.9,2 2,2h14c1.1,0 2,-0.9 2,-2zM8.9,13.98l2.1,2.53 3.1,-3.99c0.2,-0.26 0.6,-0.26 0.8,0.01l3.51,4.68c0.25,0.33 0.01,0.8 -0.4,0.8H6.02c-0.42,0 -0.65,-0.48 -0.39,-0.81L8.12,14c0.19,-0.26 0.57,-0.27 0.78,-0.02z"/>
+
+</vector>

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

@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
-    <style name="Theme.Aigo" parent="android:Theme.Material.Light.NoActionBar" />
+    <style name="Theme.Aigo" parent="android:Theme.Material.NoActionBar" />
 </resources>