ImageView on top of another ImageView in ConstraintLayout

Question

I am using ConstraintLayout to get this structure. But in the last image, the plus icon imageview is half hidden. And, in all the three images, if I set images, a part of the plus or cross symbol is getting hidden. I tried setting elevation or tranlationZ, But it didn't work for me.

Please help me with this issue.

This is my code snippet.

<!-- Constraint Layout -->


  <android.support.constraint.ConstraintLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:paddingEnd="@dimen/_16dp"
                android:paddingStart="@dimen/_16dp"
                android:paddingTop="@dimen/_16dp"
                tools:ignore="ContentDescription">

                <!-- Profile Pic -->

                <ImageView
                    android:id="@+id/img_profilePic"
                    android:layout_width="@dimen/_80dp"
                    android:layout_height="@dimen/_80dp"
                    android:background="@color/bg_light_gray"
                    app:layout_constraintStart_toStartOf="parent" />

                <ImageView
                    android:id="@+id/img_profilePic_delete"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@drawable/icon_cross"
                    app:layout_constraintBottom_toBottomOf="@+id/img_profilePic"
                    app:layout_constraintEnd_toEndOf="@+id/img_profilePic"
                    app:layout_constraintStart_toEndOf="@+id/img_profilePic"
                    app:layout_constraintTop_toBottomOf="@+id/img_profilePic" />

                <!-- Gallery Pic 1 -->

                <ImageView
                    android:id="@+id/img_galleryPic1"
                    android:layout_width="@dimen/_80dp"
                    android:layout_height="@dimen/_80dp"
                    android:background="@color/bg_light_gray"
                    app:layout_constraintEnd_toStartOf="@+id/img_galleryPic2"
                    app:layout_constraintStart_toEndOf="@+id/img_profilePic" />

                <ImageView
                    android:id="@+id/img_galleryPic1_add"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@drawable/icon_add_circle"

                    app:layout_constraintBottom_toBottomOf="@+id/img_galleryPic1"
                    app:layout_constraintEnd_toEndOf="@+id/img_galleryPic1"
                    app:layout_constraintStart_toEndOf="@+id/img_galleryPic1"
                    app:layout_constraintTop_toBottomOf="@+id/img_galleryPic1" />

                <ImageView
                    android:id="@+id/img_galleryPic1_delete"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@drawable/icon_cross"
                    android:visibility="gone"
                    app:layout_constraintBottom_toBottomOf="@+id/img_galleryPic1"
                    app:layout_constraintEnd_toEndOf="@+id/img_galleryPic1"
                    app:layout_constraintStart_toEndOf="@+id/img_galleryPic1"
                    app:layout_constraintTop_toBottomOf="@+id/img_galleryPic1" />

                <!-- Gallery Pic 2 -->

                <ImageView
                    android:id="@+id/img_galleryPic2"
                    android:layout_width="@dimen/_80dp"
                    android:layout_height="@dimen/_80dp"
                    android:background="@color/bg_light_gray"
                    app:layout_constraintEnd_toEndOf="parent" />


                <ImageView
                    android:id="@+id/img_galleryPic2_add"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@drawable/icon_add_circle"
                    app:layout_constraintBottom_toBottomOf="@+id/img_galleryPic2"
                    app:layout_constraintEnd_toEndOf="@+id/img_galleryPic2"
                    app:layout_constraintHorizontal_bias="1.0"
                    app:layout_constraintStart_toEndOf="@+id/img_galleryPic2"
                    app:layout_constraintTop_toBottomOf="@+id/img_galleryPic2" />

                <ImageView
                    android:id="@+id/img_galleryPic2_delete"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@drawable/icon_cross"
                    android:visibility="gone"
                    app:layout_constraintBottom_toBottomOf="@+id/img_galleryPic2"
                    app:layout_constraintEnd_toEndOf="@+id/img_galleryPic2"
                    app:layout_constraintStart_toEndOf="@+id/img_galleryPic2"
                    app:layout_constraintTop_toBottomOf="@+id/img_galleryPic2" />


            </android.support.constraint.ConstraintLayout>

