How to create online status view | Swift 5

Abu Bäkr
2 min readJan 30, 2021
Online status circle view

To build the online status view circle in swift programatically, we’ll go through following steps:

1: Create an ImageView that will contain the main image.

2: Create a dummyView exactly above the imageView which will take small circle as a subview.

3: Finally create small circle view and align it in such a way that it gets in the exact position as above.

Step 1 :

First create a UIImageView, which will hold the profile picture.

Create ProfilePicture UIImageView

Then ,also give it some constraints.

Constraints to ProfilePicture

Step 2 :

Repeat the same procedure, and create a UIView with exact constraints. But while creating the view, keep clipsToBounds = false.

Step 3 :

Finally, we will create small circle view, and we will add it as a subview of the dummy circular view.

Create small circle view

Give it constraints for height and width.You can give those accordingly.

Constraints to small circle view

Now, the moment of truth, that is to give constraints for x and y position. For doing that, we’ll write a function, that will return us the exact position for x and y coordinates of our view according the angle we provide.

Function to calculate the x&y position

In the above function, we are giving angle as a parameter, and based on that angle, we are calculating the position, so that the view will remain intact at the desired position. Now we will give the remaining two constraints.

Run the project, and you’ll be fascinated by the result!