Pfthb

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>