Search code examples
androidxmllayoutkotlinforeground

Android ConstraintLayout particle animation elevation


I have a big issue , I'm trying to put particle animation in background I'm using the library : https://github.com/plattysoft/Leonids

Confettis's Animation is on my screen perfectly but it's in foreground and I wanted it to be on background behind my ImageView !

I tried set elevation of my ImageView but animation stay in foreground

I have my SplashScreen.xml with Constraintlayout :

<android.support.constraint.ConstraintLayout 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:id="@+id/bg_splash"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/bg_splashscreen">


<ImageView
    android:id="@+id/logo_text"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginBottom="8dp"
    android:layout_marginEnd="36dp"
    android:layout_marginStart="37dp"
    android:layout_marginTop="8dp"
    android:src="@drawable/logo"
    android:elevation="4dp"
    app:layout_constraintBottom_toTopOf="@+id/guideline2"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintHorizontal_weight="0.1"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="@+id/guideline"
    app:layout_constraintVertical_weight="0.1"
    tools:ignore="ContentDescription" />

<android.support.constraint.Guideline
    android:id="@+id/guideline"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent="0.26371" />

<android.support.constraint.Guideline
    android:id="@+id/guideline2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent="0.42074" />
</android.support.constraint.ConstraintLayout>

And my confetti animation is called basically in my onCreate method of my SplashScreen activity. Here is the method called in my Splashscreen Activity :

fun particleConfettiAnimation(fromActivity: Activity?) {

        if (fromActivity == null){ return }

        ParticleSystem(fromActivity, 80, R.drawable.confetti, 10000)
            .setSpeedModuleAndAngleRange(0f, 0.3f, 0, 0)
            .setRotationSpeed(144f)
            .setAcceleration(0.00035f, 100)
            .emit(100, -100, 5)
     }

EDIT : I think I understood that the hierarchy in ConstraintLayout is : what is created last is on foreground compared to other elements created before so that can explain why the animation is in foreground compared to my ImageView

But how can I fix this ? Hope that will be clear enough , thanks !


Solution

  • I found the solution !

    You have to add another parameters to the ParticleSystem call like this :

    ParticleSystem(fromActivity, 80, R.drawable.confetti, 10000, R.id.YOURID)
            .setSpeedModuleAndAngleRange(0f, 0.3f, 0, 0)
            .setRotationSpeed(144f)
            .setAcceleration(0.00035f, 100)
            .emit(100, -100, 5)
    

    And then add to the beginning of your ConstraintsLayout in your XML file:

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/YOURID">
    </FrameLayout>
    

    That's it !