IssueTracker

Jetpack Compose release version:

• 1.0.0-rc01

Android Studio Build:

• Android Studio Arctic Fox | 2020.3.1 Beta 5 Build # AI-203.7717.56.2031.7479365, built on June 22, 2021

Steps to Reproduce:

1. Ensure you have rc01 as you compose version, specifically (I think) for the androidx.compose.ui:ui dependency.
2. Create a custom class that inherits from the Shape class and override the createOutline function in order to create your own outline for the shape using the Path class. The Path that you create should have a side that starts from a lower co-ordinate and then uses lineTo to draw a line UP and LEFT so that the line essentially travels towards the top-left of the space. If this is confusing then here is a provided Path that does exactly this: (You can see the line with the comment This is the THINNER one that is the lineTo that travels up and left creating an angled line)

class LeftPointingSpeechBubble(
    val cornerRadius: Float,
    val tailWidth: Float,
    val tailHeight: Float
) : Shape {
    override fun createOutline(
        size: Size,
        layoutDirection: LayoutDirection,
        density: Density
    ): Outline {
        val rect = Rect(0 + tailWidth, 0f, size.width, size.height)
        val tailStartY = 50f
        val path = Path().apply {
            moveTo(rect.left, rect.top + cornerRadius)
            quadraticBezierTo(rect.left, rect.top, rect.left + cornerRadius, rect.top)
            lineTo(rect.right - cornerRadius, rect.top)
            quadraticBezierTo(rect.right, rect.top, rect.right, rect.top + cornerRadius)
            lineTo(rect.right, rect.bottom - cornerRadius)
            quadraticBezierTo(rect.right, rect.bottom, rect.right - cornerRadius, rect.bottom)
            lineTo(rect.left + cornerRadius, rect.bottom)
            quadraticBezierTo(rect.left, rect.bottom, rect.left, rect.bottom - cornerRadius)
            lineTo(rect.left, tailStartY + tailHeight + 50)
            lineTo(rect.left - tailWidth, tailStartY + tailHeight) //This is the THINNER one
            lineTo(rect.left - tailWidth, tailStartY)
            lineTo(rect.left, tailStartY - tailHeight)
            close()
        }
        return Outline.Generic(path)
    }
}

3. Once you have your custom Shape class, you now need to have a simple compose function that draws a Box and add a border modifier to that Box. The border modifier should take the custom Shape that we created in step 2, like so (example):

@Preview(showBackground = true)
@Composable
fun test3() {
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .height(200.dp)
            .border(2.dp, Color.Gray, LeftPointingSpeechBubble(20f,  40f, 20f))
    ) {
        Text(text = "Yes")
    }
}

4. Now simply run the app or run the preview, in both situations you will see that the line that draws up and left will be thinner than the other lines that are (in this case) specified to be 2.dp, depending on the angle of the line the line might not even have any width and not be seen. (reference attached image: 0_compose_bug_rc01.png, screenshot of the top left corner of the drawn path showing clearly the thinner line compared to the others)

5. For completeness now DO NOT change any of the above code, but instead change the compose version number down to a beta release (I tested it with beta07) and run the code again and you will see that the line in question now draws correctly and has a width (thickness) similar to the others. (reference attached image: 0_compose_bug_beta07.png, screenshot of the top left corner of the drawn path showing clearly that with this version of compose the thinner line is not present and instead has the same thickness as the others, as it should)

Write-up

After following the steps above you will hopefully see that between the different compose versions (in this case beta07 and rc01) that the line that draws up and left does not draw correctly. The reason that I have submitted this issue is simply because this issue was not present in previous version of compose, so I believe (possibly incorrectly) that this drawing bug has been introduced in the newer releases (possibly rc01). I hope this all makes sense, please reach out to me for anymore information as i would love to be more useful and help on addressing this issue. ALSO if this is infact not an issue then please take my deepest apologies for wasting anyone's time, maybe someone will reach out and tell me that im using the wrong APIs to draw my border or path and in that case I really hope I haven't caused any trouble!