Support edge-to-edge content (#412)

* Specify targetSdkVersion to 35 in sample project

* Support edgeToEdge

material2 TopAppBar's height is 56dp, so we couldn't set maxLines to 2 or over

* Fix import

---------

Co-authored-by: Vinay Gaba <vinaygaba@gmail.com>

Author: mataku

sample/build.gradle

@@ -26,7 +26,7 @@ android {
         applicationId "com.airbnb.android.showkasesample"
         minSdkVersion 21
         compileSdk 36
-        targetSdkVersion 33
+        targetSdkVersion 35
         versionCode 1
         versionName "1.0"
         testInstrumentationRunner "com.karumi.shot.ShotTestRunner"

showkase/src/main/java/com/airbnb/android/showkase/ui/ShowkaseBrowserActivity.kt

@@ -4,6 +4,7 @@ import android.content.Context
 import android.content.Intent
 import android.os.Bundle
 import androidx.activity.compose.setContent
+import androidx.activity.enableEdgeToEdge
 import androidx.appcompat.app.AppCompatActivity
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
@@ -20,6 +21,7 @@ import com.airbnb.android.showkase.models.ShowkaseElementsMetadata
  */
 class ShowkaseBrowserActivity : AppCompatActivity() {
     override fun onCreate(savedInstanceState: Bundle?) {
+        enableEdgeToEdge()
         super.onCreate(savedInstanceState)
         val classKey =
             intent.extras?.getString(SHOWKASE_ROOT_MODULE_KEY) ?: throw ShowkaseException(

showkase/src/main/java/com/airbnb/android/showkase/ui/ShowkaseBrowserApp.kt

@@ -1,6 +1,5 @@
 package com.airbnb.android.showkase.ui
 
-import android.annotation.SuppressLint
 import android.content.res.Configuration
 import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.animation.expandHorizontally
@@ -14,9 +13,11 @@ import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.safeDrawingPadding
 import androidx.compose.material.Icon
 import androidx.compose.material.IconButton
 import androidx.compose.material.Scaffold
+import androidx.compose.material.Surface
 import androidx.compose.material.Text
 import androidx.compose.material.TextField
 import androidx.compose.material.TextFieldDefaults
@@ -34,7 +35,6 @@ import androidx.compose.ui.Alignment
 import kotlinx.coroutines.delay
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalInspectionMode
@@ -63,7 +63,6 @@ import com.airbnb.android.showkase.models.insideGroup
 import com.airbnb.android.showkase.ui.SemanticsUtils.lineCountVal
 
 @Suppress("LongMethod")
-@SuppressLint("UnusedMaterialScaffoldPaddingParameter")
 @Composable
 internal fun ShowkaseBrowserApp(
     groupedComponentMap: Map<String, List<ShowkaseBrowserComponent>>,
@@ -82,56 +81,63 @@ internal fun ShowkaseBrowserApp(
         val navController = rememberNavController()
         val navBackStackEntry by navController.currentBackStackEntryAsState()
         val currentRoute = navBackStackEntry?.destination?.route
+        Surface(
+            color = Color.White
+        ) {
+            Scaffold(
+                drawerContent = null,
+                topBar = {
+                    ShowkaseAppBar(
+                        currentRoute = currentRoute,
+                        showkaseBrowserScreenMetadata = showkaseBrowserScreenMetadata,
+                        onSearchQueryChanged = {
+                            onUpdateShowkaseBrowserScreenMetadata(
+                                showkaseBrowserScreenMetadata.copy(searchQuery = it)
+                            )
+                        },
+                        onClearSearch = {
+                            onUpdateShowkaseBrowserScreenMetadata(
+                                showkaseBrowserScreenMetadata.copy(searchQuery = "")
+                            )
+                        },
+                        onActivateSearch = {
+                            onUpdateShowkaseBrowserScreenMetadata(
+                                showkaseBrowserScreenMetadata.copy(isSearchActive = true)
+                            )
+                        },
+                        onCloseSearch = {
+                            onUpdateShowkaseBrowserScreenMetadata(
+                                showkaseBrowserScreenMetadata.copy(isSearchActive = false)
+                            )
+                        },
 
-        Scaffold(
-            drawerContent = null,
-            topBar = {
-                ShowkaseAppBar(
-                    currentRoute = currentRoute,
-                    showkaseBrowserScreenMetadata = showkaseBrowserScreenMetadata,
-                    onSearchQueryChanged = {
-                        onUpdateShowkaseBrowserScreenMetadata(
-                            showkaseBrowserScreenMetadata.copy(searchQuery = it)
                         )
-                    },
-                    onClearSearch = {
-                        onUpdateShowkaseBrowserScreenMetadata(
-                            showkaseBrowserScreenMetadata.copy(searchQuery = "")
-                        )
-                    },
-                    onActivateSearch = {
-                        onUpdateShowkaseBrowserScreenMetadata(
-                            showkaseBrowserScreenMetadata.copy(isSearchActive = true)
-                        )
-                    },
-                    onCloseSearch = {
-                        onUpdateShowkaseBrowserScreenMetadata(
-                            showkaseBrowserScreenMetadata.copy(isSearchActive = false)
+                },
+                content = { contentPadding ->
+                    Column(
+                        modifier = Modifier
+                            .fillMaxSize()
+                            .background(color = SHOWKASE_COLOR_BACKGROUND)
+                            .padding(contentPadding),
+                    ) {
+                        ShowkaseBodyContent(
+                            navController,
+                            groupedComponentMap,
+                            groupedColorsMap,
+                            groupedTypographyMap,
+                            showkaseBrowserScreenMetadata,
+                            onUpdateShowkaseBrowserScreenMetadata,
+                            navigateTo = {
+                                navController.navigate(it.name)
+                            }
                         )
-                    },
-
-                    )
-            },
-            content = {
-                Column(
-                    modifier = Modifier
-                        .fillMaxSize()
-                        .background(color = SHOWKASE_COLOR_BACKGROUND),
-                ) {
-                    ShowkaseBodyContent(
-                        navController,
-                        groupedComponentMap,
-                        groupedColorsMap,
-                        groupedTypographyMap,
-                        showkaseBrowserScreenMetadata,
-                        onUpdateShowkaseBrowserScreenMetadata,
-                        navigateTo = {
-                            navController.navigate(it.name)
-                        }
-                    )
-                }
-            }
-        )
+                    }
+                },
+                modifier = Modifier
+                    .fillMaxSize()
+                    .safeDrawingPadding()
+            )
+        }
     }
 }
 
@@ -144,41 +150,43 @@ internal fun ShowkaseAppBar(
     onActivateSearch: () -> Unit,
     onClearSearch: () -> Unit,
 ) {
-
-    Row(
-        Modifier
-            .fillMaxWidth()
-            .graphicsLayer(shadowElevation = 4f)
-            .padding(padding2x),
-        horizontalArrangement = Arrangement.SpaceBetween,
-        verticalAlignment = Alignment.CenterVertically
+    Surface(
+        elevation = 4.dp
     ) {
-        ShowkaseAppBarTitle(
-            showkaseBrowserScreenMetadata.isSearchActive,
-            showkaseBrowserScreenMetadata.currentGroup,
-            showkaseBrowserScreenMetadata.currentComponentName,
-            showkaseBrowserScreenMetadata.currentComponentStyleName,
-            currentRoute,
-            showkaseBrowserScreenMetadata.searchQuery,
-            {
-                onSearchQueryChanged(it)
-            },
-            Modifier.fillMaxWidth(0.75f),
-            onCloseSearchFieldClick = {
-                onCloseSearch()
-            },
-            onClearSearchField = {
-                onClearSearch()
-            }
-        )
-        ShowkaseAppBarActions(
-            isActive = showkaseBrowserScreenMetadata.isSearchActive,
-            onActionClicked = {
-                onActivateSearch()
-            },
-            currentRoute = currentRoute,
-            modifier = Modifier.fillMaxWidth(0.25f)
-        )
+        Row(
+            Modifier
+                .fillMaxWidth()
+                .padding(padding2x),
+            horizontalArrangement = Arrangement.SpaceBetween,
+            verticalAlignment = Alignment.CenterVertically
+        ) {
+            ShowkaseAppBarTitle(
+                isSearchActive = showkaseBrowserScreenMetadata.isSearchActive,
+                currentGroup = showkaseBrowserScreenMetadata.currentGroup,
+                currentComponentName = showkaseBrowserScreenMetadata.currentComponentName,
+                currentComponentStyleName = showkaseBrowserScreenMetadata.currentComponentStyleName,
+                currentRoute = currentRoute,
+                searchQuery = showkaseBrowserScreenMetadata.searchQuery,
+                searchQueryValueChange = {
+                    onSearchQueryChanged(it)
+                },
+                modifier = Modifier.fillMaxWidth(0.75f),
+                onCloseSearchFieldClick = {
+                    onCloseSearch()
+                },
+                onClearSearchField = {
+                    onClearSearch()
+                }
+            )
+            ShowkaseAppBarActions(
+                isActive = showkaseBrowserScreenMetadata.isSearchActive,
+                onActionClicked = {
+                    onActivateSearch()
+                },
+                currentRoute = currentRoute,
+                modifier = Modifier.fillMaxWidth(0.25f)
+            )
+        }
     }
 
     /**
@@ -189,18 +197,33 @@ internal fun ShowkaseAppBar(
 //    TopAppBar(
 //        title = {
 //            ShowkaseAppBarTitle(
-//                showkaseBrowserScreenMetadata.value.isSearchActive,
-//                showkaseBrowserScreenMetadata.value.currentGroup,
-//                showkaseBrowserScreenMetadata.value.currentComponentName,
-//                currentRoute,
-//                showkaseBrowserScreenMetadata.value.searchQuery
-//            ) {
-//                showkaseBrowserScreenMetadata.value =
-//                    showkaseBrowserScreenMetadata.value.copy(searchQuery = it)
-//            }
+//                isSearchActive =  showkaseBrowserScreenMetadata.isSearchActive,
+//                currentGroup = showkaseBrowserScreenMetadata.currentGroup,
+//                currentComponentName = showkaseBrowserScreenMetadata.currentComponentName,
+//                currentComponentStyleName = showkaseBrowserScreenMetadata.currentComponentStyleName,
+//                currentRoute = currentRoute,
+//                searchQuery = showkaseBrowserScreenMetadata.searchQuery,
+//                searchQueryValueChange = {
+//                    onSearchQueryChanged(it)
+//                },
+//                modifier = Modifier,
+//                onCloseSearchFieldClick = {
+//                    onCloseSearch()
+//                },
+//                onClearSearchField = {
+//                    onClearSearch()
+//                }
+//            )
 //        },
 //        actions = {
-//            ShowkaseAppBarActions(showkaseBrowserScreenMetadata, currentRoute)
+//            ShowkaseAppBarActions(
+//                isActive = showkaseBrowserScreenMetadata.isSearchActive,
+//                onActionClicked = {
+//                    onActivateSearch()
+//                },
+//                currentRoute = currentRoute,
+//                modifier = Modifier
+//            )
 //        },
 //        backgroundColor = Color.White
 //    )