Android view Factory cannot detect the correct height of TextView in jetpack compose

Question

I'm using jetpack compose, and I need to show HTML text. Since the compose Text function doesn't support this functionality, I use the AndroidView factory to load my HTML inside a TextView:

AndroidView(factory = { context ->
    TextView(context).apply {
        text = HtmlCompat.fromHtml(
            state.description,
            HtmlCompat.FROM_HTML_MODE_LEGACY
        )
        this.textSize = 16f
        layoutParams = ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT)
    }
})

But the problem is the height of TextView is not computed correctly, and the text cannot be shown completely. I also tried to add a Modifier to AndroidView but no progress:

modifier = Modifier.fillMaxWidth().wrapContentHeight())

I am using this element inside a Scrollable column, so I can not use fillMaxHeight. How can I solve this problem?

The loaded HTML is :

<meta charset="utf-8">
    <div class="AccordionSection3__heading AccordionSection3__heading--colour AccordionSection3__heading--pdpAccordion" data-mce-fragment="1">
    <div class="EditorialAccordion82__accordionTitle EditorialAccordion82__accordionTitle--pdpAccordion" data-mce-fragment="1">
    <meta charset="utf-8">
    <div data-mce-fragment="1">
    <p data-mce-fragment="1"><b data-mce-fragment="1">Before adding to cart, select the Rental Duration and choose the Date you want your product to arrive.</b><br data-mce-fragment="1"></p>
    <div class="p1" data-mce-fragment="1"><del data-mce-fragment="1"><del data-mce-fragment="1"><del data-mce-fragment="1"><del data-mce-fragment="1">RRP £230</del></del></del></del></div>
    <div class="p1" data-mce-fragment="1">
    <i data-mce-fragment="1"></i><br data-mce-fragment="1">
    </div>
    <p data-mce-fragment="1"><strong data-mce-fragment="1">Style Notes: </strong>Rotate’s Theresa dress is a signature silhouette from the Copenhagen-based label and this check iteration repurposes the partywear staple for versatile styling. Shaped with a high neckline and leg-of-mutton sleeves, this form-fitting design will take your occasion edit by storm while exuding contemporary appeal</p>
    </div>
    <p data-mce-fragment="1"><strong data-mce-fragment="1">Size &amp; Fit:</strong><span data-mce-fragment="1"> </span>Fits large to size, take one size smaller than normal. Designed to be slightly fitted at the bust and waist, loose at the hip</p>
    <p data-mce-fragment="1"><strong data-mce-fragment="1">Product Details: </strong>51% viscose, 29% polyester, 13% linen, 7% polyamide</p>
    </div>
    </div>

Without using a specific height until the "Style Notes: " line is shown, but after setting a height in the modifier, all are shown. here is full code of layout:

   BottomSheetScaffold(
            modifier = Modifier
                .padding(paddingValues)
                .fillMaxSize(),
            scaffoldState = scaffoldState,
            sheetPeekHeight = 0.dp,
            sheetContent = {}
        ) { innerPadding ->
            Column(
                modifier = Modifier
                    .padding(innerPadding)
                    .verticalScroll(scrollState)
                    .fillMaxSize()
            ) {
                Column(
                    modifier = Modifier
                        .fillMaxWidth()
                        .fillMaxHeight()
                        .padding(MaterialTheme.space.medium)
                ) {
                    AndroidView(
                        factory = { context ->
                            TextView(context).apply { this.textSize = 16f }
                        },
                        update = {
                            it.text = HtmlCompat.fromHtml(
                                state.description,
                                HtmlCompat.FROM_HTML_MODE_LEGACY
                            )
                            it.layoutParams =
                                ViewGroup.LayoutParams(
                                    ViewGroup.LayoutParams.MATCH_PARENT,
                                    ViewGroup.LayoutParams.MATCH_PARENT
                                )
                        },
                    )
                }
            }
        }

This is a screenshot from when I don't use a specific height:

And this is when I use specific heights like: Modifier.height(500.dp)

score 0 · Answer 1 · answered Aug 06 '22 at 18:11

0

Use

AndroidView(
    factory = { context -> TextView(context).apply {
        this.textSize = 16f
        }
    },
    update = { it.text = HtmlCompat.fromHtml(html, HtmlCompat.FROM_HTML_MODE_LEGACY) }
)

answered Aug 06 '22 at 18:11

Gabriele Mariotti

320,139
94
887
841

Thank you for your response. But unfortunately, it doesn't make any changes. – Mohammad Derakhshan Aug 07 '22 at 04:51
Can you post the htlm used? – Gabriele Mariotti Aug 07 '22 at 06:24
Of course, I updated the question. I also provided almost all the codes of the screen. – Mohammad Derakhshan Aug 07 '22 at 07:24
I am not able to replicate your issue – Gabriele Mariotti Aug 07 '22 at 07:31
Do you mean the code work well for you? Because I thought the problem was with my emulator, I tested it on my cellphone, and the result was the same. – Mohammad Derakhshan Aug 07 '22 at 07:54
Pls post a reproducible code in your question. – Gabriele Mariotti Aug 07 '22 at 07:59
I am so sorry, but I don't know how to provide you with a way to fetch the HTML code since it is fetched from the server, and you need AccessToken for that. But if you mean just the UI, I updated the section that I said is complete UI. also added some screenshots from the state I set `modifier.height(500.dp)`, and when I don't – Mohammad Derakhshan Aug 07 '22 at 08:17

Android view Factory cannot detect the correct height of TextView in jetpack compose

1 Answers1