# Jetpack Compose Bottom Border

DevFeed: [Jetpack Compose Bottom Border](<https://devfeed.tech/articles/jetpack-compose-bottom-border-25848.md>)

Original publisher: [Read original article](<https://medium.com/@banmarkovic/jetpack-compose-bottom-border-8f1662c2aa84?source=rss-8aced922ece------2>)

Author: Ban Markovic

Published: 2022-11-14T10:36:16Z

Content type: tutorial

Language: en

Sources: [Stories by Ban Markovic on Medium](<https://devfeed.tech/sources/stories-by-ban-markovic-on-medium.md>)

Topics: [Jetpack Compose](<https://devfeed.tech/topics/jetpack-compose.md>), [Canvas](<https://devfeed.tech/topics/canvas.md>), [Android](<https://devfeed.tech/topics/android.md>), [ui](<https://devfeed.tech/topics/ui.md>)

Tags: [android](<https://devfeed.tech/tags/android.md>), [android-app-development](<https://devfeed.tech/tags/android-app-development.md>), [androiddev](<https://devfeed.tech/tags/androiddev.md>), [article](<https://devfeed.tech/tags/article.md>), [canvas](<https://devfeed.tech/tags/canvas.md>), [how-to](<https://devfeed.tech/tags/how-to.md>), [jetpack-compose](<https://devfeed.tech/tags/jetpack-compose.md>), [jetpack-compose-tutorial](<https://devfeed.tech/tags/jetpack-compose-tutorial.md>)

## AI overview

A tutorial showing how to draw a bottom border on a Jetpack Compose UI component using Canvas, Modifier.drawBehind, DrawScope, and drawLine. It explains the coordinate system and converting dp stroke width to pixels.

## Source excerpt

Android Jetpack Compose provides us API for drawing borders on any UI component, and it couldn't be any easier. But, drawing single edge borders isn't supported yet, by default. 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. drawBehind -- Draw into a Canvas behind the modified content. DrawScope -- Creates a scoped drawing environment with the provided Canvas. The DrawScope has a lot of helper methods for drawing onto our canvas. In our case, we want to draw the bottom border, which is basically the simple line that is placed at the bottom of our UI component. By having access to the DrawScope and its Canvas, we can use DrawScope's helper function drawLine to draw our bottom border. drawLine To draw any line, there are a couple of parameters we need to define: color, width, start point, end point. In this example, we will draw a red line with the width of 4 dp (but you can change this to your liking, sky is the limit). The only step that is missing for drawing our bottom border is defining our start and end point. Let's first look at our Text UI component to have a better understanding of the canvas that we are working with. In this example, our canvas is basically everything that is gray, and the bottom of it we want to draw a line. Canvas is represented with a coordinate system, so every point is defined by two values x and y. Top-left corner of our UI component's canvas, is represented with (0, 0). Bottom-right co