Hi, Is there a way to add a Shape to a Scrollable ...

# compose

[Archie]

Hi, Is there a way to add a Shape to a Scrollable Container so the shape would encompass all the children? I’d appreciate any help. Thanks in advance.

[Cicero]

Are you using canvas?

[Archie]

no, atleast not directly.. i am using Modifier.border(..) on the parent.. Would drawing in the canvas work?

[Cicero]

My ideia is probably more complicated than anyone else here but i would just draw something on top and move it around

[Cicero]

or I would make this numbers have some sort of area around them and I would let them know who they are connected with and move this thing you wanna move around

[Archie]

Thank you very much... I have thought of the second idea as well but havent tried yet.. will probably try when i got some time

[Archie]

I did some testing today. Apparently the idea of letting each item know who they are or what their position is, isnt practical as if the shape is more complex, it would be harder and harder to manage.

I did end up looking at how ScrollableTabRow works and realize I could utilize the indicator as it uses the sum of all the children’s width. I ended up with this. 🙂

Hope anyone trying to look into the same problem would see this and would help them. :)

[Cicero]

This looks awesome

[Cicero]

I ended up rewriting one component myself

[Cicero]

it’s a good idea too

[Cicero]

mainly when they are very accessible implementations

[Cicero]

Really cool solution, I will keep this in mind

[Archie]

The only problem with this approach is that, this doesn’t work when the Indicator is filled in. As the indicator is drawn on top of the `TabItem`s. I kinda hope we could control whether the Indicator gets drawn on top or below.

[Cicero]

I had some issues with the state of the button recently

[Cicero]

I couldn’t really control the color of the inactive state

[Cicero]

and I wanted it to be overlayed by this white mist

[Cicero]

@Composable
fun AppButton(
    text: String,
    modifier: Modifier = Modifier,
    onClick: () -> Unit,
    style: ButtonStyle,
    icon: Painter? = null,
    isAllCapitals: Boolean = false,
    enabled: Boolean = true,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    elevation: ButtonElevation? = ButtonDefaults.elevation(Elevation),
    colors: ButtonColors = ButtonBackgroundColor(style),
    contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
) {
    Box(modifier = Modifier.defaultMinSize(minHeight = gu4_5)) {
        Surface(
            shape = RoundedCornerShape(if (style == Date) 0.dp else 4.dp),
            color = colors.backgroundColor(true).value,
            border = if (style == Date || !enabled) null else BorderStroke(
                1.dp,
                AppColor.ButtonBorder
            ),
            elevation = elevation?.elevation(true, interactionSource)?.value ?: 0.dp,
            modifier = modifier
                .fillMaxWidth()
                .clickable(
                    onClick = onClick,
                    enabled = enabled,
                    role = Role.Button,
                    interactionSource = interactionSource,
                    indication = null
                )
        ) {
            ProvideTextStyle(
                value = MaterialTheme.typography.button
            ) {
                Row(
                    modifier = Modifier
                        .defaultMinSize(
                            minWidth = ButtonDefaults.MinWidth
                        )
                        .indication(interactionSource, rememberRipple())
                        .padding(contentPadding),
                    horizontalArrangement = Arrangement.Center,
                    verticalAlignment = Alignment.CenterVertically,
                    content = {
                        if (icon != null) {
                            Image(
                                painter = icon,
                                contentDescription = null,
                                contentScale = ContentScale.Fit,
                                colorFilter = ButtonIconColor(style)
                            )

                            Spacer(
                                modifier = Modifier
                                    .width(Dimens.ButtonSpaceBetweenIcon)
                            )
                        }

                        Text(
                            text = if (isAllCapitals) text.toUpperCase() else text,
                            style = ButtonTextStyle(style)
                        )
                    }
                )
                Box(
                    modifier = Modifier
                        .alpha(if (enabled) 0f else 0.6f)
                        .background(AppColor.Ghost)
                        .clip(MaterialTheme.shapes.small)
                        .matchParentSize()
                        .border(
                            BorderStroke(
                                1.dp,
                                AppColor.Ghost
                            )
                        )
                )
            }
        }
    }
}

[Cicero]

This is basically me copying the component into my composables directory and editing it to fit specifically my needs 🙂

[Cicero]

Don’t shy away of messing around with them

[Archie]

Yup, I agree. I just really want to exhaust everything first. Before start implementing my own approach. :D

[Cicero]

Man, just take a look at the component. I spent a lot of time with this button shit just to realize I would have never been able to solve it using the available tools.

If you take a look at the root of the object you will have a clear picture of what you can and not dp

[Cicero]

There is no other source of answer than the source code from this component

[Archie]

I really do agree. Thanks man! 😄