Hi guys I have a list which is coming from the server I am l

Question

Hi guys I have a list which is coming from the server I am learning drawing on `canvas` I don t know height of `canvas` So I learnt basic how to measure text using `rememberTextMeasurer` with `TextLayoutResult` for single item and provide height on `canvas` If I mock 5 item in the list then how can we measure all text height at a time and provide in `canvas` I am trying to put my `rememberTextMeasurer` and `TextLayoutResult` inside `movieList` of `forEach` it complains about

KotlinLeaner · Answer

``` OptIn ExperimentalTextApi class Composable fun TimeLineComposable Column modifier = Modifier fillMaxSize val movieList = getMovieList val heading = AnnotatedString Welcome to heading val titleTextMeasurer = rememberTextMeasurer val titleTextLayoutResult = remember titleTextMeasurer measure heading TextStyle fontSize = 16 sp color = Color White val canvasHeight = with LocalDensity current titleTextLayoutResult size height toDp Canvas modifier = Modifier fillMaxWidth background Color Black height canvasHeight drawText textLayoutResult = titleTextLayoutResult topLeft = Offset x = center x titleTextLayoutResult size width 2 y = center y titleTextLayoutResult size height 2 ```

KotlinLeaner · Answer

Error

KotlinLeaner · Answer

``` OptIn ExperimentalTextApi class Composable fun TimeLineComposable Column modifier = Modifier fillMaxSize val movieList = getMovieList val heading = AnnotatedString Welcome to heading Canvas modifier = Modifier fillMaxWidth background Color Black height canvasHeight movieList forEach val titleTextMeasurer = rememberTextMeasurer val titleTextLayoutResult = remember titleTextMeasurer measure heading TextStyle fontSize = 16 sp color = Color White val canvasHeight = with LocalDensity current titleTextLayoutResult size height toDp drawText textLayoutResult = titleTextLayoutResult topLeft = Offset x = center x titleTextLayoutResult size width 2 y = center y titleTextLayoutResult size height 2 ```

Zach Klippenstein (he/him) [MOD] · Answer

remember the text measurer in your composable then call `measure` on it as many times as you need from in your canvas

Zach Klippenstein (he/him) [MOD] · Answer

note that measuring is expensive you probably want to measure from the layout phase or the draw cache using `drawWithCache`

Zach Klippenstein (he/him) [MOD] · Answer

cc < Halil Ozercan> in case i m super wrong

KotlinLeaner · Answer

Yes put the `rememberTextMeasurer` outside of canvas block

KotlinLeaner · Answer

Now I want the canvas height how can I find the height

Zach Klippenstein (he/him) [MOD] · Answer

Look at the receiver type of the Canvas lambda check its properties

KotlinLeaner · Answer

Sorry I mean how can I provide the height on canvas

KotlinLeaner · Answer

``` OptIn ExperimentalTextApi class Composable fun TimeLineComposable Column modifier = Modifier fillMaxSize val movieList = getMovieList val titleTextMeasurer = rememberTextMeasurer var canvasHeight by remember mutableStateOf 0 dp Canvas modifier = Modifier fillMaxWidth background Color Black height canvasHeight movieList forEach val titleTextLayoutResult = titleTextMeasurer measure AnnotatedString it showDay TextStyle fontSize = 16 sp color = Color White canvasHeight = titleTextLayoutResult size height toDp drawText textLayoutResult = titleTextLayoutResult topLeft = Offset x = center x titleTextLayoutResult size width 2 y = center y titleTextLayoutResult size height 2 ``` This is not working because height didn t get it by `canvasHeight` ```Canvas modifier = Modifier fillMaxWidth background Color Black height canvasHeight ```

Zach Klippenstein (he/him) [MOD] · Answer

How do you want to measure the canvas

KotlinLeaner · Answer

I want to measure based on list item size That s why I used ```val titleTextLayoutResult = titleTextMeasurer measure AnnotatedString it showDay TextStyle fontSize = 16 sp color = Color White canvasHeight += titleTextLayoutResult size height toDp ```

Zach Klippenstein (he/him) [MOD] · Answer

ok so then you need to use a layout modifier make the measure calls in the measure pass and calculate your layout from there E g ```Modifier layout measurable constraints gt 1 Measure all your texts using textMeasurer measure 2 Calculate height width based on constraints and text measurement results e g val height = textBounds sumOf it height coerceAtMost constraints maxHeight 3 Determine child constraints using that height and whatever you want for width e g val childConstraints = constraints copy minHeight = height maxHeight = height val placeable = measurable measure childConstraints layout placeable width placeable height placeable place 0 0 ```

Zach Klippenstein (he/him) [MOD] · Answer

but at that point you re just reimplementing `Column` with a bunch of child `BasicText`s so why not just do that

KotlinLeaner · Answer

Actually I want to build more complex Ui then these So I am exploring the use of all these

KotlinLeaner · Answer

I want to build timeline view in compose This is my <https github com vivek modi TimeLine Compose blob master app src main java com hub timeline MainActivity kt|github> code I made it in canvas but there is a problem on there My multiple view get overlap each other

KotlinLeaner · Answer

Is there any example how to use layout modifier in canvas

Halil Ozercan · Answer

You can refer to this video on how to implement a custom layout with a similar functionality This is the repo that contains the project from video

KotlinLeaner · Answer

Sure thanks a lot i ll take a look now

Arjan van Wieringen · Answer

Doesn t canvas drawscope contain height and width info

KotlinLeaner · Answer

It will not give you an accurate height to draw textview

Arjan van Wieringen · Answer

Why not accurate It is literally the size of the canvas in pixels

KotlinLeaner · Answer

Because you don t know how much in pixel it will draw

KotlinLeaner · Answer

I am drawing on the basics of text height

Arjan van Wieringen · Answer

You want to know the size of the text height not the canvas

KotlinLeaner · Answer

Yes

Arjan van Wieringen · Answer

But in your first post you write I don t know height of `canvas`

KotlinLeaner · Answer

After that I was correct in the next statement