How we implemented continuous corners using squircles in the Blinkit iOS app?
In 1981, Xerox PARC introduced the first Graphical User Interface (GUI), marking a significant shift in computing. Over 43 years, rounded corners have evolved from a design embellishment to an industry standard in both software and hardware. Research shows that rounded rectangles, easier on the eyes and requiring less cognitive processing, now adorn modern screens.
The Macintosh, launched in 1984, played a crucial role in this evolution. Bill Atkinson’s QuickDraw tool, initially designed for circles and ellipses, evolved to render rounded rectangles - as suggested by Steve Jobs - enhancing familiarity and friendliness in design. This capability, introduced in a program called ‘RoundedRects’, reflected a pivotal moment in design history.
Even though the affair of rounded rectangles with desktop GUI dates back to the mid 1980s, they gained widespread popularity in mobile GUI around June, 2013 with the launch of iOS 7. Compared to iOS 6, there was a notable shift in the use of rounded corners.
Left iOS 6, Right iOS 7
So, rounded corners is not a modern norm but a concept which dates back from almost around the time when graphical user interfaces started commercializing.
Our app already has rounded corners that we implemented using the native apple API (layer.cornerRadius) but we wanted to go one step further and make it more continuous.
And since swift doesn’t allow us to modify their existing layers, we went ahead and made our own version of it.
Implementation
Given some background, we use a modified version of the Sushi framework developed by and for Zomato. This framework is responsible for rendering fundamental components - like view, button, steppers, label, cards, images and more in the app - and configuring the visual properties.
“The answer to most engineering problems is a simple dumb solution, but we often find ourselves overengineering the solutions.” Keeping that in mind, we went back to the most basic form of graphic representation: Shape. Just like the shapes we see everyday like circle, square and rectangle, we came across this shape that is intermediate between a square and a circle: Squircle. (Squircle = Square + Circle)
This app wide change started with making a `SquircleView` which uses APIs from bezier paths to draw this view. With this change, we deprecated the use of `layer` for setting visual properties like corner radius, shadow and border. So, instead of doing something like:
> view.layer.cornerRadius = 12
We write something like the following now:
> view.shapeLayer.borderRadius = 12
In the above line of code, shapeLayer stands for the squircle layer, which we further alias into a border config making it cleaner to set the border.
With 6000 lines of changes throughout the app components, we achieved our goals. The majority of change was in changing the existing border and shadow implementation as shown above. So, wherever operations were performed on `layer` (CALayer), we are replaced with operations on our own custom layer (namely `shapeLayer`).
Benefits and Drawbacks
Even though the difference between the native iOS rounded corner and squircle is not drastic at macro level, when implemented at larger scale, this attention to detail is noticeable and provides a friendlier user interface enhancing the already familiar experience provided by rounded corners.
Just like every coin has two sides, this implementation has drawbacks too. Since a squircle shaped UIView was inserted in all components at base levels, the same screen renders more views per screen.
We introduced full fledged squircles to blinkit app with the update in 15.34 and have been keeping up to this since then.
If you are looking forward to integrating ZSquircleView in your project, feel free to check out our ZSquirclesView on github. A sincere appreciation goes to individuals like Gaurav Yadav and Inder Deep Singh from Zomato and Nitigya Kapoor from blinkit, whose insights and expertise have illuminated this exploration. Their valuable contributions, shared generously, have enriched the discourse around this topic. Together, we propel the ever-evolving realm of technology forward. We are merely 1% done.
The data team has grown tremendously at Blinkit in the past 12 months; with increasing demands of optimisations, growth and efficiencies from business our analytics also have grown from nascent to mature sta
Setting up our printout delivery store has been extremely satisfying at many levels. At one end is the joy from customers discovering an easy, home-delivered solution for last-minute printouts.
In today’s world, given the pace at which data operates, we need a tool that can help us to generate reports faster and bring out insights within milliseconds.
