Lottie Animation Library Z Ordering Issue

Question

I'm currently playing around with the AirBnB's Lottie library for Android, and I'm having issues with LottieAnimationView Z ordering. Regardless of whether I place the LottieAnimationView at the top of the RelativeLayout, it always appears on top of all of the other elements in the layout, for example:

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="@dimen/spacing_lrg"
    tools:context="com.myapp.SplashActivity">

    <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/animation_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:lottie_fileName="test.json"/>

   <! -- Other Elements that should appear on top of the background animation -->

</RelativeLayout>

I've also tried setting the LottieAnimationView's elevation to 0, but with no success at fixing the issue. Does anyone have an idea of how to fix this, or if it's just a limitation of the library? Also, if it's a limitation, what causes it?

It's possible this has been fixed in a library update, as this problem occurred with a very early version of the library.

Craig

Answer 1

I can't reproduce the problem you are referring to in any layout including RelativeLayout. Maybe upgrading to the latest version fixes the problem. The latest version is 3.4.1: implementation 'com.airbnb.android:lottie:3.4.1'. If you've been already using the latest version, please share your complete code so we can investigate further.

Physiotherapy

Answer 2

Its weird. I'd suggest to wrap your complete layout inside a frame layout and put Lottie as its first child and second the rest of the widget tree. I haven't tried this but that should work.

Alternatively, have you tried to play with the elevation?

Dysgraphia

Answer 3

I would suggest for you to use Constraint Layouts, I just tried it like this:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">


<com.airbnb.lottie.LottieAnimationView
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    android:id="@+id/animationLoading"
    android:layout_width="200dp"
    android:layout_height="200dp"
    app:lottie_rawRes="@raw/thermosun"
    app:lottie_loop="true"
    app:lottie_autoPlay="true"/>

<Button
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    android:layout_margin="@dimen/app_default_margin_16dp"
    android:text="My button"/>
</androidx.constraintlayout.widget.ConstraintLayout>

CustomTextView class

class CustomTextView : AppCompatTextView {

constructor(context: Context) : super(context) {
    init(context)
}

constructor(context: Context, attrs: AttributeSet) : super(context, attrs) {
    init(context, attrs)
}

constructor(context: Context, attrs: AttributeSet, defStyle: Int) : super(
    context,
    attrs,
    defStyle
) {
    init(context, attrs)
}

private fun init(context: Context, attrs: AttributeSet? = null) {
    if (!isInEditMode) {
        @Suppress("Recycle")
        context.obtainStyledAttributes(attrs, R.styleable.AppCompatTextView).use {
           setUpCharacterSpacing(
                it.getFloat(R.styleable.CustomTextView_characterSpacing, 0.0f)
            )
            setUpLineSpacing(
                it.getDimension(R.styleable.CustomTextView_lineSpacing, 0f)
            )
        }
        paintFlags = paintFlags or Paint.SUBPIXEL_TEXT_FLAG
    }
}

private fun setUpLineSpacing(lineSpacing: Float) {
    if (lineSpacing != 0f) {
        setLineSpacing(lineSpacing - textSize, 1f)
    }
}
}

The XML with the Constraintlayout and the CustomTextView of the project

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">

<ImageView
    android:id="@+id/closeIcon"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    android:src="@drawable/ic_go_to_location"
    android:layout_margin="@dimen/dimen_16dp"/>

<com.airbnb.lottie.LottieAnimationView
    app:layout_constraintTop_toBottomOf="@id/closeIcon"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    android:id="@+id/animationLoading"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintDimensionRatio="750:1080"
    app:lottie_rawRes="@raw/thermosun"
    app:lottie_loop="true"
    app:lottie_autoPlay="true"/>

<com.shadows.howhotismycity.utils.CustomTextView
    android:id="@+id/tvUserCounter"
    android:layout_width="@dimen/dimen_30dp"
    android:layout_height="wrap_content"
    android:text="10"
    android:textColor="@android:color/black"
    android:textSize="24sp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toBottomOf="@id/closeIcon"/>
<com.shadows.howhotismycity.utils.CustomTextView
    android:id="@+id/tvSampleText"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="Theres some text here"
    android:textColor="@android:color/black"
    android:textSize="24sp"
    android:gravity="center"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toBottomOf="@id/tvUserCounter"
    app:layout_constraintBottom_toBottomOf="parent"
    android:layout_margin="@dimen/dimen_16dp"/>
</androidx.constraintlayout.widget.ConstraintLayout>

Library dependency

//lottie
implementation 'com.airbnb.android:lottie:3.4.0'

Result of the textview on top of the animation tested in Android 10

Sewellyn

I'm already using ConstraintLayout and its not working. – Sacrilegious

can you post your constraint layout code? so we can help you better – Sewellyn

gist.github.com/lawloretienne/0b7625e7f4d0fd9157c5298275c92db6 My issue is when i tested on a Pixel XL (Android 10.0) – Sacrilegious

What Lottie version do you have on your dependencies? I've just seen that your XML has a custom widget for your text view, Can you post the class of such widget? it may be due to that class because I have just put a couple of androidx.appcompat.widget.AppCompatTextView in my constraint layout, below the lottie animation and they are showing on top. – Sewellyn

I am using version 3.4.0 of the lottie library. And i updated the gist to include the CustomTextView. – Sacrilegious

I just updated the answer replicating yout problem and putting a textview on top of the animation. Hope it helps! – Sewellyn

I dont see what is different about your answer. Can you point out the difference? – Sacrilegious

I replicated your xml using your lottie version, your custom textview and got the result shown in the image. Maybe if you share the entire code I can try and help. Anyways, I believe we could move this to chat keep on helping you – Sewellyn

Let us continue this discussion in chat. – Sewellyn

Answer 4

Try to load the lottie fileName by code. I had some problems when i loaded the file by xml

You can use one Linear for the others view and call linearlayout.bringToFront()

Moffat