A modern programming language that makes developers happier.

kotlinlang

card.png

Hi all, is there anyone here that expert with making UI in kotlin? i need someone to enlighten on how to make this kind of cardview.

FYI the grey part around the white card is something like transparent background.

i was thinking that i should be able to do this, by first making a rounded corner card by drawable. but the tricky part is that the middle rounded corner, because when i check the figma, it was something like a substract effect, where you cut the card with other object.

as i'm not too much familiar yet on how to this "substracting" the drawable assets, so i'm not sure on how to do the middle part.

i hope anyone can enlighten me on how to do this. thank you

card 2.png

by middle rounder corner, is the part that i black marked on image below.

the round corner can be made via shape with material components library. Probablemente the easier way is a linear layout:

- card1
- custom view to draw a transparent-white dots (check DahDit library for that)
- card2

ahh, ok, i got what you mean, while for the round corner, i know how to do it with corners tag. does the radius accept minus value to create the inverted round corner(the black marked)?

I'm not sure. Maybe it is easier just download the image from figma in svg format and transform to a vector drawable

I wouldn't recommend using an image/ vector drawable. Material Shape Drawable is more than capable of handling it. You just need to read the java doc to understand how to draw it :smiley:

After the javadocs, this is the final piece of the puzzle <https://thoughtbot.com/blog/android-canvas-drawarc-method-a-visual-guide> :slightly_smiling_face:

This is my edge treatment for the above.
```class CutoutEdgeTreatment(
  private val edge: Edge,
  private val cutoutStart: Float,
  private val cutoutRadius: Float
) : EdgeTreatment() {
  private val temp = RectF()
  override fun getEdgePath(length: Float, center: Float, interpolation: Float, shapePath: ShapePath) {
    // Todo: support interpolation

    if (cutoutRadius == 0f) {
      super.getEdgePath(length, center, interpolation, shapePath)
      return
    }

    val isMainEdge = edge == Top || edge == Left
    val cutoutDiameter = cutoutRadius * 2

    when {
      isMainEdge -&gt; temp.set(cutoutStart, -cutoutRadius, cutoutStart + cutoutDiameter, cutoutRadius)
      else -&gt; temp.set(length - cutoutStart - cutoutDiameter, -cutoutRadius, length - cutoutStart, cutoutRadius)
    }

    shapePath.lineTo(temp.left, 0f)
    shapePath.addArc(temp.left, <http://temp.top|temp.top>, temp.right, temp.bottom, 180f, -180f)
    shapePath.lineTo(length, 0f)
  }
}```
• `edge`  as you can guess is one of Top, Left, Right or Bottom
• `cutoutStart` is the distance from the _start_ (when considering Top or Left edges). In your case you dont need to supply this because your cutout is right in the middle and you can get that from the length parameter passed in
• `cutoutRadius` you can guess