When we were using android coordinator layout, we could use anchor to a view in the layout using :
<code><FloatingActionButton
app:layout_anchor="@id/appBar"
app:layout_anchorGravity="bottom|end" />
</code>
<code><FloatingActionButton
app:layout_anchor="@id/appBar"
app:layout_anchorGravity="bottom|end" />
</code>
<FloatingActionButton
app:layout_anchor="@id/appBar"
app:layout_anchorGravity="bottom|end" />
Lets say we want to implement the same logic in compose. I have a DetailContent as follow which includes a button, and I want to anchor button to bottom of Toolbar.
<code>@Composable
private fun DetailsContent(
scrollState: ScrollState,
onNamePosition: (Float) -> Unit,
item: Poster,
sendNotification: () -> Unit,
contentAlpha: () -> Float,
) {
Column(
modifier = Modifier.verticalScroll(scrollState)
) {
Box(
modifier = Modifier.height(Dimens.DetailBoxImageHeight)
) {
Image(
painter = rememberImagePainter(item.poster),
contentDescription = null,
modifier = Modifier
.align(Alignment.TopCenter)
.fillMaxWidth()
.clip(shape = MaterialTheme.shapes.medium)
.alpha(contentAlpha()),
contentScale = ContentScale.Crop,
)
Button(
onClick = sendNotification,
shape = RoundedCornerShape(36.dp),
modifier = Modifier
.width(126.dp)
.align(Alignment.BottomCenter)
.offset(y = 23.5.dp)
) {
Text(text = "DeepLink")
}
}
Spacer(Modifier.height(32.dp))
Text(
modifier = Modifier.padding(8.dp),
text = item.description,
style = typography.body2,
fontSize = 18.sp,
color = MaterialTheme.colors.onSurface
)
}
}
</code>
<code>@Composable
private fun DetailsContent(
scrollState: ScrollState,
onNamePosition: (Float) -> Unit,
item: Poster,
sendNotification: () -> Unit,
contentAlpha: () -> Float,
) {
Column(
modifier = Modifier.verticalScroll(scrollState)
) {
Box(
modifier = Modifier.height(Dimens.DetailBoxImageHeight)
) {
Image(
painter = rememberImagePainter(item.poster),
contentDescription = null,
modifier = Modifier
.align(Alignment.TopCenter)
.fillMaxWidth()
.clip(shape = MaterialTheme.shapes.medium)
.alpha(contentAlpha()),
contentScale = ContentScale.Crop,
)
Button(
onClick = sendNotification,
shape = RoundedCornerShape(36.dp),
modifier = Modifier
.width(126.dp)
.align(Alignment.BottomCenter)
.offset(y = 23.5.dp)
) {
Text(text = "DeepLink")
}
}
Spacer(Modifier.height(32.dp))
Text(
modifier = Modifier.padding(8.dp),
text = item.description,
style = typography.body2,
fontSize = 18.sp,
color = MaterialTheme.colors.onSurface
)
}
}
</code>
@Composable
private fun DetailsContent(
scrollState: ScrollState,
onNamePosition: (Float) -> Unit,
item: Poster,
sendNotification: () -> Unit,
contentAlpha: () -> Float,
) {
Column(
modifier = Modifier.verticalScroll(scrollState)
) {
Box(
modifier = Modifier.height(Dimens.DetailBoxImageHeight)
) {
Image(
painter = rememberImagePainter(item.poster),
contentDescription = null,
modifier = Modifier
.align(Alignment.TopCenter)
.fillMaxWidth()
.clip(shape = MaterialTheme.shapes.medium)
.alpha(contentAlpha()),
contentScale = ContentScale.Crop,
)
Button(
onClick = sendNotification,
shape = RoundedCornerShape(36.dp),
modifier = Modifier
.width(126.dp)
.align(Alignment.BottomCenter)
.offset(y = 23.5.dp)
) {
Text(text = "DeepLink")
}
}
Spacer(Modifier.height(32.dp))
Text(
modifier = Modifier.padding(8.dp),
text = item.description,
style = typography.body2,
fontSize = 18.sp,
color = MaterialTheme.colors.onSurface
)
}
}
So we have a DetailContent as well as DetailsToolbar :
<code>Box(Modifier.fillMaxSize()) {
DetailsContent(
scrollState = scrollState,
onNamePosition = { newNamePosition ->
// Comparing to Float.MIN_VALUE as we are just interested on the original
// position of name on the screen
if (detailScroller.namePosition == Float.MIN_VALUE) {
detailScroller =
detailScroller.copy(namePosition = newNamePosition)
}
},
item = item,
sendNotification = sendNotification,
contentAlpha = { contentAlpha.value }
)
DetailsToolbar(
toolbarState, item.name, pressOnBack,
contentAlpha = { contentAlpha.value }
)
}
</code>
<code>Box(Modifier.fillMaxSize()) {
DetailsContent(
scrollState = scrollState,
onNamePosition = { newNamePosition ->
// Comparing to Float.MIN_VALUE as we are just interested on the original
// position of name on the screen
if (detailScroller.namePosition == Float.MIN_VALUE) {
detailScroller =
detailScroller.copy(namePosition = newNamePosition)
}
},
item = item,
sendNotification = sendNotification,
contentAlpha = { contentAlpha.value }
)
DetailsToolbar(
toolbarState, item.name, pressOnBack,
contentAlpha = { contentAlpha.value }
)
}
</code>
Box(Modifier.fillMaxSize()) {
DetailsContent(
scrollState = scrollState,
onNamePosition = { newNamePosition ->
// Comparing to Float.MIN_VALUE as we are just interested on the original
// position of name on the screen
if (detailScroller.namePosition == Float.MIN_VALUE) {
detailScroller =
detailScroller.copy(namePosition = newNamePosition)
}
},
item = item,
sendNotification = sendNotification,
contentAlpha = { contentAlpha.value }
)
DetailsToolbar(
toolbarState, item.name, pressOnBack,
contentAlpha = { contentAlpha.value }
)
}
How can I anchor the Button to DetailsToolbar ?