如何在 android Jetpack Compose 中创建自定义形状？

Question

How can I make a shape like this?

Answer 1

I see there two ways how I would've done this:

1. You can create @Composable function with Canvases ( official guideline , article on Medium ), if you need to use tab of this folder-like shape

// Usage:
@Composable
fun Somewhere() {
  FolderLikeCard(
    topTailContent = {
      // for example, your tab will just be, without content, only for shape
      Box(modifier = Modifier.size(64.dp, 12.dp))
    },
    mainContent = {
      // main content
    }
  )
}


// Implementation:
@Composable
fun FolderLikeCard(
  topTailContent: @Composable () -> Unit,
  mainContent: @Composable () -> Unit
) {
  val cornerSize = 4.dp // for example
  Column {
    Row {
      Spacer(modifier = Modifier.weight(1f))
      Box {
        Canvas {
          TODO("draw with help of links above tab's outline (using drawArc maybe)")
        }
        Box(
          modifier = Modifier.padding(left = cornerSize, top = cornerSize, right = cornerSize),
          content = topTailContent
        )
      }
    }
    Box {
      Canvas {
        TODO("draw main part outline")
      }
      Box(
        modifier = Modifier.padding(left = cornerSize, bottom = cornerSize, right = cornerSize),
        content = mainContent
      )
    }
  }
}

+ I feel it can be refactored with help of Modifier.drawBehind method

2. Create an actual Shape for using it in Modifier.background(color = yourColor, shape = FolderLikeShape(tabHeight, tabWidth, ...)) method, link to the article that I read some time ago , + linked question helps , but I don't see how you can then put the content there so far, if you need it, then I hope the following commentators will help with this.