android/ui: add AboutView

Adds an AboutView with app icon and same content as the iOS version.

android/src/main/java/com/tailscale/ipn/ui/view/AboutView.kt

@@ -0,0 +1,115 @@
+package com.tailscale.ipn.ui.view
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.safeContentPadding
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.LocalUriHandler
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.dp
+import com.tailscale.ipn.BuildConfig
+import com.tailscale.ipn.R
+
+@Composable
+fun AboutView() {
+    Surface(color = MaterialTheme.colorScheme.surface) {
+        Column(
+            verticalArrangement = Arrangement.spacedBy(
+                space = 20.dp, alignment = Alignment.CenterVertically
+            ),
+            horizontalAlignment = Alignment.CenterHorizontally,
+            modifier = Modifier
+                .fillMaxWidth()
+                .fillMaxHeight()
+                .safeContentPadding()
+        ) {
+            Image(
+                modifier = Modifier
+                    .width(100.dp)
+                    .height(100.dp)
+                    .clip(RoundedCornerShape(50))
+                    .background(Color.Black)
+                    .padding(15.dp),
+                painter = painterResource(id = R.drawable.ic_tile),
+                contentDescription = stringResource(R.string.app_icon_content_description)
+            )
+            Column(
+                verticalArrangement = Arrangement.spacedBy(
+                    space = 2.dp, alignment = Alignment.CenterVertically
+                ), horizontalAlignment = Alignment.CenterHorizontally
+            ) {
+                Text(
+                    stringResource(R.string.about_view_title),
+                    fontWeight = FontWeight.SemiBold,
+                    fontSize = MaterialTheme.typography.titleLarge.fontSize,
+                    color = MaterialTheme.colorScheme.primary
+                )
+                Text(
+                    text = BuildConfig.VERSION_NAME,
+                    fontWeight = MaterialTheme.typography.bodyMedium.fontWeight,
+                    fontSize = MaterialTheme.typography.bodyMedium.fontSize,
+                    color = MaterialTheme.colorScheme.secondary
+                )
+            }
+            Column(
+                verticalArrangement = Arrangement.spacedBy(
+                    space = 4.dp, alignment = Alignment.CenterVertically
+                ), horizontalAlignment = Alignment.CenterHorizontally
+            ) {
+                OpenURLButton(
+                    stringResource(R.string.acknowledgements),"https://tailscale.com/licenses/android"
+                )
+                OpenURLButton(
+                    stringResource(R.string.privacy_policy), "https://tailscale.com/privacy-policy/"
+                )
+                OpenURLButton(
+                    stringResource(R.string.terms_of_service), "https://tailscale.com/terms"
+                )
+            }
+
+            Text(
+                stringResource(R.string.about_view_footnotes),
+                fontWeight = FontWeight.Normal,
+                fontSize = MaterialTheme.typography.labelMedium.fontSize,
+                color = MaterialTheme.colorScheme.tertiary,
+                textAlign = TextAlign.Center
+            )
+        }
+    }
+}
+
+@Composable
+fun OpenURLButton(title: String, url: String) {
+    val handler = LocalUriHandler.current
+
+    Button(
+        onClick = { handler.openUri(url) },
+        content = {
+            Text(title)
+        },
+        colors = ButtonDefaults.buttonColors(
+            contentColor = MaterialTheme.colorScheme.secondary,
+            containerColor = MaterialTheme.colorScheme.secondaryContainer
+        )
+    )
+}

android/src/main/java/com/tailscale/ipn/ui/view/SettingsView.kt

@@ -132,9 +132,4 @@ fun SettingsSwitchRow(setting: Setting) {
 @Composable
 fun BugReportView() {
     Text(text = "Future Home of Bug Reporting")
-}
-
-@Composable
-fun AboutView() {
-    Text(text = "Future Home of About")
-}
+}

android/src/main/res/values/strings.xml

@@ -2,4 +2,10 @@
 <resources>
     <string name="app_name">Tailscale</string>
     <string name="tile_name">Tailscale</string>
+    <string name="about_view_title">Tailscale for Android</string>
+    <string name="acknowledgements">Acknowledgements</string>
+    <string name="privacy_policy">Privacy Policy</string>
+    <string name="terms_of_service">Terms of Service</string>
+    <string name="about_view_footnotes">WireGuard is a registered trademark of Jason A. Donenfeld.\n\n© 2024 Tailscale Inc. All rights reserved.\nTailscale is a registered trademark of Tailscale Inc.</string>
+    <string name="app_icon_content_description">The Tailscale App Icon</string>
 </resources>