Skip to content

Support edge-to-edge content #412

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
vinaygaba merged 5 commits into from
Aug 17, 2025
+120 −95
Merged

Support edge-to-edge content #412

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
9851623
Specify targetSdkVersion to 35 in sample project
mataku Aug 4, 2025
9f8c547
Support edgeToEdge
mataku Aug 4, 2025
e79d08c
Fix import
mataku Aug 4, 2025
3509631
Merge branch 'master' into feature/edge
vinaygaba Aug 5, 2025
c23c0d0
Merge branch 'master' into feature/edge
vinaygaba Aug 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion sample/build.gradle
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
2 changes: 2 additions & 0 deletions showkase/src/main/java/com/airbnb/android/showkase/ui/ShowkaseBrowserActivity.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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(
Expand Down
211 changes: 117 additions & 94 deletions showkase/src/main/java/com/airbnb/android/showkase/ui/ShowkaseBrowserApp.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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
Expand All @@ -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
Expand Down Expand Up @@ -63,7 +63,6 @@ import com.airbnb.android.showkase.models.insideGroup
import com.airbnb.android.showkase.ui.SemanticsUtils.lineCountVal

@Suppress("LongMethod")
@SuppressLint("UnusedMaterialScaffoldPaddingParameter")
Copy link
Copy Markdown

@olivierperez olivierperez Jul 26, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

@Composable
internal fun ShowkaseBrowserApp(
groupedComponentMap: Map<String, List<ShowkaseBrowserComponent>>,
Expand All @@ -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()
)
}
}
}

Expand All @@ -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)
)
}
}

/**
Expand All @@ -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
// )
Expand Down
Loading