0

Context:

I need to create a PDF report using PdfDocument() drawn from AndroidView


In order to do this, I have to get a set of views with a consistent representation across devices.

the pages of the report (vertical A4) are within a parent :

 BoxWithConstraints(modifier = Modifier.fillMaxSize()) {

and each page have a specific ratio applied to it:

Column(
   modifier = Modifier
      .size(width = maxWidth, height = maxWidth.times(A4_PAGE_RATIO))
      .verticalScroll(rememberScrollState())
   ) {

here is an extract of the code that generate the view inside the above column:

Column(
   modifier = Modifier
      .fillMaxSize()
      .background(Color.White),
   ) {
   // DISPLAY PDF CONTENT
   for (pdfPart in allPdfPartAdapters) {
      Box(modifier = Modifier) {
         pdfPart.PdfPartPreview(modifier = Modifier)
      }
   }
}

Of course, the result here is not consistent on different screen size density (text are relatively smaller on large width for instance):

on wide screen like a tablet:

on tablet

on smaller screen like a phone:

on phone


What I have tried so far:

My most successfull attempt has been to scale the content either using modifier.scale or modifier.graphicsLayer to a specific ratio and enforce a requiredWidth on children

Column(
   modifier = Modifier
      .fillMaxSize()
      .background(Color.White),
   ) {
   val ratio = maxWidth/ 300f // here, 300 is just the enforced size of the children
   // DISPLAY PDF CONTENT
   for (pdfPart in allPdfPartAdapters) {
      Box(modifier = Modifier
            .graphicsLayer(
                scaleX = ratio,
                scaleY = ratio,
                transformOrigin = TransformOrigin(0f, 0f),
    )) {
         pdfPart.PdfPartPreview(modifier = Modifier.requiredWidth(width = 300.dp))
      }
   }
}

Here, one of the issues is that I do not know what the size of the composable in it should be, so i do not know which ratio to apply (the arbitrary 300).

Still, the display is not perfectly consistent:

small width:

enforced size small width device

bigger width:

enforced size big width device

My guess for inconsistency here is that BowWithConstraint give the maxwidth constraint and not the real width but using a onGloballyPositioned to retrieve real width (Get height of element Jetpack Compose) was not better.

So how can I scale the whole composable to get a consistent representation among any device width?

Thank you for the time taken to read this question.

pierre.b
  • 13
  • 3

0 Answers0