InsideDarkWeb.com

Lottie Animation Library Z Ordering Issue

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 ex:

<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?

Edit:

It’s possible this has been fixed in a library update, as this problem occurred with a very early version of the library (as this was posted over 2 years ago). I’ll validate if this is the case and accept something to close this post if so. I had just moved on, but this question has regained traction.

Stack Overflow Asked by Submersed on November 15, 2021

4 Answers

4 Answers

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.

Answered by Sina on November 15, 2021

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>

Let me know if it works! :)

----- EDIT ---- 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

enter image description here

Answered by Mateo Hervas on November 15, 2021

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?

Answered by Jaswant Singh on November 15, 2021

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()

Answered by Pabel on November 15, 2021

Add your own answers!

Related Questions

SSL for pointed domains

1  Asked on February 24, 2021 by userhex

         

Encrypt message using RSA on ESP32

0  Asked on February 24, 2021 by daniel-tang

       

Counting the occurrences of a substring in a string python

2  Asked on February 24, 2021 by indrajith-ekanayake

       

C# calculations differ between const and variable locals?

1  Asked on February 24, 2021 by ren-van-den-berg

       

How do i call API with multiple parameters in android studio

3  Asked on February 23, 2021 by shane

       

How to fix dict to pandas dataframe

1  Asked on February 23, 2021 by spatial-digger

     

C Polynomial Addition exercise

3  Asked on February 23, 2021 by aaa

   

Fill a list with a for loop python

3  Asked on February 23, 2021 by dottorbooom

         

Ask a Question

Get help from others!

© 2021 InsideDarkWeb.com. All rights reserved.