TECHDesign FUT-Style Cards in Jetpack Compose: Clip or Cut or Mask a Composable with a Custom ShapeFrom Concept to Code: Follow a few simple steps to mask any image to your preferred shape. It's that simple.
At Kaffein, we're obsessed with crafting exceptional user experiences. Recently, we tackled the challenge of designing unique FUT-style cards for each user. This was a two-part challenge: One, Creating the shapes of the cards, and Two, Cutting/Masking the user's profile picture with the custom shape.Part 1. Creating the Shapes of FUT-style CardsDesigning complex shapes from scratch can be daunting. While direct path creation is an option for skilled designers, we opted for a more accessible approach. Here's how we simplified the process:
With our custom shape ready, the next step involved masking the user's profile picture within it.
03Jan2025
3 min read
At Kaffein, we're obsessed with crafting exceptional user experiences. Recently, we tackled the challenge of designing unique FUT-style cards for each user. This was a two-part challenge: One, Creating the shapes of the cards, and Two, Cutting/Masking the user's profile picture with the custom shape.Part 1. Creating the Shapes of FUT-style CardsDesigning complex shapes from scratch can be daunting. While direct path creation is an option for skilled designers, we opted for a more accessible approach. Here's how we simplified the process:
•
Sourcing PNG Images: The first step is finding a PNG image of your desired card shape. A simple Google search often yields great results.
•
Tracing and Refining the Image: Downloaded images might contain colors, gradients, or extra elements. We needed a clean, single-color (white, in our case) PNG. To achieve this, we converted the PNG to a vector format. This simplifies the process of removing unwanted elements and ensures a crisp, scalable shape. Once converted, export the vector image back to PNG.
Resources: If you are looking for FUT-style cards, try this link & if you are looking for online tools to convert PNG -> Vector format, try this tool
Part 2. Cutting/Masking the user's Profile Picture with the Custom ShapeFirst things first, here is the shape that I am going to use to create my custom FUT-style card.
You can achieve this withModifier.drawWithContent.
The drawWithContent allows us to customize the drawing behavior of Composables.
The most important things to notice here:
1.
drawContent(): Calling drawContent() is essential. This ensures the content within our Composable, including the user's profile picture, gets drawn.
2.
Size Matters: Defining the size of both the image and the content is crucial, as drawImage uses the original image size by default.
3.
BlendMode.DstIn:This blend mode is the heart of the masking effect. It uses the shape of the source image (card shape) as a mask and displays the content of the destination (user's profile picture) within that shape.
4.
Modifier.graphicsLayer { compositingStrategy = Offscreen }: This prevents a black background artifact around the clipped image.
Adding the Finishing Touches: We placed another Box within the main Box to add the card's border image, creating a polished FUT-style card design.
Voila! My FUT-style card is ready.ConclusionCreating custom-shaped cards with masked images is easier than it looks, thanks to Jetpack Compose's powerful modifiers. We hope this guide empowers you to craft unique and engaging UI elements in your own projects.
