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:

Using Constraint Layout but still layout gets messed up

I'm trying to create a layout for my recycler view. I thought the best would be using a constraint layout for the activity. It renders correctly in the preview window but gets distorted while running the application. I tried using constraint layout before but I got the same problem please help. I posted both the code and image file of the layout
this is after running the application
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/levelback">
<ImageView
android:id="#+id/userface"
android:layout_width="76dp"
android:layout_height="76dp"
android:contentDescription="#string/player2"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.004"
app:srcCompat="#drawable/ic_angry" />
<TextView
android:id="#+id/username"
android:layout_width="wrap_content"
android:layout_height="27dp"
android:layout_marginEnd="212dp"
android:text="#string/player2"
android:textColor="#android:color/background_light"
android:textSize="25sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.014" />
<TextView
android:id="#+id/usedesc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="descryption"
android:textColor="#android:color/darker_gray"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.324"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.06" />
</androidx.constraintlayout.widget.ConstraintLayout>

There you go:
<ImageView
android:id="#+id/userface"
android:layout_width="76dp"
android:layout_height="76dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:contentDescription="#string/player2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_angry" />
<TextView
android:id="#+id/username"
android:layout_width="wrap_content"
android:layout_height="27dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="player2"
android:textColor="#android:color/background_light"
android:textSize="25sp"
app:layout_constraintStart_toEndOf="#+id/userface"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/usedesc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="descryption"
android:textColor="#android:color/darker_gray"
app:layout_constraintStart_toEndOf="#+id/userface"
app:layout_constraintTop_toBottomOf="#id/username" />
Put it inside ConstraintLayout.
Change your Strings and manipulate with margins if you need to.

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

Constraint Layout not working properly despite adding constraints

I am using Constraint Layout in a list item and having difficulties in getting it to work properly when the code is compiled, though it is coming up properly in the preview pane. I can use Relative Layout but still want to know why it does not work because I am facing this problematic behaviour in many other cases.
In the image below, this is how the layout is, with all the children
constrained as desired.
For the sake of clarity, below image shows each child's constraints individually
This is how it renders in a recycler view :
List item scrolled down :
Source code for this layout :
<?xml version="1.0" encoding="utf-8"?>
<layout 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.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/ic_recent_activity">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/civ_user_avatar"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="16dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:src="#color/primary"/>
<TextView
android:id="#+id/tv_status"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:text="TextView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/civ_user_avatar" />
<TextView
android:id="#+id/tv_candidate_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginLeft="24dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:text="TextView"
android:textAppearance="#style/TextTitle"
app:layout_constraintBottom_toTopOf="#+id/tv_candidate_email"
app:layout_constraintEnd_toStartOf="#+id/tv_status"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toEndOf="#+id/civ_user_avatar"
app:layout_constraintTop_toTopOf="#+id/civ_user_avatar" />
<TextView
android:id="#+id/tv_candidate_email"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:text="TextView"
android:textAppearance="#style/TextSecondary"
app:layout_constraintEnd_toStartOf="#+id/tv_status"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/tv_candidate_name"
app:layout_constraintTop_toBottomOf="#+id/tv_candidate_name" />
<TextView
android:id="#+id/textView7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:text="Assessment : "
android:textColor="#color/black"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="#+id/tv_candidate_name"
app:layout_constraintTop_toBottomOf="#+id/tv_candidate_email" />
<TextView
android:id="#+id/tv_assessment_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:text="TextView"
android:textAppearance="#style/TextTitleBold"
app:layout_constraintBottom_toBottomOf="#+id/textView7"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toEndOf="#+id/textView7"
app:layout_constraintTop_toTopOf="#+id/textView7" />
</android.support.constraint.ConstraintLayout>
</layout>
Is there an explanation for this behavior so that I can understand how Constraint layout is actually working?
Update : After removing bottom constraints of Imageview and textView7constraint, the layout looks as below :

For all of your views instead of match_parent
use 0dp in the xml or select fill_parent in the design view

Please try below layout :
<?xml version="1.0" encoding="utf-8"?>
<layout 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.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/civ_user_avatar"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="16dp"
android:src="#color/primary"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tv_status"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:text="TextView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/civ_user_avatar" />
<TextView
android:id="#+id/tv_candidate_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginLeft="24dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:text="TextView"
app:layout_constraintEnd_toStartOf="#+id/tv_status"
app:layout_constraintStart_toEndOf="#+id/civ_user_avatar"
app:layout_constraintTop_toTopOf="#+id/civ_user_avatar" />
<TextView
android:id="#+id/tv_candidate_email"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:text="TextView"
android:textAppearance="#style/TextSecondary"
app:layout_constraintEnd_toStartOf="#+id/tv_status"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/tv_candidate_name"
app:layout_constraintTop_toBottomOf="#+id/tv_candidate_name" />
<TextView
android:id="#+id/textView7"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:maxLines="1"
android:text="Assessment : "
android:textColor="#color/black"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="#+id/tv_candidate_name"
app:layout_constraintTop_toBottomOf="#+id/tv_candidate_email" />
<TextView
android:id="#+id/tv_assessment_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="#+id/textView7"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toEndOf="#+id/textView7"
app:layout_constraintTop_toTopOf="#+id/textView7" />
</android.support.constraint.ConstraintLayout>
</layout>

Try using Guidelines, for example horizontal, and you can fit all the view more easy there. If you combine it with 2 or 3 verticals (guidelines) it will be more easy to arrive it.

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.