Support edge-to-edge content

[mataku]

Context

Closes #399

TargetSDK 35 app requires edge-to-edge support. Of course, it's possible to opt out, but it's better to do it anyway because support is needed by TargetSDK 36, and contents will be natural if supported.

Changes

• Support edge-to-edge in ShowkaseBrowserActivity and ShowkaseBrowserApp
  • Showkase uses material2, so I added safeDrawingPadding for composable component
• Set targetsdk to 35 in the sample project
• Apply enableEdgeToEdge to ensure that it applies to both OS 14 and below and 15

Notes

I tried to change to use TopAppBar instead of Row use for toolbar, but I just found comments:

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

Lines 163 to 167 in cf3cdc8

	/**
	* Commented out due to TopAppBar not working properly in beta-01 for this use case. Seems to be
	* related to use to Surface inside TopAppBar and a TextField. Creating my own implementation
	* for now. Will uncomment if this issue gets fixed.
	*/

TopAppBar seems to work, but ShowkaseBrowserTest failed, so I kept using custom Row.

Screenshots

OS 14	OS 14 with gesture nav

OS 15	OS 15 with gesture nav

[olivierperez]

I guess it is not wanted 🤔

[mataku]

🤦
Thanks! fixed: cba224c

[olivierperez]

I'm not a maintainer of this repository but I also would like this PR to be merged ^^

[olivierperez]

Another thing, I think you need to fix the indent of this file.
The Scaffold should be indented, and later in the file a } is misplaced.

[mataku]

You're right. fixed: 5890e6e

[olivierperez]

👍

[vinaygaba]

@mataku Can you tell me what the test failure was when you attempted to use TopAppBar? This code path was written back in ~2021 before even the first stable release of Compose so the APIs were not as reliable as they are now. I'd love to use out of the box solutions wherever possible.

[mataku]

@vinaygaba
Showkase AppBar supports up to three lines of display and includes a unit test to verify that the correct lines are displayed.

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

Lines 292 to 319 in b3b19bb

	@Composable
	fun ToolbarTitle(
	string: String,
	modifier: Modifier
	) {
	val lineCount = remember {
	mutableStateOf(0)
	}
	Text(
	text = string,
	modifier = modifier then Modifier
	.padding(vertical = verticalToolbarPadding)
	.semantics {
	lineCountVal = lineCount.value
	},
	style = TextStyle(
	fontSize = 20.sp,
	fontFamily = FontFamily.Monospace,
	fontWeight = FontWeight.Bold
	),
	maxLines = 3,
	overflow = TextOverflow.Ellipsis,
	onTextLayout = {
	lineCount.value = it.lineCount
	}
	)
	}

> Task :showkase-browser-testing:connectedDebugAndroidTest

com.airbnb.android.showkase_browser_testing.ShowcaseBrowserTest > components_with_long_names_have_a_correct_top_app_bar

See details: https://github.com/airbnb/Showkase/actions/runs/16053765228/job/45302791177

---

The height of the material2 AppBar is fixed at 56 dp, so it appears that it cannot display multiple lines, and uses a custom component for now.

master branch with long text	TopAppBar use with long text (in this branch)

[vinaygaba]

@mataku this rings a bell and iirc was an intentional choice to show longer component names. I think we can keep it as is and we should be good to merge once all the tests pass.

[mataku]

I agree. If it is changed, using the m3 AppBar would make a multi-line display much easier.