Develop Reference

Convert children to proper way in parent constraint layout Android

Hey I am working in android Constraint layout. In my xml I used constraint layout with linear layout. I want to know is there in any way, I can use only constraint layout remove other children layout like linear layout.
item_layout.xml
<?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="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="10dp"
android:orientation="vertical">
<LinearLayout
android:id="#+id/container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:background="#drawable/item_selector_background"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="10dp"
tools:text="25mg" />
<TextView
android:id="#+id/subtext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:layout_marginBottom="8dp"
tools:text="from $1.65" />
</LinearLayout>
<LinearLayout
android:id="#+id/tagContainer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/item_tag_background"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
tools:visibility="visible">
<TextView
android:id="#+id/tagText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:paddingStart="10dp"
android:paddingEnd="10dp" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
My view look like this
I only want to achieve this through constraint layout.

There is definitely a way to do it. Something like this may work for you:
<ConstraintLayout>
<TextView
android:id="#+id/text
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="10dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="25mg" />
<TextView
android:id="#+id/subtext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:layout_marginBottom="8dp"
app:layout_constraintTop_toBottomOf="#id/text"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toTopOf="#id/tagText"
tools:text="from $1.65" />
<TextView
android:id="#+id/tagText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:paddingStart="10dp"
android:paddingEnd="10dp"
app:layout_constraintTop_toBottomOf="#id/subtext"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
</ConstraintLayout>
Just pull the child layouts out and constrain the views the way that you want them.
Note: This is not exact. You may have to play with the constraints to get them the way you want it.

You can use View behind them to set background for the first two TextViews like,
<ConstraintLayout
...>
<View
android:id="#+id/backgroundView"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#drawable/item_selector_background"
app:layout_constraintTop_toTopOf="#id/text"
app:layout_constraintEnd_toEndOf="#id/subtext"
app:layout_constraintStart_toStartOf="#id/subtext"
app:layout_constraintBottom_toBottomOf="#id/subtext"/>
<TextView
android:id="#+id/text"
...
/>
<TextView
android:id="#+id/subtext"
...
/>
<TextView
android:id="#+id/tagText"
...
/>
...
</ConstraintLayout>
the height and width of the backgroundView can be constrained to match the first two TextViews

Create layout using only constraint layout and text view

I am new to android and constraint layout, can you please help me create this layout using only Constraint Layout and Text Views? Don't bother with text/color, just the layout itself.
This is what I have so far, layout seems ok but not quite like in the picture. I don't know if just the different resolution or aspect ratio.
<?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">
<TextView
android:id="#+id/textView45"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="10dp"
android:background="#color/blackk"
android:text="TextView"
app:layout_constraintBottom_toTopOf="#+id/textView49"
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/textView47"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_margin="10dp"
android:background="#color/teal_200"
android:text="TextView"
app:layout_constraintBottom_toTopOf="#+id/textView46"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView45" />
<TextView
android:id="#+id/textView46"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="10dp"
android:background="#android:color/darker_gray"
android:text="TextView"
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/textView50" />
<TextView
android:id="#+id/textView48"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_margin="10dp"
android:background="#color/Accent"
android:text="TextView"
app:layout_constraintBottom_toTopOf="#+id/textView46"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView45" />
<TextView
android:id="#+id/textView49"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="10dp"
android:background="#android:color/holo_green_dark"
android:text="TextView"
app:layout_constraintBottom_toTopOf="#+id/textView50"
app:layout_constraintEnd_toStartOf="#+id/textView48"
app:layout_constraintStart_toEndOf="#+id/textView47"
app:layout_constraintTop_toBottomOf="#+id/textView45" />
<TextView
android:id="#+id/textView50"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="10dp"
android:background="#android:color/holo_green_light"
android:text="TextView"
app:layout_constraintBottom_toTopOf="#+id/textView46"
app:layout_constraintEnd_toStartOf="#+id/textView48"
app:layout_constraintStart_toEndOf="#+id/textView47"
app:layout_constraintTop_toBottomOf="#+id/textView49" />
</androidx.constraintlayout.widget.ConstraintLayout>

