https://kotlinlang.org logo
Join Slack
Powered by
Does anyone know why the following code layouts ch...
# compose-android
j
Does anyone know why the following code layouts child Box vertically centered? I’ve specified an alignment of 
Alignment.TopCenter
I’ve made the child composable twice the height of the parent because my intention for it is programmatically scroll content to eventually reveal the content beneath, so making the child box scrollable won’t work because I want to completely scroll its contents off screen.
Copy code
BoxWithConstraints(
        modifier = Modifier.fillMaxSize(),
    ) {
        Box(
            modifier = Modifier
                .align(
                    Alignment.TopCenter
                )
                .requiredSize(
                    width = maxWidth,
                    height = maxHeight * 2
                )
        ) {
            Text(
                text = "Top Text",
                fontSize = 48.sp,
                modifier = Modifier.align(Alignment.TopStart),
            )

            Text(
                text = "Bottom Text",
                fontSize = 48.sp,
                modifier = Modifier.align(Alignment.BottomStart),
            )
        }
    }}
Screenshot of the preview window?
z
Please keep long posts to the thread to keep the main channel more readable, thanks!
👍🏿 1
I believe what’s happening is that when you try to size the child larger than the parent, you’re hitting the logic where a layout node that doesn’t obey its constraints gets automatically centered by the layout system.
j
I’m able to fix this issue using a custom layout modifier but is there a better solution?
z
Other than using one of the built-in scroll components, that’s probably best
j
I figured a scrolling component wouldn’t work because I wanted to scroll the top child out of view. I thought the scrolling components would only scroll to the end of the content.
z
Yea, you’d have to put some kind of spacer at the end
Just be aware of accessibility if you’re implementing scrolling from scratch – there are some scroll semantics you’ll want to set: 
VerticalScrollAxisRange
, 
scrollBy
, and 
scrollByOffset
Also note, for your custom layout you’ll probably want to use 
placeWithLayer
and use the layer to offset your content. It’s much cheaper to scroll by layer offset than normal offset.
j
Are there any samples that implement custom scrolling?
z
Not official ones, i don’t think
There’s also nested scrolling to worry about. If you want all the normal scroll behaviors, it might just be easier to add a spacer to your content.
j
The scrolling would be programmatic. I’m implementing a reveal animation of falling “confetti” that will vertically scroll of screen to reveal the main UI.
Nested scrolling shouldn’t be an issue.
z
Oh yea, then you don’t need to worry about nesting or semantics
j
I came up with a solution that uses a full screen canvas and I just scroll the content off screen so I don’t need large content. My only problem is I don’t have a good way to know when the animation has completed to remove the canvas from the screen. The canvas blocks touches to the content below so that the user doesn’t accidentally click the content below.
z
How are you animating the offset?
If you’re using 
Animatable
, then you know when the animation is done when 
animateTo
returns.
j
Copy code
BoxWithConstraints(
    modifier = Modifier
        .background(Color.LightGray)
        .fillMaxSize()
) {

    var currentState = remember { MutableTransitionState(false) }
    currentState.targetState = true
    val transition = rememberTransition(currentState, label = "selected state")

    val yOffset by transition.animateDp(
        transitionSpec = {
            tween(durationMillis = 5500, easing = LinearEasing)
        },
        label = "yOffset"
    ) {
        if (it) maxHeight else -(maxHeight * .0F)
    }
}
I’m using transition because I want to rotate the “confetti” as it’s vertically scrolling.
Is there a way to synchronize multiple animations using Animatable?
I currently have 6 “confetti” shapes whose rotation I’d like to animate as they vertically animate along the screen.
z
I believe there are some open source confetti implementations in compose, I would look at one of those for examples
5 Views
Open in Slack
PreviousNext
Powered by