Develop Reference

Android. ConstraintLayout: constraint end not working

I need to create chain with ConstraintLayout.I want the TextView to be attached to the left side, the text is immediately followed by a ImageView, and another ImageView is attached to the right side of the screen. See an example.
If the TextView contains long text, I need the text to go to another line. That is, so that the TextView does not overlap with the image view on the right, but is limited to margin. See an example.
Here is my code:
<androidx.constraintlayout.widget.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:layout_width="match_parent"
android:layout_height="wrap_content"
tools:ignore="MissingPrefix">
<TextView
android:id="#+id/tvTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/text"
android:textColor="#color/black"
android:textSize="#dimen/text_size_14"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0" />
<ImageView
android:id="#+id/ivFirst"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="16dp"
android:src="#drawable/ic_first"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/ivSecond"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintStart_toEndOf="#id/tvTitle"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0" />
<ImageView
android:id="#+id/ivSecond"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_second"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0" />
</androidx.constraintlayout.widget.ConstraintLayout>
If the text is not long, then everything works well, but if the text is long, then it is superimposed on the ImageView and goes beyond the screen. I tried to use chain but nothing worked. Please, help me.

You can achieve this by fixing ivSecond to the end of the parent and then creating a horizontal chain of tvTitle and ivFirst, so long as you apply a packed chain style and a bias of 0 to the chain and use constrainedWidth on the text view.
<androidx.constraintlayout.widget.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:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/tvTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constrainedWidth="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/ivFirst"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="hello world"/>
<ImageView
android:id="#+id/ivFirst"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/ivSecond"
app:layout_constraintStart_toEndOf="#id/tvTitle"
app:layout_constraintTop_toTopOf="parent"/>
<ImageView
android:id="#+id/ivSecond"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
When the text is short, the first image is right up against it:
When the text is long, the first image stops at the edge of the second image and the text wraps to another line:

you can do it with layout_constrainedWidth . For this your text view needs to be constrained horizontally . try the layout below i have made few changes in it .
<androidx.constraintlayout.widget.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:layout_width="match_parent"
android:layout_height="wrap_content"
tools:ignore="MissingPrefix">
<TextView
android:id="#+id/tvTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textSize="14sp"
app:layout_constrainedWidth="true"
app:layout_constraintEnd_toStartOf="#+id/ivFirst"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0" />
<ImageView
android:id="#+id/ivFirst"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="16dp"
android:src="#mipmap/ic_launcher"
app:layout_constraintEnd_toStartOf="#id/ivSecond"
app:layout_constraintStart_toEndOf="#id/tvTitle"
app:layout_constraintTop_toTopOf="parent"
/>
<ImageView
android:id="#+id/ivSecond"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#mipmap/ic_launcher"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
</androidx.constraintlayout.widget.ConstraintLayout>

You can use FlexboxLayout to wrap the tvTitle TextView & the ivFirst ImageView; So that it controls to wrap the content of the TextView to the next line and avoid pushing the ivFirst to the right/end.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.flexbox.FlexboxLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:orientation="horizontal"
app:alignContent="center"
app:alignItems="center"
app:flexDirection="row"
app:flexWrap="nowrap"
app:layout_constraintBottom_toBottomOf="#+id/ivSecond"
app:layout_constraintEnd_toStartOf="#+id/ivSecond"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/tvTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/text"
android:textColor="#color/black"
android:textSize="#dimen/text_size_14"
app:layout_flexShrink="10000" />
<ImageView
android:id="#+id/ivFirst"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_first"
android:layout_marginStart="8dp"
android:layout_marginEnd="16dp"/>
</com.google.android.flexbox.FlexboxLayout>
<ImageView
android:id="#+id/ivSecond"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_second"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Also make sure to add the gradle dependency at module level:
implementation 'com.google.android.flexbox:flexbox:3.0.0'
Preview:

Constraint Layout - Android - Avoid Overlapping

I have an issue with constraint Layout overlapping. Basically, I have an image on the left and text view on the right. I am trying to have the text in the text view to appear in the centre of the screen, and it's appearing as expected. But when the text size is too big, the text view is overlapping with the image view.
If I set the TextView left constraint to the right of ImageView, the overlapping is not occurring. But when the text is small, the text is not appearing in the centre of the screen.
I tried to implement solutions from this post. But, it's not working for me. Kindly help me with this issue.
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="35dp"
android:gravity="center_vertical"
android:orientation="horizontal"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="#+id/imgBack"
android:layoutWidth="wrap_content"
android:layoutHeight="match_parent"
android:contentDescription="#null"
android:src="#drawable/image"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tvUserName"
android:layout_width="0dp"
android:layout_height="match_parent"
android:ellipsize="end"
android:text="I have a problem when the text is so big. It's overlapping"
android:fontFamily="#font/proxima_nova_semibold"
android:gravity="center"
android:lines="1"
android:textColor="#color/white"
android:textSize="#dimen/header_sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
</androidx.constraintlayout.widget.ConstraintLayout>

Please try this solution.
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="350dp"
android:gravity="center_vertical"
android:orientation="horizontal"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="#+id/imgBack"
android:layout_width="0dp"
android:layout_height="match_parent"
android:contentDescription="#null"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/tvUserName"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:src="#tools:sample/backgrounds/scenic" />
<TextView
android:id="#+id/tvUserName"
android:layout_width="200dp"
android:layout_height="match_parent"
android:ellipsize="end"
android:gravity="center"
android:lines="1"
android:text="I have a problem when the text is so big. It's overlapping"
android:textColor="#color/white"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

