Custom Segmented Controls

Spacing

To leave space for the segmented control and to make sure the Card Container does not cover the segmented control, set the Offset Y property to 100.

Segmented Controls Container

• Add a Stack V right below the Search Bar Container and rename it Segmented Controls Container
• In Layout, set the Height to Auto and the paddings to 128, 16, 0 ,16
• We also want this UI to stick to the top so set Pin To Top Left and Pin To Page
• Set the Depth to 10 so its below the Search Bar Container

Library

If you need quick UI, you can always go to the Play Library and under Tabs, select Segment.

Segmented Controls

We will create a custom segmented control to fit our design.

• Add a Stack H and rename it Segmented Controls
• In Settings, set the Gap to 40pt
• In Layout, set the Width to 100%, Height to 54pt and paddings to 16
• In Appearance, add a new color for background color #313A5B - #21273D
• Set corner Radius to 20
• Add Borders 1pt, color #8576DC, opacity 20%

Control Button

• Add a Stack H and rename it Control Button
• Set the Gap to 4
• In Layout, set the Width and Height to Auto

Since we will use custom icons and not from SF Symbols, Add an SVG element so we don’t lose sharpness on the image.

• In Settings, select the Cabins SVG
• In Layout, set the Width and the Height to 24pt
• Add a text and name it: Title
• In Settings, set the Text to “Cabins”, the Type to Footnote and Color to System Gray
• In Layout, set the Width and Height to Auto

Dot

In the demo, tapping on the button moves the dot to that location. The dot indicates which selection you are on.

• Add a Stack and rename it Dot Container
• Set Distribution to Center
• In Layout, set the Width to 20% and Height to 6pt
• Set Pin To Bottom Left
• Set the Offset X to 16 and Offset Y to -8
• In the Stack, add a stack and rename it Dot
• In Layout, set the Width and the Height to 4pt
• In Appearance, set the background color #9DDFF3 - #0F54E8
• Add Corner Radius to 16
• Add Borders 0.5pt, color white, opacity 20%

Dot Animation

For this animation, we want to move the dot to the tapped button. So select the Control Button.

• In Interactions, add Triggers for Tap and on the action, choose Set Position X. Target is the Dot Container, Type is Position X To Object, Start X to Current Value and Object to Self
• For the animation, set the duration to 0.5s and Easing to ease in and out

Next, let's add another action to change the width of the container to match the button since all buttons have different widths.

• Choose Set Width, Target is the Dot Container, Type is Width to Object and Object is self
• For the animation, set the duration to 0.5s and Easing to ease in and out

• Duplicate the Control Button 3 more times

Mask

When we scroll, the cards appear above the segmented controls. To fix that, we will use a mask.

• Add a Stack and rename it Mask
• Set the Height to 150pt
• Set Pin To Top Left, Pin to Page and the Depth to 3
• Change the background color to #17182B

Don’t forgot to make the Segmented Controls into a component.