From ba24685128dc80282f767280bd0fd2fb57dc81e5 Mon Sep 17 00:00:00 2001
From: Thomas Ezan <tezan.enssat@gmail.com>
Date: Wed, 10 Sep 2025 17:07:03 -0700
Subject: [PATCH 1/2] Add collapsable top bar

---
 .../com/android/ai/catalog/ui/CatalogApp.kt   | 52 +++++++++++++++++--
 .../app/src/main/res/values/strings.xml       |  1 +
 2 files changed, 48 insertions(+), 5 deletions(-)

diff --git a/ai-catalog/app/src/main/java/com/android/ai/catalog/ui/CatalogApp.kt b/ai-catalog/app/src/main/java/com/android/ai/catalog/ui/CatalogApp.kt
index 9b0cc372..e5e646e9 100644
--- a/ai-catalog/app/src/main/java/com/android/ai/catalog/ui/CatalogApp.kt
+++ b/ai-catalog/app/src/main/java/com/android/ai/catalog/ui/CatalogApp.kt
@@ -18,37 +18,55 @@ package com.android.ai.catalog.ui
 import android.content.Intent
 import android.util.Log
 import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+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.width
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.AlertDialog
 import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
+import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextButton
 import androidx.compose.material3.TopAppBar
 import androidx.compose.material3.TopAppBarDefaults
+import androidx.compose.material3.TwoRowsTopAppBar
+import androidx.compose.material3.rememberTopAppBarState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.input.nestedscroll.nestedScroll
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.dp
 import androidx.core.net.toUri
 import androidx.navigation.compose.NavHost
 import androidx.navigation.compose.composable
 import androidx.navigation.compose.rememberNavController
 import com.android.ai.catalog.R
 import com.android.ai.catalog.domain.sampleCatalog
+import com.android.ai.uicomponent.PrimaryButton
 import com.google.firebase.FirebaseApp
 import kotlinx.serialization.Serializable
 
