question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

SVG image is not shown in dynamically added layout

See original GitHub issue

Here is my simplest reproducible example: I have a linear layout cell.xml which is dynamically inflated into a parent activity_main.xml layout in the onCreate method:

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)

    val linearLayout = findViewById<LinearLayout>(R.id.linearLayout)
    val cell = layoutInflater.inflate(R.layout.cell, linearLayout, false)
    val iv = cell.findViewById<ImageView>(R.id.image_cell)
    iv.load("file:///android_asset/any.svg")
    linearLayout.addView(cell)
}

My activity_main.xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/linearLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">
</LinearLayout>

My cell.xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/image_parent"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <ImageView
        android:id="@+id/image_cell"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:contentDescription="@+string/desc"
        android:gravity="center"/>
</LinearLayout>

The svg displays correctly if I use attribute android:layout_height="wrap_content" inside the image view, but it won’t display the svg image if android:layout_height="match_parent" is used instead. For the record, I need the image_parent linear layout to have android:layout_height="match_parent" because the actual layouts of both xml’s contain some background drawables which eventually require the height attribute of image_parent to be set to match_parent.

I believe this problem applies to any svg, but if you cannot reproduce the issue please let me know, I will upload one svg file which I used.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
neoh-zzcommented, Apr 27, 2020

I agree that the issue stems from the 0 height measured when the image is loaded (changing match_parent in activity_main.xml does not work). My views are actually dynamically added, cell.xml is just a cell of a table layout, whose cell widths are programmatically calculated. Currently I can solve this problem by (i) use android:layout_height=wrap_content instead of android:layout_height=match_parent in the imageView, or (ii) force trigger the imageView to redraw by calling invalidate() in OnGlobalLayoutListener() whenever the view bounds are newly calculated. The second solution is probably the safest way to go.

0reactions
colinrtwhitecommented, Apr 26, 2020

@neoh-zz Circling back on this. I think this might be caused by your layout being measured as 0 height due to your LinearLayout being set to android:layout_height="wrap_content" in activity_main.xml. Does it work if you change it to match_parent? Optionally, you could set android:scaleType="centerCrop" on your ImageView.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Inserting an image in SVG dynamically does not display
When I produce the very same image tag using Javascript the image is not displayed. Looking at the network tab it seems it...
Read more >
Dynamically Label SVG image via SVG Paths - Esri Community
I have a client who would like to add a static image to each new survey and overlay data on top of it....
Read more >
HTML SVG Graphics - W3Schools
The HTML <svg> element is a container for SVG graphics. SVG has several methods for drawing paths, boxes, circles, text, and graphic images....
Read more >
next/image - Next.js
The default loader does not optimize SVG images for a few reasons. First, SVG is a vector format meaning it can be resized...
Read more >
SVG Files: What They Are and How to Make One - HubSpot Blog
SVG files tend to store images more efficiently than common raster formats as long as the image is not too detailed. SVG files...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found