Add collapsable appbar to sample list

ai-catalog/app/src/main/java/com/android/ai/catalog/ui/CatalogApp.kt

@@ -18,27 +18,41 @@ 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.Row
+import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
+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.Alignment
 import androidx.compose.ui.Modifier
+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
@@ -48,7 +62,7 @@ import com.android.ai.catalog.domain.sampleCatalog
 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 +74,44 @@ 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 = {
-                            Text(
-                                text = stringResource(id = R.string.top_bar_title),
-                                style = MaterialTheme.typography.titleLarge,
-                                color = MaterialTheme.colorScheme.onSurface,
-                            )
+                        title = { expanded ->
+                            if (expanded) {
+                                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)
+                                    )
+                                }
+                            }
+
                         },
+                        scrollBehavior = scrollBehavior
                     )
                 },
             ) { innerPadding ->
@@ -128,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(

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>

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>