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>

score 1 · Answer 1 · edited Aug 22 '18 at 06:31

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>

This problem solved the image half-hidden issue. But i am still having the issue of elevation. Like, when the grey box in the image (the picture in the question) is replaced with an actual image, a part of X or + image is getting underneath i.e. getting hidden. — Sethuraman Srinivasan, Aug 22 '18 at 06:35
just change position of imageview means first place + image in xml — Shweta Chauhan, Aug 22 '18 at 06:36
It didn't work. Just asking, do you think the file being a png might be an issue? — Sethuraman Srinivasan, Aug 22 '18 at 06:40

score 0 · Answer 2 · answered Aug 22 '18 at 06:10

put horizontal scrollview

<HorizontalScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:paddingEnd="16dp"
        android:paddingStart="16dp"
        android:paddingTop="16dp"
        tools:ignore="ContentDescription">

        <!-- Profile Pic -->

        <ImageView
            android:id="@+id/img_profilePic"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:background="@color/black"
            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/call_cam_toggle_background"
            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="80dp"
            android:layout_height="80dp"
            android:background="@color/black"
            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/call_cam_toggle_background"

            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>
    </HorizontalScrollView>

ImageView on top of another ImageView in ConstraintLayout

2 Answers2