Answer 1

Try this => you have to give proper constraint for that

Give 0th gallery image end constraint to 1st gallery image's start constraint and 2nd gallery image start constraint to 1st galery image end constraint

you can also do this using chain

<android.support.constraint.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:paddingEnd="@dimen/_16dp"
            android:paddingStart="@dimen/_16dp"
            android:paddingTop="@dimen/_16dp"
            tools:ignore="ContentDescription">

            <!-- Profile Pic -->

            <ImageView
                android:id="@+id/img_profilePic"
                android:layout_width="@dimen/_80dp"
                android:layout_height="@dimen/_80dp"
                android:background="@color/bg_light_gray"
                app:layout_constraintEnd_toStartOf="@+id/img_galleryPic1"
                app:layout_constraintStart_toStartOf="parent" />

            <ImageView
                android:id="@+id/img_profilePic_delete"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/icon_cross"
                app:layout_constraintBottom_toBottomOf="@+id/img_profilePic"
                app:layout_constraintEnd_toEndOf="@+id/img_profilePic"
                app:layout_constraintStart_toEndOf="@+id/img_profilePic"
                app:layout_constraintTop_toBottomOf="@+id/img_profilePic" />

            <!-- Gallery Pic 1 -->

            <ImageView
                android:id="@+id/img_galleryPic1"
                android:layout_width="@dimen/_80dp"
                android:layout_height="@dimen/_80dp"
                android:background="@color/bg_light_gray"
                app:layout_constraintEnd_toStartOf="@+id/img_galleryPic2"
                app:layout_constraintStart_toEndOf="@+id/img_profilePic" />

            <ImageView
                android:id="@+id/img_galleryPic1_add"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/icon_add_circle"

                app:layout_constraintBottom_toBottomOf="@+id/img_galleryPic1"
                app:layout_constraintEnd_toEndOf="@+id/img_galleryPic1"
                app:layout_constraintStart_toEndOf="@+id/img_galleryPic1"
                app:layout_constraintTop_toBottomOf="@+id/img_galleryPic1" />

            <ImageView
                android:id="@+id/img_galleryPic1_delete"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/icon_cross"
                android:visibility="gone"
                app:layout_constraintBottom_toBottomOf="@+id/img_galleryPic1"
                app:layout_constraintEnd_toEndOf="@+id/img_galleryPic1"
                app:layout_constraintStart_toEndOf="@+id/img_galleryPic1"
                app:layout_constraintTop_toBottomOf="@+id/img_galleryPic1" />

            <!-- Gallery Pic 2 -->

            <ImageView
                android:id="@+id/img_galleryPic2"
                android:layout_width="@dimen/_80dp"
                android:layout_height="@dimen/_80dp"
                android:background="@color/bg_light_gray"
                app:layout_constraintStart_toEndOf="@+id/img_galleryPic1"
                app:layout_constraintEnd_toEndOf="parent" />


            <ImageView
                android:id="@+id/img_galleryPic2_add"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/icon_add_circle"
                app:layout_constraintBottom_toBottomOf="@+id/img_galleryPic2"
                app:layout_constraintEnd_toEndOf="@+id/img_galleryPic2"
                app:layout_constraintHorizontal_bias="1.0"
                app:layout_constraintStart_toEndOf="@+id/img_galleryPic2"
                app:layout_constraintTop_toBottomOf="@+id/img_galleryPic2" />

            <ImageView
                android:id="@+id/img_galleryPic2_delete"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/icon_cross"
                android:visibility="gone"
                app:layout_constraintBottom_toBottomOf="@+id/img_galleryPic2"
                app:layout_constraintEnd_toEndOf="@+id/img_galleryPic2"
                app:layout_constraintStart_toEndOf="@+id/img_galleryPic2"
                app:layout_constraintTop_toBottomOf="@+id/img_galleryPic2" />


        </android.support.constraint.ConstraintLayout>