Vfrdtyky

Im trying to achieve an effect like this on a bottomSheetFragment where the Imageview overlaps on-top of the BottomSheetFragment.
I tried to constrain the image view to the top of the card view set a margin then make the background of the layout transparent

But this is how it comes out when i run it

This is my XML attempt:

<?xml version="1.0" encoding="utf-8"?>

<android.support.design.widget.CoordinatorLayout 

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="wrap_content"



tools:context=".ui.generalviews.SuccessBottomSheetFragment">



<android.support.v7.widget.CardView

    android:id="@+id/card"

    android:layout_width="match_parent"

    android:layout_height="wrap_content"

    app:cardCornerRadius="8dp"

   >



    <android.support.constraint.ConstraintLayout

        android:layout_width="match_parent"

        android:layout_height="wrap_content">



        <ImageView

            android:id="@+id/imageView12"

            android:layout_width="80dp"

            android:layout_height="80dp"

            android:src="@drawable/successicon"

            android:visibility="gone"

            app:layout_constraintBottom_toTopOf="parent"

            app:layout_constraintEnd_toEndOf="parent"

            app:layout_constraintHorizontal_bias="0.5"

            app:layout_constraintStart_toStartOf="parent"

            app:layout_constraintTop_toTopOf="parent" />



        <TextView

            android:id="@+id/textView8"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_marginTop="24dp"

            android:fontFamily="@font/buenosairesweb_light"

            android:inputType="number"

            android:text="₦5,000.00"

            android:textColor="#242C37"

            android:textSize="22sp"

            app:layout_constraintEnd_toEndOf="parent"

            app:layout_constraintHorizontal_bias="0.5"

            app:layout_constraintStart_toStartOf="parent"

            app:layout_constraintTop_toBottomOf="@+id/imageView12" />



        <TextView

            android:id="@+id/textView9"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_marginTop="16dp"

            android:fontFamily="@font/buenosaires2web_bold"

            android:text="john oladr"

            android:textColor="@android:color/black"

            android:textSize="14sp"

            app:layout_constraintEnd_toEndOf="parent"

            app:layout_constraintHorizontal_bias="0.5"

            app:layout_constraintStart_toStartOf="parent"

            app:layout_constraintTop_toBottomOf="@+id/textView8" />



        <TextView

            android:id="@+id/textView11"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_marginBottom="8dp"

            android:layout_marginTop="16dp"

            android:fontFamily="@font/buenosairesweb_light"

            android:text="428948929 "

            android:textColor="#242C37"

            app:layout_constraintBottom_toBottomOf="parent"

            app:layout_constraintEnd_toEndOf="parent"

            app:layout_constraintHorizontal_bias="0.5"

            app:layout_constraintStart_toStartOf="parent"

            app:layout_constraintTop_toBottomOf="@+id/textView9" />

    </android.support.constraint.ConstraintLayout>

</android.support.v7.widget.CardView>



<android.support.design.widget.FloatingActionButton

    android:id="@+id/imageView122"

    android:layout_width="80dp"

    android:layout_height="80dp"

    android:background="@drawable/successicon"

    app:layout_anchor="@+id/card"

    app:layout_anchorGravity="top|center_horizontal"/>

Without code and just by looking at your images it looks like you have not anchored your view to bottomsheet. Add below properties to your tick view.

    app:layout_anchor="@+id/bottom_sheet"

    app:layout_anchorGravity="top|center_horizontal"

you would need to use CoordinatorLayout to use this.

also you are using ImageView use FloatingActionButton. replace your Image with below code and try.

<android.support.design.widget.FloatingActionButton

        android:id="@+id/imageView122"

        android:layout_width="80dp"

        android:layout_height="80dp"

        android:src="@drawable/successicon"

        app:layout_anchor="@+id/card"

        app:layout_anchorGravity="top|center_horizontal"/>

if you want to continue with ImageView provide some elevation as cardview will be having some elevation by default.