Did some modifications in the margins of these two. Now, the layout is looking similar to the one in the image you showed:
<TextView
android:id="#+id/textView49"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:background="#android:color/holo_green_dark"
android:text="TextView"
app:layout_constraintBottom_toTopOf="#+id/textView50"
app:layout_constraintEnd_toStartOf="#+id/textView48"
app:layout_constraintStart_toEndOf="#+id/textView47"
app:layout_constraintTop_toBottomOf="#+id/textView45" />
<TextView
android:id="#+id/textView50"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="10dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="10dp"
android:background="#android:color/holo_green_light"
android:text="TextView"
app:layout_constraintBottom_toTopOf="#+id/textView46"
app:layout_constraintEnd_toStartOf="#+id/textView48"
app:layout_constraintStart_toEndOf="#+id/textView47"
app:layout_constraintTop_toBottomOf="#+id/textView49" />
You can further increase the margins but that's upto you.
Edit: I would suggest you playing with layout_constraintHeight_percent attribute to solve those height irregularities.

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.

ConstraintLayout, TextView and ImageView with Horizontal Alignment and Auto Sizing

I have been facing a problem and believe it is a set of multiple incorrect positioning choices, some information before:
1 - Drawable image has larger width and height than it fits.
2 - TextView text is dynamic but it should never be more than one line, if it is more than one line it should be "cut".
I have the following code:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/title"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#id/icon"
android:text="my small text"
android:lines="1"
android:layout_width="0dp"
android:layout_height="wrap_content"/>
<TextView
android:id="#+id/description"
app:layout_constraintTop_toBottomOf="#id/title"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#id/icon"
android:text="description text"
android:layout_width="0dp"
android:layout_height="wrap_content"/>
<ImageView
android:id="#+id/icon"
app:layout_constraintStart_toEndOf="#id/title"
app:layout_constraintTop_toTopOf="#id/title"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="#id/description"
android:adjustViewBounds="true"
android:scaleType="fitEnd"
android:src="#drawable/ic_print"
app:layout_constrainedWidth="true"
app:layout_constrainedHeight="true"
android:padding="8dp"
android:layout_width="0dp"
android:layout_height="0dp"/>
</androidx.constraintlayout.widget.ConstraintLayout>
Some explanations: As the image is very large and I need it positioned to the left I use android:scaleType="fitEnd" and android:padding="8dp".
The result is satisfactory:
Problem:
When I put very large text in my title I would like it to "push" ImageView to its limit when it is actually limiting itself to 50%.
It's like my ImageView has a "fixed" width when I'm actually using "match contraints with 0dp"
I already tried to add app:layout_constrainedWidth="true" to id: title and id: description (unsuccessfully)

Add a guideline and constrain your title instead of constraining it to the icon. That way when it reaches the guideline it will stop increasing and the icon that’s still constrained to the title will keep its minimum space. The ellipsize property will add the dots at the end of the title when it gets too big. All you need to do is decide what the minimum space is going to be for your icon, by adjusting the percentage on the guideline.
<?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="match_parent">
<TextView
android:id="#+id/title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="1"
android:text="my small text"
android:textAlignment="viewStart"
app:layout_constraintEnd_toStartOf="#id/guideline"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/description"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="description text"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/icon"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/title" />
<ImageView
android:id="#+id/icon"
android:layout_width="0dp"
android:layout_height="0dp"
android:adjustViewBounds="true"
android:padding="8dp"
android:scaleType="fitEnd"
android:src="#drawable/ic_print"
app:layout_constrainedHeight="true"
app:layout_constrainedWidth="true"
app:layout_constraintBottom_toBottomOf="#id/description"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/title"
app:layout_constraintTop_toTopOf="#id/title" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.9" />
</androidx.constraintlayout.widget.ConstraintLayout>
EDIT after clarification in comments:
This is the proposed Barrier solution.
<?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="match_parent">
<TextView
android:id="#+id/title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="1"
android:text="my small text"
android:textAlignment="viewStart"
app:layout_constraintEnd_toStartOf="#id/barrier"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/description"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="1"
android:text="description text"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/barrier"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/title" />
<ImageView
android:id="#+id/icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="8dp"
android:src="#drawable/app_logo"
app:layout_constraintBottom_toBottomOf="#id/description"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/title"
app:layout_constraintTop_toTopOf="#id/title" />
<androidx.constraintlayout.widget.Barrier
android:id="#+id/barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="start"
app:constraint_referenced_ids="icon" />
</androidx.constraintlayout.widget.ConstraintLayout>

Correct layouts to use in this situation?

