Jetpack Compose Bottom Border

Goal

This article will show you a custom way of drawing bottom borders step by step using Canvas. Hopefully at the end of it, you will learn not only how to draw a bottom border, but you will be able to use that knowledge to draw any border on any side (top, bottom, left, right) you want.

Solution

Drawing something on the screen basically leads to accessing the canvas and telling it where to draw which pixel. Luckily for us, Jetpack Compose’s Modifier element comes with the method drawBehind, that provides us access to the canvas behind given UI element with a lot of drawing options through DrawScope.

drawLine

To draw any line, there are a couple of parameters we need to define:

  • color,
  • width,
  • start point,
  • end point.

Conclusion

I tried to demonstrate how you can use the drawBehind function to draw your bottom border with this straightforward example. I also believe you gained a bit deeper knowledge about drawBehind and how to navigate within coordinate system of the UI component’s canvas. So hopefully next time, you are going to be able to modify this solution in order to fulfil your other custom UI design needs.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ban Markovic

Ban Markovic

97 Followers

Android Engineer who loves the productivity of Jetpack Compose