Incorrect positioning of custom text

[vincekao-dd]

Lottie is supported and developed on nights and weekends. Issues from Lottie sponsors will be prioritized.

Checklist

1. My animation doesn't use any unsupported features.
2. I know what part of my animation doesn't work.
3. I have created a simplified version of my animation
4. I have attached the AEP file (as a zip file so it can be attached) that only has the part of the animation that doesn't work.

Describe the bug
Our animation consists of an envelope that opens up to display a card with custom user-defined text. We set the text using a TextDelegate and a custom font. The entire animation works perfectly and the correct text/font is displayed, but the positioning of the text is misaligned. Rather than being aligned with the left side of the card, the text area seems to start in the middle. It's still left-justified, but the XY coordinates of the textbox are shifted to the center coordinates of the card.

We experimented with a modified version of the animation where we aligned the center X of the textbox with the left edge of the canvas (so that the left half of the text box is outside the card) and this seemed to fix the issue. The problem is that we have a constantly increasing number of variations of this animation which all work as expected in their original form on both iOS and Web, so producing a separate version of each animation for Android is not a viable solution.

This seems to be the same issue as described in these reports, but there is no recent activity or posted solution:
#388
#481
#451

Thanks in advance for your assistance!

What version of Lottie did you test this on?
3.6.1

What version of Android did you test this on?
APIs 27-30

Steps To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Screenshots

json attached:
misaligned_text.json.zip

[oissa1]

I'm having the exact same issue. Haven't been able to find a solution. I've tried messing around with After Effects and whatever I do the text is never rendered in Android in the same position that it looks in AE.

[AjayGol]

I have facing same issue

In iOS text position showing currently but in android showing wrong position text. Only issue on text position.

[timmygap]

Same issue for me, If I try to use the TextDelegate, the Text moved to a wrong position. Without the TextDelegate it works, but than we can't translate the labels.

[LorienMan]

Same issue for me, If I try to use the TextDelegate, the Text moved to a wrong position. Without the TextDelegate it works, but than we can't translate the labels.

Same!

[okamayana-tinyspeck]

Still no fix?

[cjmFirefly03]

Having the same issue :(

[frankiesimon]

Same here :(

[gpeal]

@vincekao-dd @oissa1 @AjayGol @tkrawetzke @LorienMan @okamayana-tinyspeck @cjmFirefly03 @frankiesimon Could you all please attach aep files that reproduce this? Including them will always increase the likelihood that bugs can get addressed.

[mattbusuu]

@gpeal

I am also getting the same problem.

Not my animation, but using this animation:
https://lottiefiles.com/67074-text-input-transparent

And applying the filter via:

        val textDelegate = TextDelegate(splashAnimation)
        textDelegate.setText("username", "my custom string  123")
        splashAnimation.setTextDelegate(textDelegate)

I am getting the following:

Which is wrong, as the text "my custom string 123" should be left aligned, along with the cursor, but it is shifted to the right.

Version: com.airbnb.android:lottie:5.0.3

(Small note, I did try with this file first, but it rendered fine: https://lottiefiles.com/58264-pin-on-the-map). I'm not an animation expert though, so not sure if there is a connection....