Improve compose setup & styling further, and convert QR code too

pimterry · pimterry · commit e41e0ead7a17 · 2025-10-31T15:02:20.000+01:00
diff --git a/app/build.gradle.kts b/app/build.gradle.kts
@@ -70,6 +70,7 @@ dependencies {
     implementation(libs.compose.material.icons.extended)
     implementation(libs.activity.compose)
     implementation(libs.accompanist.drawablepainter)
+    implementation(libs.foundation)
     debugImplementation(libs.compose.ui.tooling)
     implementation(libs.core.ktx)
     implementation(libs.constraintlayout)
diff --git a/app/src/main/AndroidManifest.xml b/app/src/main/AndroidManifest.xml
@@ -101,7 +101,7 @@
             </intent-filter>
         </activity-alias>
 
-        <activity android:name=".QRScanActivity" android:parentActivityName=".MainActivity">
+        <activity android:name=".qrscan.QRScanActivity" android:parentActivityName=".MainActivity">
             <meta-data
                 android:name="android.support.PARENT_ACTIVITY"
                 android:value=".MainActivity" />
diff --git a/app/src/main/java/tech/httptoolkit/android/MainActivity.kt b/app/src/main/java/tech/httptoolkit/android/MainActivity.kt
@@ -43,6 +43,7 @@ import androidx.core.view.isVisible
 import androidx.core.net.toUri
 import tech.httptoolkit.android.appselection.ApplicationListActivity
 import tech.httptoolkit.android.portfilter.PortListActivity
+import tech.httptoolkit.android.qrscan.QRScanActivity
 
 
 const val START_VPN_REQUEST = 123
diff --git a/app/src/main/java/tech/httptoolkit/android/QRScanActivity.kt b/app/src/main/java/tech/httptoolkit/android/QRScanActivity.kt
diff --git a/app/src/main/java/tech/httptoolkit/android/appselection/AppListScreen.kt b/app/src/main/java/tech/httptoolkit/android/appselection/AppListScreen.kt
@@ -17,6 +17,7 @@ import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.zIndex
 import com.google.accompanist.drawablepainter.rememberDrawablePainter
 import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.withContext
@@ -76,8 +77,10 @@ fun AppListScreen(
         Card(
             modifier = Modifier
                 .fillMaxWidth()
-                .padding(vertical = 8.dp),
-            elevation = CardDefaults.cardElevation(defaultElevation = 4.dp)
+                .padding(top = 8.dp)
+                .zIndex(1f),
+            elevation = CardDefaults.cardElevation(defaultElevation = 4.dp),
+            colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.surface)
         ) {
             Row(
                 modifier = Modifier
@@ -94,8 +97,8 @@ fun AppListScreen(
                         .padding(vertical = 8.dp),
                     singleLine = true,
                     colors = TextFieldDefaults.colors(
-                        focusedContainerColor = MaterialTheme.colorScheme.surfaceVariant,
-                        unfocusedContainerColor = MaterialTheme.colorScheme.surfaceVariant,
+                        focusedContainerColor = MaterialTheme.colorScheme.surface,
+                        unfocusedContainerColor = MaterialTheme.colorScheme.surface,
                         focusedIndicatorColor = androidx.compose.ui.graphics.Color.Transparent,
                         unfocusedIndicatorColor = androidx.compose.ui.graphics.Color.Transparent
                     )
@@ -224,12 +227,13 @@ fun AppListItem(
     Card(
         modifier = modifier
             .fillMaxWidth()
-            .padding(vertical = 4.dp, horizontal = 8.dp)
+            .padding(vertical = 4.dp, horizontal = 8.dp),
+        colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.surface)
     ) {
         Row(
             modifier = Modifier
                 .fillMaxWidth()
-                .padding(8.dp),
+                .padding(vertical = 8.dp, horizontal = 16.dp),
             verticalAlignment = Alignment.CenterVertically
         ) {
             // App icon
@@ -238,14 +242,14 @@ fun AppListItem(
                 contentDescription = "App icon for $appLabel",
                 modifier = Modifier
                     .size(72.dp)
-                    .padding(8.dp)
+                    .padding(vertical = 8.dp)
             )
 
             // App name and package
             Column(
                 modifier = Modifier
                     .weight(1f)
-                    .padding(horizontal = 16.dp)
+                    .padding(horizontal = 8.dp)
             ) {
                 Text(
                     text = appLabel,
@@ -264,7 +268,9 @@ fun AppListItem(
             // Enable/disable switch
             Switch(
                 checked = isEnabled,
-                onCheckedChange = onEnabledChange
+                onCheckedChange = onEnabledChange,
+                modifier = Modifier
+                    .padding(end = 8.dp)
             )
         }
     }
diff --git a/app/src/main/java/tech/httptoolkit/android/portfilter/PortListScreen.kt b/app/src/main/java/tech/httptoolkit/android/portfilter/PortListScreen.kt
@@ -1,5 +1,6 @@
 package tech.httptoolkit.android.portfilter
 
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
@@ -18,6 +19,7 @@ import androidx.compose.ui.text.input.ImeAction
 import androidx.compose.ui.text.input.KeyboardType
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.zIndex
 import tech.httptoolkit.android.R
 
 @Composable
@@ -58,6 +60,7 @@ fun PortListScreen(
             .fillMaxSize()
             .windowInsetsPadding(WindowInsets.statusBars.only(WindowInsetsSides.Top))
             .padding(horizontal = 16.dp)
+            .background(MaterialTheme.colorScheme.background),
     ) {
         // Explanation text
         Text(
@@ -71,8 +74,10 @@ fun PortListScreen(
         Card(
             modifier = Modifier
                 .fillMaxWidth()
-                .padding(vertical = 8.dp),
-            elevation = CardDefaults.cardElevation(defaultElevation = 4.dp)
+                .padding(top = 8.dp)
+                .zIndex(1f),
+            elevation = CardDefaults.cardElevation(defaultElevation = 4.dp),
+            colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.surface)
         ) {
             Row(
                 modifier = Modifier
@@ -96,8 +101,8 @@ fun PortListScreen(
                         .padding(vertical = 8.dp),
                     singleLine = true,
                     colors = TextFieldDefaults.colors(
-                        focusedContainerColor = MaterialTheme.colorScheme.surfaceVariant,
-                        unfocusedContainerColor = MaterialTheme.colorScheme.surfaceVariant,
+                        focusedContainerColor = MaterialTheme.colorScheme.surface,
+                        unfocusedContainerColor = MaterialTheme.colorScheme.surface,
                         focusedIndicatorColor = androidx.compose.ui.graphics.Color.Transparent,
                         unfocusedIndicatorColor = androidx.compose.ui.graphics.Color.Transparent
                     )
@@ -169,7 +174,8 @@ fun PortItem(
     Card(
         modifier = modifier
             .fillMaxWidth()
-            .padding(vertical = 4.dp, horizontal = 8.dp)
+            .padding(vertical = 4.dp, horizontal = 8.dp),
+        colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.surface)
     ) {
         Row(
             modifier = Modifier
diff --git a/app/src/main/java/tech/httptoolkit/android/qrscan/QRScanActivity.kt b/app/src/main/java/tech/httptoolkit/android/qrscan/QRScanActivity.kt
@@ -0,0 +1,31 @@
+package tech.httptoolkit.android.qrscan
+
+import android.content.Intent
+import android.os.Bundle
+import androidx.activity.ComponentActivity
+import androidx.activity.compose.setContent
+import androidx.activity.enableEdgeToEdge
+import tech.httptoolkit.android.IntentExtras
+import tech.httptoolkit.android.ui.HttpToolkitTheme
+
+class QRScanActivity : ComponentActivity() {
+
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        enableEdgeToEdge()
+
+        setContent {
+            HttpToolkitTheme {
+                QRScanScreen(
+                    onQRCodeScanned = { scannedUrl ->
+                        setResult(RESULT_OK, Intent().putExtra(
+                            IntentExtras.SCANNED_URL_EXTRA,
+                            scannedUrl
+                        ))
+                        finish()
+                    }
+                )
+            }
+        }
+    }
+}
diff --git a/app/src/main/java/tech/httptoolkit/android/qrscan/QRScanScreen.kt b/app/src/main/java/tech/httptoolkit/android/qrscan/QRScanScreen.kt
@@ -0,0 +1,58 @@
+package tech.httptoolkit.android.qrscan
+
+import android.util.Log
+import androidx.compose.foundation.layout.*
+import androidx.compose.runtime.*
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.viewinterop.AndroidView
+import com.google.zxing.BarcodeFormat
+import com.google.zxing.ResultPoint
+import com.journeyapps.barcodescanner.BarcodeCallback
+import com.journeyapps.barcodescanner.BarcodeResult
+import com.journeyapps.barcodescanner.DecoratedBarcodeView
+import com.journeyapps.barcodescanner.DefaultDecoderFactory
+
+@Composable
+fun QRScanScreen(
+    onQRCodeScanned: (String) -> Unit,
+    modifier: Modifier = Modifier
+) {
+    AndroidView(
+        factory = { context ->
+            var lastScannedText: String? = null
+
+            DecoratedBarcodeView(context).apply {
+                barcodeView.decoderFactory = DefaultDecoderFactory(listOf(BarcodeFormat.QR_CODE))
+                setStatusText("Scan HTTP Toolkit QR code to connect")
+
+                val callback = object : BarcodeCallback {
+                    override fun barcodeResult(result: BarcodeResult) {
+                        val resultText = result.text
+                        if (resultText == null || resultText == lastScannedText) {
+                            // Prevent duplicate scans
+                            return
+                        }
+
+                        lastScannedText = resultText
+                        Log.i("QRScanScreen", "Scanned: $resultText")
+
+                        if (resultText.startsWith("https://android.httptoolkit.tech/connect/")) {
+                            onQRCodeScanned(resultText)
+                        }
+                    }
+
+                    override fun possibleResultPoints(resultPoints: MutableList<ResultPoint?>?) {
+                        // Not needed
+                    }
+                }
+
+                decodeContinuous(callback)
+                resume()
+            }
+        },
+        modifier = modifier.fillMaxSize(),
+        onRelease = { barcodeView ->
+            barcodeView.pause()
+        }
+    )
+}
diff --git a/app/src/main/java/tech/httptoolkit/android/ui/AppTheme.kt b/app/src/main/java/tech/httptoolkit/android/ui/AppTheme.kt
@@ -1,41 +1,33 @@
 package tech.httptoolkit.android.ui
 
-import android.os.Build
 import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.material3.*
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.platform.LocalContext
 
-// Light theme colors from values/colors.xml
 private val LightColors = lightColorScheme(
     primary = Color(0xFF2D4CBD),
     onPrimary = Color(0xFFFFFFFF),
     secondary = Color(0xFFE1421F),
     onSecondary = Color(0xFFFFFFFF),
-    background = Color(0xFFFAFAFA),
+    background = Color(0xFFE4E8ED), // Background = 'container' in UI themes
     onBackground = Color(0xFF1E2028),
-    surface = Color(0xFFE4E8ED),
+    surface = Color(0xFFFAFAFA), // Surface = 'main' in UI themes
     onSurface = Color(0xFF1E2028),
-    surfaceVariant = Color(0xFFFAFAFA),
-    onSurfaceVariant = Color(0xFF1E2028),
     outline = Color(0xFF818490),
     error = Color(0xFFE1421F),
     onError = Color(0xFFFFFFFF)
 )
 
-// Dark theme colors from values-night/colors.xml
 private val DarkColors = darkColorScheme(
     primary = Color(0xFF2D4CBD),
     onPrimary = Color(0xFFFFFFFF),
     secondary = Color(0xFFE1421F),
     onSecondary = Color(0xFFFFFFFF),
-    background = Color(0xFF32343B),
+    background = Color(0xFF1E2028),
     onBackground = Color(0xFFFFFFFF),
-    surface = Color(0xFF1E2028),
+    surface = Color(0xFF32343B),
     onSurface = Color(0xFFFFFFFF),
-    surfaceVariant = Color(0xFF32343B),
-    onSurfaceVariant = Color(0xFFFFFFFF),
     outline = Color(0xFF9A9DA8),
     error = Color(0xFFE1421F),
     onError = Color(0xFFFFFFFF)
@@ -48,20 +40,8 @@ fun HttpToolkitTheme(
 ) {
     val colorScheme = if (darkTheme) DarkColors else LightColors
 
-    // Use dynamic color on Android 12+ if desired, but fallback to our custom colors
-    val finalColorScheme = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) {
-        val context = LocalContext.current
-        if (darkTheme) {
-            dynamicDarkColorScheme(context)
-        } else {
-            dynamicLightColorScheme(context)
-        }
-    } else {
-        colorScheme
-    }
-
     MaterialTheme(
-        colorScheme = colorScheme, // Use our custom colors, not dynamic
+        colorScheme = colorScheme,
         typography = Typography(),
         content = content
     )
diff --git a/app/src/main/res/layout/qr_scan_activity.xml b/app/src/main/res/layout/qr_scan_activity.xml
diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml
