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

Problem placing TextView on ImageView using ConstraintLayout

I am using Constraintlayout and I want to place my Textview on my Imageview, it is supposed to look like this after I'm done: https://i.stack.imgur.com/mYAws.png but each time I add constraints to the texts(Vertically and horizontally), the texts disorganizes and goes totally from how I want it to be,
Sometimes even shifting my images. I have tried severally to adjust it well to no avail
My layout.xml:
<?xml version="1.0" encoding="utf-8"?>
<androidx.core.widget.NestedScrollView 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:fillViewport="true">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".FirstFragment">
<!-- TODO: Update blank fragment layout -->
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="Current"
android:textColor="#FF3D19"
android:textSize="24sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="358dp"
android:layout_height="337dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView3"
app:srcCompat="#drawable/orange_panel" />
<ImageView
android:id="#+id/imageView4"
android:layout_width="146dp"
android:layout_height="151dp"
android:layout_marginStart="45dp"
android:layout_marginTop="7dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView3"
app:srcCompat="#drawable/green_panel" />
<ImageView
android:id="#+id/imageView5"
android:layout_width="146dp"
android:layout_height="151dp"
android:layout_marginTop="6dp"
android:layout_marginEnd="44dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView3"
app:srcCompat="#drawable/pink_panel" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tonight"
android:textColor="#FFFFFF"
android:textSize="18sp"
tools:layout_editor_absoluteX="89dp"
tools:layout_editor_absoluteY="415dp" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tomorrow"
android:textColor="#FFFFFF"
android:textSize="18sp"
tools:layout_editor_absoluteX="254dp"
tools:layout_editor_absoluteY="415dp" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>

The answer is pretty straightforward. First you should delete this lines from both text views.
tools:layout_editor_absoluteX="254dp"
tools:layout_editor_absoluteY="415dp"
Then all you need to do is add constraints like this. Below are constraints for your image
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
And the constraints for your text view would be like this.
app:layout_constraintEnd_toEndOf="#+id/image_view"
app:layout_constraintStart_toStartOf="#+id/image_view"
app:layout_constraintTop_toTopOf="#+id/image_view"
Of course you can add different constraints for the image because i do not know how do you want to position the image view in the app. But if you want a text view to be inside the image like in the link you sent then the constraints for the text view will be always like this.

It's all about tools:layout_editor_absoluteX and tools:layout_editor_absoluteY for yours textView3 and textView4. Also i think you do not know for what namespace tools exist.

Check the example below; it shows you what constraints can be used to get in the direction of your layout goals.
<?xml version="1.0" encoding="utf-8"?>
<androidx.core.widget.NestedScrollView 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">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="Current"
android:textColor="#FF3D19"
android:textSize="24sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="300dp"
android:layout_height="300dp"
android:layout_marginTop="16dp"
android:background="#00FF00"
android:textColor="#FFFFFF"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView1" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_marginTop="16dp"
android:background="#0000FF"
app:layout_constraintStart_toStartOf="#+id/imageView1"
app:layout_constraintTop_toBottomOf="#+id/imageView1" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_marginTop="16dp"
android:background="#FF0000"
app:layout_constraintEnd_toEndOf="#+id/imageView1"
app:layout_constraintTop_toBottomOf="#+id/imageView1" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tonight"
android:textColor="#FFFFFF"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="#+id/imageView2"
app:layout_constraintEnd_toEndOf="#+id/imageView2"
app:layout_constraintStart_toStartOf="#+id/imageView2"
app:layout_constraintTop_toTopOf="#+id/imageView2" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tomorrow"
android:textColor="#FFFFFF"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="#+id/imageView3"
app:layout_constraintEnd_toEndOf="#+id/imageView3"
app:layout_constraintStart_toStartOf="#+id/imageView3"
app:layout_constraintTop_toTopOf="#+id/imageView3" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
See how this example looks: screenshot.

ConstraintLayout TextView cutting text off

I have a strange problem where the text in a TextView is not being displayed if it's wrapping to a new line.
This screenshot shows my issue:
The bold text is causing a word to wrap to the next line but it's not being shown. This is what it looks like without the bold:
And this is what it looks like if I force two lines using android:lines="2":
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:id="#+id/episode_row_item_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:padding="5dp"
android:foreground="?android:attr/selectableItemBackground"
android:orientation="horizontal">
<ImageView
android:id="#+id/episode_row_item_title_thumbnail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:visibility="gone"
/>
<!-- This is the problematic textview-->
<TextView
android:id="#+id/episode_row_item_title"
android:layout_width="0dp"
android:layout_height="match_parent"
android:lineSpacingExtra="2dp"
android:layout_marginEnd="8dp"
android:breakStrategy="simple"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#+id/episode_row_item_download"
android:foreground="?android:attr/selectableItemBackground"
/>
<ImageView
android:id="#+id/episode_row_item_download"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="2dp"
app:layout_constraintTop_toTopOf="#+id/episode_row_item_title"
app:layout_constraintEnd_toEndOf="parent"
android:foreground="?android:attr/selectableItemBackground"
/>
<TextView
android:id="#+id/episode_row_item_date"
android:layout_width="0dp"
android:layout_height="match_parent"
android:textSize="13sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/episode_row_item_title"
app:layout_constraintEnd_toStartOf="#+id/episode_row_item_duration"
android:layout_marginTop="4dp"
/>
<TextView
android:id="#+id/episode_row_item_duration"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="13sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/episode_row_item_title"
android:layout_marginTop="4dp"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
I've tried setting the width to wrap_content and changing the padding and margins but nothing works.
I should mention this layout is a row in a RecyclerView if that makes a difference.

<?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/episode_row_item_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp"
android:foreground="?android:attr/selectableItemBackground">
<ImageView
android:id="#+id/episode_row_item_title_thumbnail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:visibility="visible"
/>
<!-- This is the problematic textview-->
<TextView
android:id="#+id/episode_row_item_title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:lineSpacingExtra="2dp"
android:layout_marginEnd="8dp"
android:textStyle="bold"
android:text="Episode 1010 Christina Hendericks"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/episode_row_item_title_thumbnail"
app:layout_constraintEnd_toStartOf="#+id/episode_row_item_download"
android:foreground="?android:attr/selectableItemBackground"
android:layout_marginRight="8dp"/>
<ImageView
android:id="#+id/episode_row_item_download"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="2dp"
app:layout_constraintTop_toTopOf="#+id/episode_row_item_title"
app:layout_constraintEnd_toEndOf="parent"
android:foreground="?android:attr/selectableItemBackground"
/>
<TextView
android:id="#+id/episode_row_item_date"
android:layout_width="0dp"
android:layout_height="match_parent"
android:textSize="13sp"
app:layout_constraintStart_toStartOf="parent"
android:text="Yesterday"
app:layout_constraintTop_toBottomOf="#+id/episode_row_item_title"
app:layout_constraintEnd_toStartOf="#+id/episode_row_item_duration"
android:layout_marginTop="4dp"/>
<TextView
android:id="#+id/episode_row_item_duration"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="13sp"
android:text="01:02:24"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/episode_row_item_download"
android:layout_marginTop="4dp"/>
</androidx.constraintlayout.widget.ConstraintLayout>
Try using the above layout with correct drawables

How to center imageView in third row using Constraint Layout

2x2 plus 1 un-centered tile
I have 5 square tiles all of which need to be the same size but flexible so it can grow and shrink to fit different display sizes. There is text beneath each tile. I want the last row to be centered horizontally and wish to do this using only xml if possible. I also have a toolbar and a navigation bar. Here is my xml file:
<?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:id="#+id/main_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity" android:background="#drawable/sunrise" tools:layout_editor_absoluteY="25dp">
<android.support.v7.widget.Toolbar
android:id="#+id/my_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/toolBarColor"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:navigationIcon="#drawable/refresh2">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Now - The Technology"
android:textColor="#color/appTitleColor"
android:textSize="18sp"
android:layout_gravity="center"
android:id="#+id/toolbar_title"/>
</android.support.v7.widget.Toolbar>
<ImageView
android:id="#+id/ivPlay"
app:layout_constraintDimensionRatio="1:1"
android:layout_width="0dp"
android:layout_height="0dp"
app:srcCompat="#drawable/play"
android:scaleType="fitXY" android:adjustViewBounds="true"
android:contentDescription="#string/con_des_play"
app:layout_constraintTop_toBottomOf="#+id/my_toolbar"
android:layout_marginTop="16dp"
app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="16dp"
app:layout_constraintEnd_toStartOf="#+id/ivReminder"
android:layout_marginEnd="16dp"
/>
<TextView android:id="#+id/tvPlay"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="#+id/ivPlay"
app:layout_constraintEnd_toEndOf="#+id/ivPlay"
app:layout_constraintTop_toBottomOf="#+id/ivPlay"
android:layout_marginBottom="2dp"
android:text="#string/play_10_minutes"
android:textColor="#color/iconTextColor"
android:textSize="16sp"
/>
<ImageView
android:id="#+id/ivReminder"
app:layout_constraintDimensionRatio="1:1"
android:layout_width="0dp"
android:layout_height="0dp"
app:srcCompat="#drawable/reminder"
android:scaleType="fitXY" android:adjustViewBounds="true"
android:contentDescription="#string/con_des_play"
app:layout_constraintTop_toBottomOf="#+id/my_toolbar"
android:layout_marginTop="16dp"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="16dp"
app:layout_constraintStart_toEndOf="#+id/ivPlay"
android:layout_marginStart="16dp"
/>
<TextView android:id="#+id/tvReminder"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="#+id/ivReminder"
app:layout_constraintEnd_toEndOf="#+id/ivReminder"
app:layout_constraintTop_toBottomOf="#+id/ivReminder"
android:layout_marginBottom="2dp"
android:text="#string/now_reminder"
android:textColor="#color/iconTextColor"
android:textSize="16sp"
/>
<ImageView
android:id="#+id/ivGuide"
app:layout_constraintDimensionRatio="1:1"
android:layout_width="0dp"
android:layout_height="0dp"
app:srcCompat="#drawable/guide"
android:scaleType="fitXY" android:adjustViewBounds="true"
android:contentDescription="#string/con_des_play"
app:layout_constraintTop_toBottomOf="#+id/tvPlay"
android:layout_marginTop="20dp"
app:layout_constraintStart_toStartOf="#+id/ivPlay"
app:layout_constraintEnd_toEndOf="#+id/ivPlay"
app:layout_constraintHorizontal_bias="1.0"/>
<TextView android:id="#+id/tvGuide"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="#+id/ivGuide"
app:layout_constraintEnd_toEndOf="#+id/ivGuide"
app:layout_constraintTop_toBottomOf="#+id/ivGuide"
android:layout_marginBottom="2dp"
android:text="#string/guide"
android:textColor="#color/iconTextColor"
android:textSize="16sp"
/>
<ImageView
android:id="#+id/ivUpgrade"
app:layout_constraintDimensionRatio="1:1"
android:layout_width="0dp"
android:layout_height="0dp"
app:srcCompat="#drawable/upgrade"
android:scaleType="fitXY" android:adjustViewBounds="true"
android:contentDescription="#string/con_des_play"
app:layout_constraintTop_toTopOf="#+id/ivGuide"
app:layout_constraintStart_toStartOf="#+id/ivReminder"
app:layout_constraintEnd_toEndOf="#+id/ivReminder"
/>
<TextView android:id="#+id/tvUpgrade"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="#+id/ivUpgrade"
app:layout_constraintEnd_toEndOf="#+id/ivUpgrade"
app:layout_constraintTop_toBottomOf="#+id/ivUpgrade"
android:layout_marginTop="2dp"
android:text="#string/upgrade"
android:textColor="#color/iconTextColor"
android:textSize="16sp"
/>
<ImageView
android:id="#+id/ivLearn"
app:layout_constraintDimensionRatio="1:1"
android:layout_width="0dp"
android:layout_height="0dp"
app:srcCompat="#drawable/learn"
android:scaleType="fitXY" android:adjustViewBounds="true"
android:contentDescription="#string/con_des_play"
app:layout_constraintTop_toBottomOf="#+id/tvGuide"
app:layout_constraintStart_toStartOf="#+id/ivGuide"
app:layout_constraintEnd_toEndOf="#+id/ivGuide"
app:layout_constraintBottom_toTopOf="#+id/tvLearn"
android:layout_marginTop="16dp"
android:foregroundGravity="center_horizontal"
app:layout_constraintHorizontal_bias="0.5"/>
<TextView android:id="#+id/tvLearn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="#+id/ivLearn"
app:layout_constraintEnd_toEndOf="#+id/ivLearn"
app:layout_constraintTop_toBottomOf="#+id/ivLearn"
app:layout_constraintBottom_toTopOf="#+id/navigation"
android:text="#string/learn"
android:textColor="#color/iconTextColor"
android:textSize="16sp"
android:layout_marginTop="2dp"
android:layout_marginBottom="16dp"
/>
<android.support.design.widget.BottomNavigationView
android:id="#+id/navigation"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#D3D3D3"
app:menu="#menu/navigation" app:itemTextColor="#color/navAccent" style="#style/AppTheme"
android:visibility="visible" app:itemIconTint="#color/navAccent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="0dp"/>
</android.support.constraint.ConstraintLayout>
Thanks in advance.

Try change attributes of android:id="#+id/ivLearn"
from
app:layout_constraintStart_toStartOf="#+id/ivGuide"
app:layout_constraintEnd_toEndOf="#+id/ivGuide"
to
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"

I haven't tried it yet but the recycler view looks like the best and most flexible answer from the android team. I used vertical guidelines using percentages and I need to test it on different screen sizes which seems to work at least on one screen size. I will have to convert the Java code to Kotlin which I am learning as well.
Thanks.

converting linear layout to constraint layout results in view too left

I had this nested linear layouts
<LinearLayout
android:id="#+id/has_selected_account"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/account_menu_header_signed_in_vertical_margin"
android:layout_marginBottom="#dimen/account_menu_header_signed_in_vertical_margin"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/close_and_recents"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<com.myImage
android:id="#+id/account_avatar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/account_menu_header_signed_in_avatar_margin_start"
android:layout_marginEnd="#dimen/account_menu_header_signed_in_avatar_margin_end"
android:layout_marginLeft="#dimen/account_menu_header_signed_in_avatar_margin_start"
android:layout_marginRight="#dimen/account_menu_header_signed_in_avatar_margin_end"
android:contentDescription="#null"
app:imageViewSize="#dimen/account_menu_header_signed_in_disc_size"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="#dimen/account_menu_name_and_display_vertical_padding"
android:paddingBottom="#dimen/account_menu_name_and_display_vertical_padding"
android:orientation="vertical">
<TextView
android:id="#+id/account_display_name"
style="#style/AccountDataDisplayName"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center_vertical"
tools:text="DisplayNameIsLongSoItShouldBeTruncatedAtSomePoint"/>
<TextView
android:id="#+id/account_name"
style="#style/AccountDataAccountName"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center_vertical|start"
android:includeFontPadding="false"
tools:text="emailisverylongaswellwewantittogettruncated#gmail.longdomain.com"/>
</LinearLayout>
</LinearLayout>
and i wanted to convert it to one constraint layout:
<merge>
<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:id="#+id/has_selected_account"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/google_blue100">
<com.myView
android:id="#+id/account_avatar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/account_menu_header_signed_in_avatar_margin_start"
android:layout_marginEnd="#dimen/account_menu_header_signed_in_avatar_margin_end"
android:layout_marginLeft="#dimen/account_menu_header_signed_in_avatar_margin_start"
android:layout_marginRight="#dimen/account_menu_header_signed_in_avatar_margin_end"
android:contentDescription="#null"
app:imageViewSize="#dimen/account_menu_header_signed_in_disc_size"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<View
android:id="#+id/account_display_name_top_padding"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="#dimen/account_menu_name_and_display_vertical_padding"
android:background="#color/google_red50"
app:layout_constraintBottom_toTopOf="#id/account_display_name"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/account_avatar"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="#+id/account_display_name"
style="#style/AccountDataDisplayName"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#color/google_red100"
android:gravity="center_vertical"
android:includeFontPadding="false"
app:layout_constraintBottom_toTopOf="#+id/account_name"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintStart_toEndOf="#+id/account_avatar"
app:layout_constraintTop_toTopOf="#+id/account_display_name_top_padding"
app:layout_constraintVertical_chainStyle="packed"
app:layout_constraintWidth_default="wrap"
tools:text="DisplayNameIssLongSoItShouldBeTruncatedAtSomePoint"/>
<TextView
android:id="#+id/account_name"
style="#style/AccountDataAccountName"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#color/google_green100"
android:gravity="center_vertical"
android:includeFontPadding="false"
app:layout_constraintBottom_toBottomOf="#+id/account_name_bottom_padding"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintStart_toEndOf="#+id/account_avatar"
app:layout_constraintTop_toBottomOf="#+id/account_display_name"
app:layout_constraintWidth_default="wrap"
tools:text="emailisverylongaswellwewantittogettruncated#gmail.longdomain.com"/>
<View
android:id="#+id/account_name_bottom_padding"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="#dimen/account_menu_name_and_display_vertical_padding"
android:background="#color/google_red50"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/account_avatar"
app:layout_constraintTop_toBottomOf="#id/account_name"/>
</android.support.constraint.ConstraintLayout>
</merge>
The result was almost OK, but the textViews are going too up and too close to the Image view.
here is the new result overlapping the old ui:
Does anyone have an idea why? or how to solve this?
I have added margin left to the imageView but it didn't seem to change anything.

Try building a more parallel structure between the TextViews in the LinearLayout and the ones in the ConstraintLayout something like the following. Here I have used a FrameLayout to show the overlay better and took some liberties with sizes, but the concept holds for your layout. As you can see from the image, the TextViews line up precisely except for the final character which is different between the two sets of TextViews to give a visual of the overlay.
<FrameLayout
android:layout_width="match_parent"
android:layout_height="100dp"
android:orientation="horizontal">
<LinearLayout
android:layout_width="250dp"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingTop="16dp"
android:paddingBottom="16dp">
<TextView
android:id="#+id/account_display_name"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginStart="16dp"
android:layout_weight="1"
android:gravity="center_vertical"
android:text="DisplayName1" />
<TextView
android:id="#+id/account_name"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginStart="16dp"
android:layout_weight="1"
android:gravity="center_vertical|start"
android:includeFontPadding="false"
android:text="emailisvery1" />
</LinearLayout>
<android.support.constraint.ConstraintLayout
android:layout_width="500dp"
android:layout_height="match_parent">
<TextView
android:id="#+id/account_display_name2"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginStart="16dp"
android:gravity="center_vertical"
android:paddingTop="16dp"
android:text="DisplayName2"
app:layout_constraintBottom_toTopOf="#id/account_name2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_weight="1" />
<TextView
android:id="#+id/account_name2"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginStart="16dp"
android:gravity="center_vertical|start"
android:includeFontPadding="false"
android:paddingBottom="16dp"
android:text="emailisvery2"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/account_display_name2"
app:layout_constraintVertical_weight="1" />
</android.support.constraint.ConstraintLayout>
</FrameLayout>t>