ClipToBounds clips shadow from elevation

[jbarr21]

trafficstars

Is it necessary to clip this layout to its bounds? If so, can you at least allow this to be optionally overridden so that a toolbar content such as the one below can show its shadow over the bodyContent?

	CollapsingToolbarScaffold(
		modifier = Modifier.fillMaxSize(),
		state = rememberCollapsingToolbarScaffoldState(),
		scrollStrategy = ScrollStrategy.ExitUntilCollapsed,
		toolbarModifier = Modifier.fillMaxWidth(),
		toolbar = {
			TopAppBar(
				backgroundColor = MaterialTheme.colors.background,
				elevation = 16.dp,
				modifier = Modifier
					.fillMaxWidth()
					.height(104.dp) // shrinks to 56.dp
					.road(Alignment.BottomStart, Alignment.BottomStart)
					.background(Color.White),
			) { ... }
                        Box(modifier = Modifier.size(56.dp)) {
				if (showNavigation) {
					IconButton(onClick = { }, modifier = Modifier.align(Alignment.Center)) {
						Icon(Icons.Default.ArrowBack, contentDescription = null)
					}
				}
			}
               },
               body = { ... }
       )

[onebone]

Actually it is not necessary. I am considering removing not only clipping behavior but also toolbarModifier parameter, which has added to deal with clipping, eventually. Possibly in the next major release? Before that happens, I will provide new parameter that overrides the clipping behavior in the next minor version.

You can add shadow via toolbarModifier with drawBehind { ... } for now.

[FelipeRRM]

Actually it is not necessary. I am considering removing not only clipping behavior but also toolbarModifier parameter, which has added to deal with clipping, eventually. Possibly in the next major release? Before that happens, I will provide new parameter that overrides the clipping behavior in the next minor version.

You can add shadow via toolbarModifier with drawBehind { ... } for now.

Hi, could you further explain how to get the shadow working with the drawBehind and the toolbarModifier ? I am trying to get the shadow to appear only when collapsed but I have no idea how to do it. Should I add the entire TopAppBar composable inside the drawBehind function instead of inside the toolbar argument?

[onebone]

@FelipeRRM This is the code I have used. Hope this helps!

val state = rememberCollapsingToolbarScaffoldState()

CollapsingToolbarScaffold(
	modifier = Modifier.fillMaxSize(),
	state = state,
	scrollStrategy = ScrollStrategy.ExitUntilCollapsed,
	toolbar = {
		Box(modifier = Modifier
			.fillMaxWidth()
			.height(120.dp)
			.background(Color.Blue))
		
		Box(modifier = Modifier.height(56.dp))
	},
	toolbarModifier = Modifier.drawBehind {
		val size = size

		val shadowStart = Color.Black.copy(alpha = 0.32f)
		val shadowEnd = Color.Transparent

		if(state.toolbarState.progress > 0f) {
			drawRect(
				brush = Brush.verticalGradient(
					listOf(shadowStart, shadowEnd),
					startY = size.height,
					endY = size.height + 56f
				),
				topLeft = Offset(0f, size.height),
				size = Size(size.width, 56f),
			)
		}
	}
) {
	Box(modifier = Modifier
		.fillMaxSize()
		.height(1000.dp)
		.background(Color.Magenta)
		.verticalScroll(rememberScrollState()))
}

https://user-images.githubusercontent.com/3233503/141670649-cf3f9c18-b0b0-4f17-8a08-50325ea7a325.mov

[GIGAMOLE]

Hi, this feature has already been merged: https://github.com/onebone/compose-collapsing-toolbar/pull/81

By the way, if you want to use this feature, I created a separated remote dependency, while this PR is under review:

Add it in your root build.gradle at the end of repositories:

all projects {
	repositories {
		...
		maven { url 'https://jitpack.io' }
	}
}

Step 2. Add the dependency

dependencies {
        implementation 'com.github.GIGAMOLE:ComposeCollapsingToolbar:latest-version'
}

Or you can simply download it from there:

https://github.com/GIGAMOLE/ComposeCollapsingToolbar/releases