I'm completely new to Android development, and so I'm still a little confused as to which layouts to use in certain situations.
I need to recreate this:
Where you have 2 lines of text (one above, one below) aligned next to an image. This is all within a card.
Bold Text and Text should be centered with each other vertically. Subtext should be 10dp below the first line. The space between the lines of text and the image is 16dp.
First I used only a RelativeLayout with an ImageView and 3 TextView in it, but that felt wrong and unorganized.
So then I tried this:
http://i.imgur.com/eph6Em8.png
But I'm still not sure if this is the most correct way to do this.
What should I change?

Try this:
Set your "Parent Layout" as "RelativeLayout".
Inside this relative layout, take an ImageView and set "alignParentLeft" property to true and also "centreInparent" to true.
Now, inside this RelativeLayout, take a LinearLayout with orientation set to Veritical and "toRightOf=#id/ImageView". Inside this LinearLayout, take RelativeLayout (RelativeLayout2) as first child and inside it Take two "TextViews".
One with "alignParentLeft=true" and "width = matchparent". While the second one "alignParenRight=true" and "width = wrap_content". Now, what you need to is, in the first "TextView" set "toLeftOf=#id/secondTextView".
Now about the last "TextView". Just create a "TextView" inside the LinearLayout (that you created above with vertical orientation) and place it as second child.
This will create a perfect layout. It is also an easy way to create one.

You can use Constraint Layout to achieve your desired UI. Below is the xml code to implement your UI.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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">
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
app:src="#drawable/def_doc"
android:id="#+id/rvMsg_img"
android:maxHeight="80dp"
android:maxWidth="80dp"
android:minHeight="80dp"
android:minWidth="80dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="16dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginRight="16dp"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintBottom_toTopOf="#+id/viewLine" />
<TextView
android:text="Kevin De Bruyne"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/rvMsg_name"
android:textColor="#color/textBlack"
app:layout_constraintTop_toTopOf="#+id/rvMsg_img"
app:layout_constraintBottom_toBottomOf="#+id/rvMsg_img"
android:layout_marginStart="16dp"
app:layout_constraintLeft_toRightOf="#+id/rvMsg_img"
android:layout_marginLeft="16dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
app:layout_constraintVertical_bias="0.2"
app:layout_constraintHorizontal_bias="0.0"
android:textSize="16sp"
app:layout_constraintRight_toLeftOf="#+id/rvMsg_time" />
<TextView
android:text="Hello developer. please check this message for long length. max length to 50 characters."
android:layout_width="0dp"
android:layout_height="wrap_content"
android:id="#+id/rvMsg_last"
android:maxLines="2"
android:ellipsize="end"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/rvMsg_name"
android:layout_marginStart="16dp"
app:layout_constraintLeft_toRightOf="#+id/rvMsg_img"
android:layout_marginLeft="16dp"
app:layout_constraintBottom_toBottomOf="#+id/rvMsg_img"
app:layout_constraintVertical_bias="0.0"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintRight_toLeftOf="#+id/rvMsg_time"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp" />
<TextView
android:text="09:50 AM"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/rvMsg_time"
app:layout_constraintTop_toTopOf="#+id/rvMsg_img"
app:layout_constraintBottom_toBottomOf="#+id/rvMsg_img"
android:layout_marginStart="8dp"
app:layout_constraintLeft_toRightOf="#+id/rvMsg_img"
android:layout_marginLeft="8dp"
android:layout_marginEnd="16dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginRight="16dp"
app:layout_constraintVertical_bias="0.2"
app:layout_constraintHorizontal_bias="1.0" />
<View
android:id="#+id/viewLine"
android:layout_height="2dp"
android:layout_width="0dp"
android:background="#EAEAEA"
android:layout_marginStart="16dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginLeft="16dp"
android:layout_marginEnd="16dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginRight="16dp"
app:layout_constraintBottom_toBottomOf="parent" />
</android.support.constraint.ConstraintLayout>
Hope it will help you.

Try this layout structure
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<ImageView
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<LinearLayout
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<TextView
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="centar"
android:gravity="center"
android:orientation="horizontal"
android:weightSum="4">
<ImageView
android:layout_width="0dp"
android:layout_height="100dp"
android:layout_weight="1"
android:src="#mipmap/ic_launcher" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="2"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="BOLD TEXT"
android:textStyle="bold" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Sub Text" />
</LinearLayout>
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Text" />
tru this code to achive gole.