How to control Confetti z-axis?

[ronykrell]

Greetings! I'm placing the KonfettiView XML inside a ConstraintLayout. The confetti appears in front of TextViews but behind ImageViews and RecyclerViews. Ideally, I'd like to standardize so that confetti goes behind all views in the ConstraintLayout. Is there any way to do this?

So far I've tried setting the android:elevation and android:translationZ to negative numbers as well as making sure the KonfettiView is the first element of the ConstraintLayout.

    <nl.dionsegijn.konfetti.KonfettiView
        android:id="@+id/viewKonfetti"
        android:background="@color/whiteff"
        android:elevation="-10dp"
        android:translationZ="-10dp"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        />

[DanielMartinus]

Hey @ronykrell, I would assume that both of the solutions that you've tried work. Can you maybe post a little more of what your layout structure looks like?

[ronykrell]

Sure, here is the full layout

<?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"
    android:paddingLeft="30dp"
    android:paddingRight="30dp"
    android:paddingBottom="30dp"
    android:paddingTop="30dp"
    android:clipToPadding="false"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">

    <nl.dionsegijn.konfetti.KonfettiView
        android:id="@+id/viewKonfetti"
        android:background="@color/whiteff"
        android:elevation="-10dp"
        android:translationZ="-10dp"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        />

    <androidx.appcompat.widget.AppCompatImageView
        android:id="@+id/sInformationFragmentClose"
        android:layout_width="0dp"
        android:layout_height="30dp"
        android:src="@drawable/close"
        android:tint="@color/grayC5"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintDimensionRatio="H,1:1" />

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="20dp"
        app:layout_constraintTop_toTopOf="@+id/sInformationFragmentClose"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/sInformationCTA"
        >

        <androidx.appcompat.widget.AppCompatTextView
            style="@style/eTextNormal"
            android:id="@+id/sInformationFragmentTitle"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="@string/s_s_intro_title"
            android:textSize="22sp"
            android:textColor="@color/purpleF2"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            />

        <androidx.appcompat.widget.AppCompatTextView
            style="@style/eTextNormal"
            android:id="@+id/sInformationFragmentSubtitle"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:textColor="@color/grayC5"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/sInformationFragmentTitle"
            app:layout_constraintRight_toRightOf="parent"
            tools:text="@string/s_s_intro_subtitle"
            />

        <androidx.appcompat.widget.AppCompatImageView
            android:id="@+id/sInformationFragmentImageView"
            android:layout_width="0dp"
            android:layout_height="200dp"
            android:layout_marginTop="15dp"
            android:scaleType="centerInside"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/sInformationFragmentSubtitle"
            app:layout_constraintRight_toRightOf="parent"
            />

        <androidx.cardview.widget.CardView
            android:id="@+id/sInformationRecyclerViewParent"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="15dp"
            app:cardBackgroundColor="@color/purpleFC"
            app:cardCornerRadius="8dp"
            app:cardElevation="0dp"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/sInformationFragmentImageView"
            >

            <androidx.constraintlayout.widget.ConstraintLayout
                android:id="@+id/sInformationRecyclerViewParentConstraint"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:paddingLeft="15dp"
                android:paddingRight="15dp"
                android:paddingTop="15dp"
                android:paddingBottom="15dp"
                >

                <androidx.recyclerview.widget.RecyclerView
                    android:id="@+id/sInformationRecyclerView"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:nestedScrollingEnabled="false"
                    app:layout_constraintLeft_toLeftOf="parent"
                    app:layout_constraintRight_toRightOf="parent"
                    app:layout_constraintTop_toTopOf="parent"
                    tools:layout_height="100dp"
                    />
                <androidx.constraintlayout.widget.Guideline
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:id="@+id/guidelineImageTop"
                    app:layout_constraintGuide_percent=".46"
                    android:orientation="horizontal"/>
                <androidx.constraintlayout.widget.Guideline
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:id="@+id/guidelineImageBottom"
                    app:layout_constraintGuide_percent=".61"
                    android:orientation="horizontal"/>

                <androidx.appcompat.widget.AppCompatImageView
                    android:id="@+id/plus_sign"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@drawable/round_shape"
                    android:elevation="1dp"
                    android:src="@drawable/plus_sign_blue"
                    app:layout_constraintLeft_toLeftOf="parent"
                    app:layout_constraintRight_toRightOf="parent"
                    app:layout_constraintTop_toTopOf="@+id/guidelineImageTop"
                    app:layout_constraintBottom_toBottomOf="@+id/guidelineImageBottom"
                    />

            </androidx.constraintlayout.widget.ConstraintLayout>

        </androidx.cardview.widget.CardView>

        <ScrollView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginTop="15dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/sInformationRecyclerViewParent"
            app:layout_constraintRight_toRightOf="parent">

            <androidx.constraintlayout.widget.ConstraintLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <androidx.appcompat.widget.AppCompatTextView
                    style="@style/eTextNormal"
                    android:id="@+id/sInformationDescriptionHeader"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:textSize="18sp"
                    app:layout_constraintLeft_toLeftOf="parent"
                    app:layout_constraintTop_toTopOf="parent"
                    app:layout_constraintRight_toRightOf="parent"
                    tools:text="Description Header"
                    />

                <androidx.appcompat.widget.AppCompatTextView
                    android:id="@+id/sInformationDescriptionContent"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="24dp"
                    android:layout_marginBottom="24dp"
                    android:textSize="14sp"
                    app:layout_constraintLeft_toLeftOf="parent"
                    app:layout_constraintTop_toBottomOf="@+id/sInformationDescriptionHeader"
                    app:layout_constraintRight_toRightOf="parent"
                    tools:text="@string/s_s_intro_description_content"
                    />
            </androidx.constraintlayout.widget.ConstraintLayout>
        </ScrollView>

    </androidx.constraintlayout.widget.ConstraintLayout>

    <androidx.appcompat.widget.AppCompatTextView
        style="@style/eTextNormal"
        android:id="@+id/sRulesPopupLink"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="15dp"
        android:textColor="@color/green5B"
        android:textSize="14sp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/sInformationCTA"
        tools:text="@string/s_s_view_rules"
        />
    <com.e.android.ui.buttons.eButton
        android:id="@+id/sInformationCTA"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:cardBackgroundColor="@color/yellow4F"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        tools:text="@string/s_s_intro_cta"/>

</androidx.constraintlayout.widget.ConstraintLayout>

[DanielMartinus]

@ronykrell I couldn't really find any significant reason why, in this layout, the Konfetti would fall in front of the items. So I tested it myself with the same layout structure and everything seems to work. The only thing that I didn't copy was the styling that you're using and the custom eButton implementation. Perhaps the reason why this is happening is in the styling and the custom button implementation?

[ronykrell]

@DanielMartinus Thanks for checking! I tried removing the styling on the TextView and no luck unfortunately - the confetti goes in front of it.

[DanielMartinus]

Which TextView are you specifically talking about in your layout?

[ronykrell]

sInformationFragmentTitle