Android - Text classification - New color & logo

examples/text_classification/android/app/src/main/java/com/google/aiedge/examples/textclassification/MainActivity.kt

@@ -24,15 +24,14 @@ import androidx.compose.foundation.Image
 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.layout.width
 import androidx.compose.material3.BottomSheetScaffold
 import androidx.compose.material3.Button
 import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.RadioButton
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextField
@@ -46,17 +45,17 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.painter.ColorPainter
+import androidx.compose.ui.graphics.ColorFilter
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalFocusManager
 import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import androidx.lifecycle.viewmodel.compose.viewModel
-import com.google.aiedge.examples.textclassification.R
+import com.google.aiedge.examples.textclassification.ui.ApplicationTheme
 
 class MainActivity : ComponentActivity() {
     override fun onCreate(savedInstanceState: Bundle?) {
@@ -88,60 +87,57 @@ fun AudioClassificationScreen(
         }
     }
 
-    BottomSheetScaffold(
-        sheetDragHandle = {
-            Image(
-                modifier = Modifier
-                    .size(40.dp)
-                    .padding(top = 2.dp, bottom = 5.dp),
-                painter = painterResource(id = R.drawable.ic_chevron_up),
-                contentDescription = ""
-            )
-        },
-        sheetPeekHeight = 70.dp,
-        topBar = {
-            Header()
-        },
-        sheetContent = {
-            BottomSheetContent(
-                inferenceTime = uiState.inferenceTime,
-                onModelSelected = {
-                    viewModel.setModel(it)
-                },
-            )
-        }) {
-        ClassificationBody(
-            positivePercentage = uiState.positivePercentage,
-            negativePercentage = uiState.negativePercentage,
-            onSubmitted = {
-                if (it.isNotBlank()) {
-                    viewModel.runClassification(it)
-                }
-            })
+    ApplicationTheme {
+        BottomSheetScaffold(
+            sheetDragHandle = {
+                Image(
+                    modifier = Modifier
+                        .size(40.dp)
+                        .padding(top = 2.dp, bottom = 5.dp),
+                    painter = painterResource(id = R.drawable.ic_chevron_up),
+                    colorFilter = ColorFilter.tint(MaterialTheme.colorScheme.secondary),
+                    contentDescription = ""
+                )
+            },
+            sheetPeekHeight = 70.dp,
+            topBar = {
+                Header()
+            },
+            sheetContent = {
+                BottomSheetContent(
+                    inferenceTime = uiState.inferenceTime,
+                    onModelSelected = {
+                        viewModel.setModel(it)
+                    },
+                )
+            }) {
+            ClassificationBody(
+                positivePercentage = uiState.positivePercentage,
+                negativePercentage = uiState.negativePercentage,
+                onSubmitted = {
+                    if (it.isNotBlank()) {
+                        viewModel.runClassification(it)
+                    }
+                })
+        }
     }
 }
 
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
-fun Header(modifier: Modifier = Modifier) {
+fun Header() {
     TopAppBar(
         colors = TopAppBarDefaults.topAppBarColors(
-            containerColor = Color.LightGray,
+            containerColor = MaterialTheme.colorScheme.secondary,
         ),
         title = {
-            Row(
-                modifier = Modifier.fillMaxSize(),
-                verticalAlignment = Alignment.CenterVertically,
-            ) {
-                Image(
-                    modifier = Modifier.size(50.dp),
-                    painter = ColorPainter(color = Color.White),
-                    contentDescription = null,
-                )
-                Spacer(modifier = modifier.width(10.dp))
-                Text(text = "LiteRT", color = Color.Blue, fontWeight = FontWeight.SemiBold)
-            }
+            Image(
+                modifier = Modifier.size(120.dp),
+                alignment = Alignment.CenterStart,
+                painter = painterResource(id = R.drawable.logo),
+                contentDescription = null,
+            )
         },
     )
 }
@@ -154,8 +150,15 @@ fun BottomSheetContent(
 ) {
     Column(modifier = modifier.padding(horizontal = 20.dp, vertical = 5.dp)) {
         Row {
-            Text(modifier = Modifier.weight(0.5f), text = "Inference Time", fontSize = 16.sp)
-            Text(text = "$inferenceTime ms", fontSize = 16.sp)
+            Text(
+                modifier = Modifier.weight(0.5f),
+                text = stringResource(id = R.string.inference_title),
+                fontSize = 16.sp
+            )
+            Text(
+                text = stringResource(id = R.string.inference_value, inferenceTime),
+                fontSize = 16.sp
+            )
         }
         Spacer(modifier = Modifier.height(20.dp))
         ModelSelection(
@@ -184,19 +187,25 @@ fun ClassificationBody(
             onValueChange = {
                 text = it
             }, placeholder = {
-                Text(text = "Enter text to classify")
+                Text(text = stringResource(id = R.string.text_field_place_holder))
             })
         Spacer(modifier = Modifier.height(10.dp))
         Button(
             onClick = {
                 focusManager.clearFocus()
                 onSubmitted(text)
             }) {
-            Text(text = "Classify")
+            Text(text = stringResource(id = R.string.classify))
         }
         Spacer(modifier = Modifier.height(20.dp))
-        Text(text = "Positive: ($positivePercentage)", fontWeight = FontWeight.Bold)
-        Text(text = "Negative: ($negativePercentage)", fontWeight = FontWeight.Bold)
+        Text(
+            text = stringResource(id = R.string.positive, positivePercentage),
+            fontWeight = FontWeight.Bold
+        )
+        Text(
+            text = stringResource(id = R.string.negative, negativePercentage),
+            fontWeight = FontWeight.Bold
+        )
     }
 }
 

examples/text_classification/android/app/src/main/java/com/google/aiedge/examples/textclassification/ui/Color.kt

@@ -0,0 +1,7 @@
+package com.google.aiedge.examples.textclassification.ui
+
+import androidx.compose.ui.graphics.Color
+
+val darkBlue = Color(0xFF020f59)
+val teal = Color(0xFF00c99e)
+val cyan = Color(0xFF5be3e3)

examples/text_classification/android/app/src/main/java/com/google/aiedge/examples/textclassification/ui/Theme.kt

@@ -0,0 +1,21 @@
+package com.google.aiedge.examples.textclassification.ui
+
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.lightColorScheme
+import androidx.compose.runtime.Composable
+
+private val colorScheme = lightColorScheme(
+    primary = darkBlue,
+    secondary = teal,
+    onSurfaceVariant = teal,
+)
+
+@Composable
+fun ApplicationTheme(
+    content: @Composable () -> Unit
+) {
+    MaterialTheme(
+        colorScheme = colorScheme,
+        content = content
+    )
+}