-@OptIn(ExperimentalMaterial3Api::class)
+@OptIn(ExperimentalMaterial3Api::class, ExperimentalMaterial3ExpressiveApi::class)
 @Composable
 fun CatalogApp(modifier: Modifier = Modifier) {
     val context = LocalContext.current
@@ -60,19 +78,43 @@ fun CatalogApp(modifier: Modifier = Modifier) {
         startDestination = HomeScreen,
     ) {
         composable<HomeScreen> {
+            val topAppBarState = rememberTopAppBarState()
+            val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior(topAppBarState)
             Scaffold(
+                modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
                 topBar = {
-                    TopAppBar(
+                    TwoRowsTopAppBar(
                         colors = TopAppBarDefaults.topAppBarColors(
+                            containerColor = Color.Transparent,
+                            scrolledContainerColor = MaterialTheme.colorScheme.surface,
                             titleContentColor = MaterialTheme.colorScheme.primary,
                         ),
-                        title = {
+                        title = { expanded ->
+                            if (expanded) {
+                                Row (
+                                    modifier = Modifier.height(40.dp).width(58.dp).background(
+                                        color = MaterialTheme.colorScheme.primary,
+                                        shape = RoundedCornerShape(24.dp)
+                                    )
+                                ) {
+                                    Icon(
+                                        painter = painterResource(com.android.ai.uicomponent.R.drawable.ic_spark),
+                                        contentDescription = null,
+                                        modifier = Modifier.padding(10.dp),
+                                        tint = MaterialTheme.colorScheme.onPrimary,
+                                    )
+                                }
+                                Spacer(modifier = Modifier.height(12.dp))
+                            }
                             Text(
-                                text = stringResource(id = R.string.top_bar_title),
-                                style = MaterialTheme.typography.titleLarge,
+                                text = stringResource(id = if (expanded) R.string.top_bar_title_expanded else R.string.top_bar_title),
+                                style = if (expanded) MaterialTheme.typography.displaySmall else MaterialTheme.typography.headlineMedium,
                                 color = MaterialTheme.colorScheme.onSurface,
+                                maxLines = if (expanded) 2 else 1,
+                                modifier = Modifier.padding(bottom = 12.dp)
                             )
                         },
+                        scrollBehavior = scrollBehavior
                     )
                 },
             ) { innerPadding ->
diff --git a/ai-catalog/app/src/main/res/values/strings.xml b/ai-catalog/app/src/main/res/values/strings.xml
index 49370110..b9b32aaa 100644
--- a/ai-catalog/app/src/main/res/values/strings.xml
+++ b/ai-catalog/app/src/main/res/values/strings.xml
@@ -11,6 +11,7 @@
     <string name="genai_writing_assistance_sample_title">Polish text with Gemini Nano</string>
     <string name="genai_writing_assistance_sample_description">Proofread and rewrite short content on-device with GenAI API powered by Gemini Nano</string>
     <string name="top_bar_title">Android AI Samples</string>
+    <string name="top_bar_title_expanded">Android\nAI Samples</string>
     <string name="open_sample_button">Open sample</string>
     <string name="imagen_sample_title">Image generation with Imagen</string>
     <string name="imagen_sample_description">Generate images with Imagen, Google image generation model</string>

From 13ad23a691f3e436f0238eea68df642248445779 Mon Sep 17 00:00:00 2001
From: Thomas Ezan <tezan.enssat@gmail.com>
Date: Thu, 11 Sep 2025 11:06:25 -0700
Subject: [PATCH 2/2] Update expanded states and pill icon

---
 .../com/android/ai/catalog/ui/CatalogApp.kt   | 66 ++++++++++++-------
 .../src/main/res/drawable/spark_android.xml   | 10 +++
 2 files changed, 52 insertions(+), 24 deletions(-)
 create mode 100644 ai-catalog/app/src/main/res/drawable/spark_android.xml

diff --git a/ai-catalog/app/src/main/java/com/android/ai/catalog/ui/CatalogApp.kt b/ai-catalog/app/src/main/java/com/android/ai/catalog/ui/CatalogApp.kt
index e5e646e9..cbdbb720 100644
--- a/ai-catalog/app/src/main/java/com/android/ai/catalog/ui/CatalogApp.kt
+++ b/ai-catalog/app/src/main/java/com/android/ai/catalog/ui/CatalogApp.kt
@@ -19,11 +19,9 @@ import android.content.Intent
 import android.util.Log
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.Box
 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.width
@@ -38,7 +36,6 @@ import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextButton
-import androidx.compose.material3.TopAppBar
 import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.material3.TwoRowsTopAppBar
 import androidx.compose.material3.rememberTopAppBarState
@@ -47,8 +44,8 @@ import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
+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.input.nestedscroll.nestedScroll
 import androidx.compose.ui.layout.ContentScale
@@ -62,7 +59,6 @@ import androidx.navigation.compose.composable
 import androidx.navigation.compose.rememberNavController
 import com.android.ai.catalog.R
 import com.android.ai.catalog.domain.sampleCatalog
-import com.android.ai.uicomponent.PrimaryButton
 import com.google.firebase.FirebaseApp
 import kotlinx.serialization.Serializable
 
@@ -91,28 +87,29 @@ fun CatalogApp(modifier: Modifier = Modifier) {
                         ),
                         title = { expanded ->
                             if (expanded) {
-                                Row (
-                                    modifier = Modifier.height(40.dp).width(58.dp).background(
-                                        color = MaterialTheme.colorScheme.primary,
-                                        shape = RoundedCornerShape(24.dp)
-                                    )
-                                ) {
-                                    Icon(
-                                        painter = painterResource(com.android.ai.uicomponent.R.drawable.ic_spark),
-                                        contentDescription = null,
-                                        modifier = Modifier.padding(10.dp),
-                                        tint = MaterialTheme.colorScheme.onPrimary,
+                                AppBarPill()
+                                Spacer(modifier = Modifier.height(12.dp))
+                                Text(
+                                    text = stringResource(id = R.string.top_bar_title_expanded),
+                                    style = MaterialTheme.typography.displaySmall,
+                                    color = MaterialTheme.colorScheme.onSurface,
+                                    maxLines = 2,
+                                    modifier = Modifier.padding(bottom = 12.dp)
+                                )
+                            } else {
+                                Row {
+                                    AppBarPill()
+                                    Spacer(modifier = Modifier.width(12.dp))
+                                    Text(
+                                        text = stringResource(id = R.string.top_bar_title),
+                                        style = MaterialTheme.typography.titleLarge,
+                                        color = MaterialTheme.colorScheme.onSurface,
+                                        maxLines = 1,
+                                        modifier = Modifier.align(Alignment.CenterVertically)
                                     )
                                 }
-                                Spacer(modifier = Modifier.height(12.dp))
                             }
-                            Text(
-                                text = stringResource(id = if (expanded) R.string.top_bar_title_expanded else R.string.top_bar_title),
-                                style = if (expanded) MaterialTheme.typography.displaySmall else MaterialTheme.typography.headlineMedium,
-                                color = MaterialTheme.colorScheme.onSurface,
-                                maxLines = if (expanded) 2 else 1,
-                                modifier = Modifier.padding(bottom = 12.dp)
-                            )
+
                         },
                         scrollBehavior = scrollBehavior
                     )
@@ -170,6 +167,27 @@ fun CatalogApp(modifier: Modifier = Modifier) {
 @Serializable
 object HomeScreen
 
+
+@Composable
+fun AppBarPill() {
+    Row(
+        modifier = Modifier
+            .height(40.dp)
+            .width(58.dp)
+            .background(
+                color = MaterialTheme.colorScheme.primary,
+                shape = RoundedCornerShape(24.dp),
+            ),
+    ) {
+        Icon(
+            painter = painterResource(R.drawable.spark_android),
+            contentDescription = null,
+            modifier = Modifier.padding(10.dp),
+            tint = MaterialTheme.colorScheme.onPrimary,
+        )
+    }
+}
+
 @Composable
 fun FirebaseRequiredAlert(onDismiss: () -> Unit = {}, onOpenFirebaseDocClick: () -> Unit = {}) {
     AlertDialog(
diff --git a/ai-catalog/app/src/main/res/drawable/spark_android.xml b/ai-catalog/app/src/main/res/drawable/spark_android.xml
new file mode 100644
index 00000000..4a3344de
--- /dev/null
+++ b/ai-catalog/app/src/main/res/drawable/spark_android.xml
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="45dp"
+    android:height="21dp"
+    android:viewportWidth="45"
+    android:viewportHeight="21">
+    <path
+        android:pathData="M10,20.333C9.9,20.333 9.808,20.3 9.725,20.233C9.642,20.167 9.583,20.083 9.55,19.983C9.267,18.867 8.842,17.817 8.275,16.833C7.708,15.85 7.017,14.95 6.2,14.134C5.383,13.317 4.483,12.625 3.5,12.059C2.517,11.492 1.467,11.067 0.35,10.783C0.25,10.75 0.167,10.692 0.1,10.608C0.033,10.525 0,10.434 0,10.333C0,10.233 0.033,10.142 0.1,10.059C0.167,9.975 0.25,9.917 0.35,9.884C1.467,9.6 2.517,9.175 3.5,8.608C4.483,8.042 5.383,7.35 6.2,6.534C7.017,5.717 7.708,4.817 8.275,3.833C8.842,2.85 9.267,1.8 9.55,0.683C9.583,0.583 9.642,0.5 9.725,0.433C9.808,0.367 9.9,0.333 10,0.333C10.1,0.333 10.183,0.367 10.25,0.433C10.333,0.5 10.392,0.583 10.425,0.683C10.725,1.8 11.158,2.85 11.725,3.833C12.292,4.817 12.983,5.717 13.8,6.534C14.617,7.35 15.517,8.042 16.5,8.608C17.483,9.175 18.533,9.6 19.65,9.884C19.75,9.917 19.833,9.975 19.9,10.059C19.967,10.142 20,10.233 20,10.333C20,10.434 19.967,10.525 19.9,10.608C19.833,10.692 19.75,10.75 19.65,10.783C18.533,11.067 17.483,11.492 16.5,12.059C15.517,12.625 14.617,13.317 13.8,14.134C12.983,14.95 12.292,15.85 11.725,16.833C11.158,17.817 10.733,18.867 10.45,19.983C10.417,20.083 10.358,20.167 10.275,20.233C10.192,20.3 10.1,20.333 10,20.333ZM23,16.333C23.15,14.55 23.692,12.908 24.625,11.408C25.575,9.908 26.833,8.717 28.4,7.833L26.55,4.634C26.45,4.484 26.425,4.325 26.475,4.158C26.525,3.992 26.633,3.867 26.8,3.783C26.933,3.7 27.083,3.684 27.25,3.734C27.417,3.783 27.55,3.884 27.65,4.033L29.5,7.233C30.933,6.634 32.433,6.333 34,6.333C35.567,6.333 37.067,6.634 38.5,7.233L40.35,4.033C40.45,3.884 40.583,3.783 40.75,3.734C40.917,3.684 41.067,3.7 41.2,3.783C41.367,3.867 41.475,3.992 41.525,4.158C41.575,4.325 41.55,4.484 41.45,4.634L39.6,7.833C41.167,8.717 42.417,9.908 43.35,11.408C44.3,12.908 44.85,14.55 45,16.333H23ZM29,13.583C29.35,13.583 29.642,13.467 29.875,13.233C30.125,12.983 30.25,12.684 30.25,12.333C30.25,11.983 30.125,11.692 29.875,11.458C29.642,11.208 29.35,11.083 29,11.083C28.65,11.083 28.35,11.208 28.1,11.458C27.867,11.692 27.75,11.983 27.75,12.333C27.75,12.684 27.867,12.983 28.1,13.233C28.35,13.467 28.65,13.583 29,13.583ZM39,13.583C39.35,13.583 39.642,13.467 39.875,13.233C40.125,12.983 40.25,12.684 40.25,12.333C40.25,11.983 40.125,11.692 39.875,11.458C39.642,11.208 39.35,11.083 39,11.083C38.65,11.083 38.35,11.208 38.1,11.458C37.867,11.692 37.75,11.983 37.75,12.333C37.75,12.684 37.867,12.983 38.1,13.233C38.35,13.467 38.65,13.583 39,13.583Z"
+        android:fillColor="#3F4948"/>
+</vector>
\ No newline at end of file