It doesn't overlap anymore:
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/imgBack"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#null"
android:src="#mipmap/ic_launcher"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tvUserName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="I have a problem when the text is so big. It's overlapping"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#+id/imgBack"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Beside the issues the other user respond, i.e app:layout_constraintStart_toStartOf="parent" or wrap_content to the ImageView and the like, these attributes:
android:layoutWidth="wrap_content"
android:layoutHeight="match_parent"
Had typo.

How to move LayoutBackground behind an ImageView

I tried to add on the top right corner of my app a notificationBar which shows how many msgs are in the inbox.
Later on I want to add a custom drawable to my background, for now I added only a black color as bg to reach my goal, as you can see on the left side of my image: This is a TextView constraint to the END of my ImageView. I want my Background to go behind the imageview BUT not to go outside of its dimensions neither to start before the imageview (you would see the top left and bottom right corner of the textview - rectangle
I'm stuck on that with the following Code:
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/msg_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/black"
app:layout_constraintStart_toEndOf="#+id/imageView"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0 MSGs"
android:textColor="#color/white"
android:paddingStart="#dimen/default_padding"
android:padding="#dimen/small_padding"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
<ImageView
android:id="#+id/imageView"
android:layout_width="46dp"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="W, 1:1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:background="#drawable/ic_contact"/>
</androidx.constraintlayout.widget.ConstraintLayout>
How can I fix this?

If no other view is constrained to the TextView you can simply apply a negative "x" translation to the TextView: android:translationX="-15dp". I chose -15dp but it could be another negative value that works for your layout.
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/msg_bar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/black"
android:padding="#dimen/small_padding"
android:paddingStart="#dimen/default_padding"
android:text="0 MSGs"
android:textColor="#color/white"
android:translationX="-15dp"
app:layout_constraintBottom_toBottomOf="#id/imageView"
app:layout_constraintStart_toEndOf="#+id/imageView"
app:layout_constraintTop_toTopOf="#id/imageView" />
<ImageView
android:id="#+id/imageView"
android:layout_width="46dp"
android:layout_height="0dp"
android:background="#drawable/ic_contact"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="W, 1:1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
SebastienRieu's solution should work but you may need to add a margin to the start of the TextView to hide its top-left and bottom-left corners.

change constraint of textview to start with imageView and add text alignment to textview
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/msg_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent" >
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#color/black"
app:layout_constraintStart_toStartOf="#+id/imageView"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" >
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="0 MSGs"
android:textColor="#color/white"
android:paddingStart="#dimen/default_padding"
android:padding="#dimen/default_padding"
android:textAlignment="textEnd"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<ImageView
android:id="#+id/imageView"
android:layout_width="46dp"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="W, 1:1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:background="#drawable/ic_contact" />
</androidx.constraintlayout.widget.ConstraintLayout>

Constraint layout works as a frame layout. For such designs, we can use guidelines. Guidelines work greats for such a view .
I have made a few changes in your layout, I hope this can be helpful.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/msg_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/darker_gray"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/text_msg_count"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/black_primary"
android:paddingStart="#dimen/space_28"
android:text="0 MSGs"
android:textAlignment="textEnd"
android:textColor="#color/white_color"
android:layout_marginEnd="#dimen/space_28"
android:paddingEnd="10dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="#id/imageView"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toTopOf="#+id/imageView" />
<ImageView
android:id="#+id/imageView"
android:layout_width="46dp"
android:layout_height="0dp"
android:layout_margin="#dimen/space_28"
android:background="#drawable/ic_contact"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="W, 1:1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.3"
app:layout_constraintEnd_toEndOf="#id/imageView"
app:layout_constraintStart_toStartOf="#id/imageView" />
</androidx.constraintlayout.widget.ConstraintLayout>
Below link, you can use to get more info on guidelines https://constraintlayout.com/basics/guidelines.html

Two rows ConstraintLayout

I'm trying to create a two-row ConstraintLayout, each row has two views. The problem with what I have now is the left views is overlapping the right views, as you can see in the screenshot:
This is the code I'm using:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:padding="5dp"
android:orientation="horizontal">
<TextView
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintTop_toTopOf="parent"
/>
<ImageView
android:id="#+id/download"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:paddingStart="5dp"
android:paddingTop="5dp"
android:paddingBottom="5dp"
/>
<TextView
android:id="#+id/date"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textSize="13sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/title"
android:layout_marginTop="4dp"
/>
<TextView
android:id="#+id/duration"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="13sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/title"
android:layout_marginTop="4dp"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
I would like the left views (title, date) to stop where the download image and duration start. I haven't worked with ConstraintLayouts much so it might be something easy.

There are a lot of different ways to achieve this, one way would be to constraint your text into the image and give them the same height.
They won't overlap each other if you will do something like this :
In your example, you used android:layout_width="match_parent" on the text so it was expanded throw all of the row and overlapped your other view.You should use android:layout_width="0dp" (it is match_constraint) so your views won't overlap each other.
Here is an example of a layout that looks like the row you want to achieve:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="loot at this text that wont everlap the image"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/imageView"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginEnd="8dp"
app:layout_constraintBottom_toBottomOf="#+id/textView4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/textView4"
tools:src="#tools:sample/avatars[1]" />
</androidx.constraintlayout.widget.ConstraintLayout>

Overlap Imageview in bottomsheetfragment

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.