Lottie-android: Support centered text

[farazahmed7]

I am testing with a simple text layer but the alignment of the text is different in lottie app from the preview in after effects. I haven't done any changes to a new project expect for a text layer
I am attaching screenshots and json file

Ae preview

in lottie app

As you can see the text is aligned differently on app
json
data.zip

[tehfailsafe]

I am having the same problem, looks perfect the bodymovin JS player web version, but on android everything is shifted over to the right (but correct vertical alignment)

[ijunes]

same here... i was able to modify some values in the json and get them to render correctly, but the additional "padding" was also added to the js web player

[luciancioroga]

Same here. I'm trying now with bodymovin 4.11.1 and lottie 2.2.5. Basically, what AE and bodymovin considers the center of the text, lottie considers the bottom left corner as far as I can tell.

[mammademin]

I have same issue.It looks perfect in AE but not when I render it with bodymovin. Any idea how we can solve this issue?

[skinnypojo]

same issue, any solution?

[RoyGuanyu]

Same issue here, any update?

[perky]

I can reproduce this bug:

1. Create a text layer in AE by selecting Layer/New/Text.
2. Create another text layer by selecting the Horizontal Type Tool and dragging a text box in the composition.
3. Position both text layers so that they are aligned.

When you render via bodymovin you will see that the 2nd text layer has been shifted to the right and is now out of alignment with the 1st layer.

AE Version: 15.0.0 (Build 180)
Bodymovin Version: 5.1.3

[mxia]

Any update on this and #481 (seems to be a duplicate)? Or any suggestion on how to work around the issue is greatly appreciated too!

[karanmintzip]

RESOLVED: You need to convert text to Shape in order to render the text correctly.

[TacB0sS]

Not a solution... text mostly is dynamic and should be rendered on the fly

[karanmintzip]

Re: @TacB0sS But it's not rendering with proper allignment as a text. It worked for me after converting to shape.

[TacB0sS]

True, this solves the problem.. but it is not a solution for the bug.. they have a bug and it needs a real fix

[farazahmed7]

Converting text to shape just defeats the purpose of text feature. Plus the size also increases a lot.

[zishanj]

I am still facing alignment issue with lottie 3.0.1

<com.airbnb.lottie.LottieAnimationView
            android:id="@+id/completed_animation_view"
            app:lottie_fileName="topic_completed.json"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="center"
            android:scaleType="centerInside"
            android:visibility="@{viewModel.isCompleted ? View.VISIBLE : View.GONE}"
            tools:visibility="visible"/>

result:

I have tried with centerCrop also but there is no effect on alignment. The complete text is _you have taken one step ahead_, but it get cropped due to misalignment. On web it appears perfectly, even if I resize the browser, the width get auto adjusted and there is not misalignment of text.

[chanjungkim]

What's the solution???

[Pitel]

IMHO still not fixed!

Chnaging the texts to shapes is a woekartound at best. But we still had to do that.

[crackjack]

unlike everyone here, I'm actually seeing left aligned text, but this must be related

[sherrychen1202]

RESOLVED: You need to convert text to Shape in order to render the text correctly.

This solves my problem.

[JahnKoutrios]

we are facing the same issue currently. has no one ever found any (even hacky) solution to this problem (except for converting to shape)?

[aishang5wpj]

you can convert your text to an image in code, then use setImageAssetDelegate to replace it.

[samiam2020]

@gpeal has a solution for the alignment of dynamic text been arrived at for android? We need the text to be editable in code, so the create outlines option won't work in this context.

[crackjack]

I actually gave up, and moved to a native textview.

Instead of having text within animation, it is in a textview. Sure does not have the same flexibility of just dropping your animation to xm, but with Lottie providing current frame, we can time the conditions to show/hide/replace text in the textview.