Android: How can I make this curve effect at the top and bottom like in the image?

Question

I imagine it's possible using bezier curves, but I have no idea

Answer 1

To give you the short answer, there are multiple ways, some of which are deprecated. As a rule of thumb, if there is something diagonal or curved, you are either seeing javascript or some form of image or an embedded SVG inside a css file. I will skip the javascript approaches here, as they involve actual programming, and I suspect that this is not what you want to do here. (If I am wrong, take a look at the documentation for the canvas html entity and the ways you can draw on them with javascript!)

1. Inline-SVG inside CSS

The way that is probably most modern is to write this as inline svg in a css stylesheet. svg is a vector based image format for the web. The format is descriptive and humanly readable, but I guess there are also editors to do it in a clicky-style manner. The accepted answer to this question mentions the way it can be done in the code.

The responder gives the following example for an inline svg:

body {
    background-image: 
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><linearGradient id='gradient'><stop offset='10%' stop-color='%23F00'/><stop offset='90%' stop-color='%23fcc'/> </linearGradient><rect fill='url(%23gradient)' x='0' y='0' width='100%' height='100%'/></svg>");
}

Despite the fact that this looks a bit convoluted, it is a pretty good way to do this, because if your page is run by a dynamic server, you can make all the colors in the graphic dynamic values that your server can infer. That way, you get to change the colors of your curve alongside the rest of your page. Note that there are ways to linebreak inside svg files, which makes them a lot more readable!

2. Inline-SVG (Base64) in CSS

You can also encode this information in base64 if you like, but that complicates the changing of the colors in the future, if ever relevant.

3. SVG-Image File

You could also generate the image as a resource (I strongly suggest to use the SVG format anyway) and insert it into the page at the correct spot.

4. (deprecated) Pixelated Image File

In the earlier days of the web, when people were tinkering a lot with their personal home pages and pages for schools, sport clubs and such, it was often observable that people just inserted pixelated images to create slopes and curves. This is something I would strongly disencourage today, as many devices scale pages in unforseeable ways, and your slope would look rather sad using this technique.