How I made CurvedBottomSheet

Photo by Fabien Bazanegue on Unsplash

Hi everyone. In this story, I’m gonna tell you how I drew and animated the curved shapes using Cubic Bezier Curves.For motivation, you must know, you don’t have to be an expert on Mathematics to draw these kind of shapes. After this story and understood the logic behind of scenes, you must only imagine and draw it! Sometimes we want to escape from classics and want to try something new, extraordinary.

I won’t explain the usage of library because it is already shown in its readme . I will explain the logic behind it. For those who wants to see the result or who don’t like reading stories or who is impatient, here is the output of this story.

TayfunCesur/CurvedBottomSheet

Firstly, you must decide the shape you want to draw. To do this, you can use online tools. I used this tool which is really useful.

In this story, our shape will be like below and that shows us what we need to do actually.

So, as the animation above shows us, we need 4 point. Start point, end point and two control point. The two control point decides the beauty of curve. For this reason, it is pretty important for us. Our story contains two part. First part is determining the points and draw the initial state, and the second part is bind it to Bottom Sheet and move start and end points while BottomSheet is scrolling.

- First Part

- Determining the points

First, we need to find a radius and calculate it via some formula, because it may changes with different screens. For this curve, we can calculate the radius as;

r = Screen Width / 6

According to above calculation w/6 is the best value for us.Our points will be like that,

• Start Point (0, radius)
• Control Point 1 (startPoint.x +radius, startPoint.y-radius)
• End Point (viewWidth, radius)
• Control Point 2 (endPoint.x - radius, endPoint.y - radius)

Congratulations! You have just learned the hardest part of story. The rest of the job is just the implementation.

- The Initial State

Here, there is a method of View, onSizeChanged. As the documentation says,

This is called during layout when the size of this view has changed. 

So, Android system doesn’t know the size of view at the start, it needs to calculate it. When calculation is finished, the system calls the onSizeChanged. After this, we are good to go, we can determine the points in here. The example code is shown below,

After define the points, we must apply them to our Path like this,

All steps are described below

Explanation of steps

Congratulations! We have just finished the first part. Now, we have a curved view.

- Second Part

In this part, we will create a BottomSheetBehavior from our curved view and we will move the start and end points while BottomSheet is scrolling just like below,

To move our points, we must pass the offset value through our view. For this, we must add a public method to our view like ‘setCornerRadius’ and pass it when scrolling. The example code is shown below,

And when setCornerRadius is called ,our points must depend on the radius value like below. We must change our points with respect to this value.

Here is the outputs of this curve variations. You can find all the implementations in the CurvedBottomSheet

Sample variations of this curve

- Conclusion

I have tried to explain all details and what I know. If you learn the logic, you can draw what you dream. For example, after I learned these things, I created this shape below via just modifying the points.

Like Samsung Lock Screen

It is not completed yet. After it completes, I will add many variations to CurvedBottomSheet

TayfunCesur/CurvedBottomSheet

- Greetings

Thank you for your time and looking forward to your feedbacks. Pull requests are most welcomed.