Litho Column border radius

Question

Currently investigating Litho and I tried to add a border to a Column. It seems to work fine until I add a background to the Column. The Column doesn't appear to be clipped to the borders

See attached image for better description

Code (In Kotlin)

companion object {

        @JvmStatic
        @OnCreateLayout
        fun onCreateLayout(context: ComponentContext): Component = Row.create(context)
            .alignItems(YogaAlign.CENTER)
            .justifyContent(YogaJustify.CENTER)
            .child(
                Column.create(context)
                    .border(
                        Border.create(context)
                            .color(YogaEdge.ALL, Color.RED)
                            .widthDip(YogaEdge.ALL, 2f)
                            .radiusDip(20f)
                            .build()
                    )
                    .shadowElevationDip(10f)
                    .backgroundColor(Color.BLUE)
                    .paddingDip(YogaEdge.ALL, 20f)
                    .child(
                        Text.create(context)
                            .text("Litho for Android")
                            .textSizeSp(20f)
                            .marginDip(YogaEdge.BOTTOM, 4f)
                    )
                    .child(
                        Text.create(context)
                            .text("20 Sections")
                            .textSizeSp(14f)
                    )
            )
            .build()
    }

ADDITIONAL ISSUE: The shadowElevation doesn't seem to work as well as there is no shadow showing.

Please how can I fix the border (and shadow) issues?

Answer 1

The background and the border they are drawn differently so if you want to use them together you would need to create a background with the same radius as the border you are setting to get the same effect here. To create a background with code here you can use

GradientDrawable background = ComparableGradientDrawable.create();
background.setShape(GradientDrawable.RECTANGLE);
background.setCornerRadius(radius);
background.setColor(color);

And set the background to the background property for the column. If you want to do something like this I would recommend using a background with the required border and color background. In this example just setStroke to the background.

Regarding the shadows, seems there's a bug when the outline provider is trying to define the shadows on the background it won't find it. I would say that to get this working until fixed, just override the outline provider with something like:

.outlineProvider(
    new ViewOutlineProvider() {
      @Override
      public void getOutline(View view, Outline outline) {
        outline.setRoundRect(0, 0, view.getWidth(), view.getHeight(), radius);
      }
    })