Questions tagged [android-jetpack-compose-canvas]
79 questions
1
vote
1 answer
How to animate drawPath() on jetpack compose canvas
I have drawn a heart using path.cubicTo() method
Canvas(modifier = Modifier.size(100.dp)) {
val path = Path()
path.moveTo(0f, size.height / 3)
path.cubicTo(0f, 0f, size.width / 2, 0f, size.width / 2, size.height…

Abubakr
- 15
- 6
1
vote
1 answer
compose modifiy icon set part of the color
I have an icon to indicate sequence.
My requirement is that when the order is reversed, the lower half of the icon turns blue; when the order is turned, the upper half of the icon turns blue.
I found a related question, but it conflicts with my…

SageJustus
- 631
- 3
- 9
1
vote
1 answer
How to make vertical dash/dotted in jetpack compose
I want to make dashed/dotted vertical line in canvas. I tried to use this answer 1. It works but not perfect. I'll show you my code, what I am tried.
@Composable
fun DrawProgressBar() {
val rangeComposition = RangeComposition()
val itemLst =…

Kotlin Learner
- 3,995
- 6
- 47
- 127
1
vote
1 answer
How to draw vertical line in canvas jetpack compose
I have value in Percentage from 0 to 100% which is in Float type . I am drawing vertical lines, I am using Offset which value is also in Float type. So how can I convert values in pixel values?
Values are
Pixel in size 996.0
2023-02-12…

Kotlin Learner
- 3,995
- 6
- 47
- 127
1
vote
1 answer
How to make rounded corner in drawLine in jetpack compose
I am using Canvas Api to draw something. I want to draw line with rounded corner. Line is draw without any problem. But I cannot figure out which attribute for corner radius.
val boxSize = 30.dp
Box(modifier = Modifier
…

Kotlin Learner
- 3,995
- 6
- 47
- 127
1
vote
1 answer
How to apply a ripple to an rectangle drawn in Jetpack compose's canvas?
I have a sample composable function that's contains a rectangle drawn in a Canvas composable. The detectTapGestures within the pointerInput Modifier is used to detect whenever any point in the Canvas is touched, specifically within the rectangle…

Kun.tito
- 165
- 1
- 7
1
vote
2 answers
How draw a line between 2 circles with canvas in jetpack compose?
I want draw a line between circles in the screen,
I have start offset but I can not find end Offset?
How can I find that?
thank you
I add a hard code number (59.dp.toPx()) but I want to find left offset of next circle
my code:
@Composable
fun…

melikaafrakhteh
- 305
- 1
- 2
- 8
1
vote
1 answer
How do I design an adventure path with curved line in Jetpack Compose?
I want to design an adventure path for educational levels in Jetpack Compose Android, where each level is connected to the next and previous level by a curved line.
Each level is a circular view for example an image that can be clicked.

Majid Ahmadi Jebeli
- 517
- 1
- 6
- 22
1
vote
1 answer
Why the compose canvas draw things only show at preview function but not display on the running screen
Descript
I want to draw a line at the compose with the compose canvas inside a compose widget,but it's just show at the preview!
If just copy the canvas part code,it can Correct display!
The compose code
Card(
elevation = 6.dp,
shape…

LuoBo
- 92
- 7
1
vote
1 answer
How to divide the stroke of a circle at equal intervals in Jetpack compose canvas?
How to achieve the following result using Compose Canvas.

Sahal Nazar
- 625
- 4
- 9
1
vote
1 answer
Why isn't conversion from dp to px precise?
I'm trying to draw a black rectangle that covers the yellow Box composable, After converting the size to pixels. The Box is still slightly visible underneath. Is there a way around this?
val size = 50.dp
Box(
modifier = Modifier
…

Kun.tito
- 165
- 1
- 7
1
vote
1 answer
Gap between two drawings in Jetpack compose Canvas
I am trying to make a rectangle and an arc attached to rectangle's bottom. I have used the size provided by the drawScope to lay the drawings on screen but I am unable to get why there is an unnecessary gap between the two drawings even if the…

Anurag Singh
- 156
- 2
- 14
1
vote
0 answers
How to create a Path will out fill in Jetpack Compose?
I have a Black box out of which I want to take away a specific path.
Code
@Composable
fun PathDiff() {
Canvas(
modifier = Modifier
.fillMaxSize(),
) {
val rect1 = Path().apply {
…

Abhimanyu
- 11,351
- 7
- 51
- 121
1
vote
1 answer
Confusing behaviour by the 'rotate' transformation of Compose Canvas
I have a simple Composable Canvas that draws a shape multiple times in different positions, and I wish to apply rotation to each iteration of the shape as per a particular algorithm. However, I am unable to fully control the positioning of the…

Richard Onslow Roper
- 5,477
- 2
- 11
- 42
1
vote
1 answer
How to add arc for rounded corner for cut off area in jetpack compose?
I wanted the rounded curve around the corner of triangle in left and right. I tried to add arc but I don't know it's not working maybe the coordinate are wrong . Or any other methods ?
@Composable
fun NavBarCustomShape() {
Canvas(modifier =…

Jeevan Rupacha
- 3,055
- 1
- 15
- 29