Remove space between two views in chained view in constraint layout

Remove space between two views in chained view in constraint layout - android

I am using chained view in constraint layout. Now I want the intermediate space between two text views to be removed.As the buttons at the bottom are at distance. I am trying to move them from design layout but its not happening as well. How to do it.Following is my xml
<?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="match_parent"
tools:layout_editor_absoluteY="81dp">
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="23dp"
android:layout_marginStart="32dp"
android:gravity="center"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="#+id/imageView3"
app:layout_constraintStart_toEndOf="#+id/imageView3" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="26dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView2"
app:srcCompat="#mipmap/ic_launcher_round" />
<TextView
android:id="#+id/textViewHeader"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="TextView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<!--<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="1dp"
android:layout_marginStart="20dp"
android:layout_marginTop="60dp"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#id/linearLayout2">-->
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="25dp"
android:layout_marginStart="16dp"
android:layout_marginTop="70dp"
app:layout_constraintEnd_toStartOf="#+id/textView2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#mipmap/ic_launcher_round" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginStart="32dp"
android:layout_marginTop="26dp"
android:gravity="center"
android:text="TextView"
app:layout_constraintStart_toEndOf="#+id/imageView2"
app:layout_constraintTop_toTopOf="#+id/imageView2" />
<!-- </LinearLayout>-->
<!-- <LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="1dp"
android:layout_marginStart="20dp"
android:layout_marginTop="60dp"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="#id/linearLayout"
>-->
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="30dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView"
app:srcCompat="#mipmap/ic_launcher_round" />
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="17dp"
android:layout_gravity="center"
android:layout_marginBottom="58dp"
android:layout_marginEnd="213dp"
android:layout_marginTop="58dp"
android:gravity="center"
android:text="TextView"
app:layout_constraintBottom_toTopOf="#+id/imageView2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/imageView"
app:layout_constraintTop_toBottomOf="#+id/textViewHeader" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="67dp"
android:layout_marginStart="90dp"
android:gravity="center"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="63dp"
android:layout_marginEnd="89dp"
android:gravity="center"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/textView4" />
<!-- </LinearLayout>-->
</android.support.constraint.ConstraintLayout>
At the bottom there are two text views,placed horizontally and there is space between them. Thanks much :)

To remove space between two chained view, simply add the following line to the first item in the chain:
app:layout_constraintHorizontal_chainStyle="packed"
To read more about chain styles:
Official Android documentation
Medium article

You have to add Guideline
<?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="match_parent"
tools:layout_editor_absoluteY="81dp">
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="23dp"
android:layout_marginStart="32dp"
android:gravity="center"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="#+id/imageView3"
app:layout_constraintStart_toEndOf="#+id/imageView3" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="26dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView2"
app:srcCompat="#mipmap/ic_launcher_round" />
<TextView
android:id="#+id/textViewHeader"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="TextView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<!--<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="1dp"
android:layout_marginStart="20dp"
android:layout_marginTop="60dp"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#id/linearLayout2">-->
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="25dp"
android:layout_marginStart="16dp"
android:layout_marginTop="70dp"
app:layout_constraintEnd_toStartOf="#+id/textView2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#mipmap/ic_launcher_round" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginStart="32dp"
android:layout_marginTop="26dp"
android:gravity="center"
android:text="TextView"
app:layout_constraintStart_toEndOf="#+id/imageView2"
app:layout_constraintTop_toTopOf="#+id/imageView2" />
<!-- </LinearLayout>-->
<!-- <LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="1dp"
android:layout_marginStart="20dp"
android:layout_marginTop="60dp"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="#id/linearLayout"
>-->
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="30dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView"
app:srcCompat="#mipmap/ic_launcher_round" />
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="17dp"
android:layout_gravity="center"
android:layout_marginBottom="58dp"
android:layout_marginEnd="213dp"
android:layout_marginTop="58dp"
android:gravity="center"
android:text="TextView"
app:layout_constraintBottom_toTopOf="#+id/imageView2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/imageView"
app:layout_constraintTop_toBottomOf="#+id/textViewHeader" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="67dp"
android:gravity="center"
app:layout_constraintEnd_toStartOf="#+id/guideline1"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="parent" />
<TextView
android:id="#+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="63dp"
android:gravity="center"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#+id/guideline1" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/guideline1"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5"/>
<!-- </LinearLayout>-->
</android.support.constraint.ConstraintLayout>
About Guideline in ConstraintLayout:
Utility class representing a Guideline helper object for ConstraintLayout. Helper objects are not displayed on device (they are marked as View.GONE) and are only used for layout purposes. They only work within a ConstraintLayout. [...]
For more details, there is good documentation:
https://developer.android.com/reference/android/support/constraint/Guideline.html

Related

How do I convert this Layout to ConstraintLayout?

I am trying to convert this layout to ConstrainLayout ,relativeLayout1 layout_height must be 60dp,how do I convert this layout to ConstraintLayout?
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:id="#+id/relativeLayout1"
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_weight="1">
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:src="#mipmap/ic_launcher" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toEndOf="#id/imageView1"
android:orientation="vertical">
<TextView
android:id="#+id/textview2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
</LinearLayout>
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_weight="1">
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:src="#mipmap/ic_launcher" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toEndOf="#id/imageView2"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
</LinearLayout>
</RelativeLayout>
</LinearLayout>
</LinearLayout>

<?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"
>
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:src="#mipmap/ic_launcher"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView1" />
<TextView
android:id="#+id/textview2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="#+id/imageView1"
app:layout_constraintStart_toEndOf="#+id/imageView1"
app:layout_constraintTop_toBottomOf="#+id/textView1"
app:layout_constraintVertical_bias="0.3" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="#+id/imageView1"
app:layout_constraintStart_toEndOf="#+id/imageView1"
app:layout_constraintTop_toBottomOf="#+id/textView1"
app:layout_constraintVertical_bias="0.74" />
<RelativeLayout
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_weight="1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/textview2"
app:layout_constraintTop_toTopOf="parent">
</RelativeLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

Here is one possible conversion. Here are a few notes about this conversion:
Setting the size of the ImageView to 60dp then constraining things to that effectively sets the height of the "row" to 60dp. If the text in the text views is long (or large font) it can still overflow the row. That was true with the relative layout too.
Setting the vertical chain style for text views 2 and 3 to "packed" mimics what the internal linear layout does. If you just want them to be aligned to the top of the image then the chain is not necessary.
<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">
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
/>
<ImageView
android:id="#+id/imageView1"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_centerVertical="true"
android:src="#mipmap/ic_launcher"
app:layout_constraintTop_toBottomOf="#id/textView1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintDimensionRatio="1"
/>
<TextView
android:id="#+id/textview2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintTop_toTopOf="#id/imageView1"
app:layout_constraintBottom_toTopOf="#id/textView3"
app:layout_constraintStart_toEndOf="#id/imageView1"
app:layout_constraintEnd_toStartOf="#id/imageView2"
app:layout_constraintVertical_chainStyle="packed"
app:layout_constraintHorizontal_bias="0.0" />
<TextView
android:id="#+id/textView3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintTop_toBottomOf="#id/textview2"
app:layout_constraintBottom_toBottomOf="#id/imageView1"
app:layout_constraintStart_toEndOf="#id/imageView1"
app:layout_constraintEnd_toStartOf="#id/imageView2"
app:layout_constraintHorizontal_bias="0.0"/>
<ImageView
android:id="#+id/imageView2"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_centerVertical="true"
android:src="#mipmap/ic_launcher"
app:layout_constraintTop_toBottomOf="#id/textView1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#id/imageView1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintDimensionRatio="1"
/>
<TextView
android:id="#+id/textview4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintTop_toTopOf="#id/imageView2"
app:layout_constraintBottom_toTopOf="#id/textView5"
app:layout_constraintStart_toEndOf="#id/imageView2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintVertical_chainStyle="packed"
app:layout_constraintHorizontal_bias="0.0" />
<TextView
android:id="#+id/textView5"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintTop_toBottomOf="#id/textview4"
app:layout_constraintBottom_toBottomOf="#id/imageView2"
app:layout_constraintStart_toEndOf="#id/imageView2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"/>
</androidx.constraintlayout.widget.ConstraintLayout>

Why is my view stretching over list view boundaries?

The problem consists of, in this case, two views going out of planed boundaries of a list view. First of all the whole list view should be under the text view:
app:layout_constraintTop_toBottomOf="#+id/tptp"
Second, right side of the view stretches out of screen even though its width is set to match_parent.
android:layout_width="match_parent"
My Activity:
<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"
tools:context=".ListOfChatsActivity">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/picture"
android:layout_width="120dp"
android:layout_height="120dp"
app:layout_constraintBottom_toTopOf="#+id/guideline3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:src="#drawable/slika1" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="126dp" />
<TextView
android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="15dp"
android:text="#string/name"
android:textColor="#color/logoBlue"
android:textSize="22sp"
app:layout_constraintEnd_toEndOf="#+id/picture"
app:layout_constraintStart_toStartOf="#+id/picture"
app:layout_constraintTop_toBottomOf="#+id/picture" />
<TextView
android:id="#+id/email"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:text="#string/email"
android:textColor="#color/logoBlue"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="#+id/name"
app:layout_constraintStart_toStartOf="#+id/name"
app:layout_constraintTop_toBottomOf="#+id/name" />
<TextView
android:id="#+id/phone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="#string/phone"
android:textColor="#color/logoBlue"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="#+id/email"
app:layout_constraintStart_toStartOf="#+id/email"
app:layout_constraintTop_toBottomOf="#+id/email" />
<TextView
android:id="#+id/tptp"
android:layout_width="match_parent"
android:layout_height="41dp"
android:background="#color/logoBlue"
android:text="#string/contacts"
android:textAlignment="center"
android:textColor="#fff"
android:textSize="30sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/guideline3" />
<ListView
android:id="#+id/list"
android:layout_width="410dp"
android:layout_height="269dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tptp"
app:layout_constraintVertical_bias="1.0" />
</androidx.constraintlayout.widget.ConstraintLayout>
And the View:
<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="vertical"
android:background="#drawable/customborder">
<TextView
android:id="#+id/chatName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/name"
android:textAlignment="center"
android:textColor="#color/logoBlue"
android:textSize="22sp"
android:textStyle="bold"
android:layout_marginBottom="20dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:gravity="center_horizontal" />
<TextView
android:id="#+id/textView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/last_seen"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="#+id/name"
app:layout_constraintTop_toBottomOf="#+id/chatName" />
<TextView
android:id="#+id/date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:gravity="start"
android:text="#string/date"
app:layout_constraintBottom_toBottomOf="#+id/textView6"
app:layout_constraintStart_toEndOf="#+id/textView6"
app:layout_constraintTop_toTopOf="#+id/textView6" />
</androidx.constraintlayout.widget.ConstraintLayout>
Picture of the error:
Most likely its a simple mistake since i never got an similar error, but i still can't seem to find it.

Layout has been misplaced while view in emulator and mobile

I'm implementing a login screen while implementing it in the Android Studio the deigning seems fine, but after building the app to emulator and mobile it seems weird, like the elements are misplaced, stretched and compressed. I'm using the drawable element in different sizes because I want this app to support multiple resolution devices.
Below image is from XML designing preview
Below image is a screenshot of emulator
Below image is from Android device
here is the xml design [link][4]
What I'm doing here wrong, any suggestions would be helpful
[4]: https://pastebin.com/d9MPen7c

The issue is you have not set the constraints properly. That is why it looks worse on the real devices.
Here is the XML code:
<?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"
android:background="#color/colorAccent"
android:gravity="center"
android:orientation="vertical">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/constraintLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:background="#color/colorPrimary"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/tv_UserName"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="100dp"
android:layout_marginEnd="24dp"
android:layout_marginBottom="24dp"
android:text="User Name"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="#+id/et_UserName"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="24dp"
android:backgroundTint="#FFFFFF"
android:ems="10"
android:inputType="textPersonName"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_UserName" />
<TextView
android:id="#+id/tv_Password"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="24dp"
android:text="Password"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/et_UserName" />
<EditText
android:id="#+id/et_Password"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="24dp"
android:backgroundTint="#FFFFFF"
android:ems="10"
android:inputType="textPassword"
app:layout_constraintBottom_toTopOf="#id/iv_google_bt"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_Password" />
<ImageView
android:id="#+id/iv_google_bt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="24dp"
android:layout_marginEnd="24dp"
android:layout_marginBottom="80dp"
android:contentDescription="#null"
android:src="#mipmap/ic_launcher"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/et_Password" />
<ImageView
android:id="#+id/iv_fb_login"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="24dp"
android:layout_marginEnd="24dp"
android:layout_marginBottom="80dp"
android:layout_toStartOf="#+id/iv_google_bt"
android:contentDescription="#null"
android:src="#mipmap/ic_launcher"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/et_Password" />
</androidx.constraintlayout.widget.ConstraintLayout>
<ImageView
android:id="#+id/iv_getstarted_login"
android:layout_width="0dp"
android:layout_height="75dp"
android:contentDescription="#null"
android:src="#mipmap/ic_launcher"
app:layout_constraintBottom_toBottomOf="#+id/constraintLayout"
app:layout_constraintEnd_toEndOf="#+id/constraintLayout"
app:layout_constraintStart_toStartOf="#+id/constraintLayout"
app:layout_constraintTop_toBottomOf="#id/constraintLayout">
</ImageView>
<ImageView
android:id="#+id/imageView"
android:layout_width="176dp"
android:layout_height="172dp"
android:contentDescription="#null"
android:src="#mipmap/ic_launcher"
app:layout_constraintBottom_toTopOf="#+id/constraintLayout"
app:layout_constraintEnd_toEndOf="#+id/constraintLayout"
app:layout_constraintStart_toStartOf="#+id/constraintLayout"
app:layout_constraintTop_toTopOf="#+id/constraintLayout" />
<TextView
android:id="#+id/login_signup"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="#dimen/_24dp"
android:layout_marginBottom="16dp"
android:gravity="center"
android:text="Dummy text"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/iv_getstarted_login" />
<TextView
android:id="#+id/notamem"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="#dimen/_24dp"
android:layout_marginBottom="16dp"
android:gravity="center"
android:text="Dummy text"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/login_signup" />
</androidx.constraintlayout.widget.ConstraintLayout>
I have placed my resources like dimen, String and drawable. So, Please change you resources with mine.

Here is my sample code for your problem. Adjust the given static value like drawable value in this code by using your own drawable resources. Hope i help you in little way
<?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:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#EBEBEB">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<View
android:id="#+id/view"
android:layout_width="300dp"
android:layout_height="350dp"
android:layout_centerInParent="true"
android:background="#drawable/rectangle_round_view"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" >
</View>
<ImageView
android:id="#+id/img"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_above="#+id/view"
android:layout_centerInParent="true"
android:layout_centerVertical="true"
android:layout_marginBottom="-45dp"
android:background="#mipmap/ic_launcher"
app:layout_constraintBottom_toTopOf="#id/view" />
<TextView
android:id="#+id/txtUsername"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/img"
android:layout_alignStart="#+id/view"
android:layout_alignLeft="#+id/view"
android:layout_alignEnd="#+id/view"
android:layout_alignRight="#+id/view"
android:layout_marginStart="36dp"
android:layout_marginEnd="36dp"
android:layout_marginTop="70dp"
android:text="Username/Email" />
<EditText
android:id="#+id/et_UserName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/txtUsername"
android:layout_alignStart="#+id/view"
android:layout_alignLeft="#+id/view"
android:layout_alignEnd="#+id/view"
android:layout_alignRight="#+id/view"
android:layout_marginStart="36dp"
android:layout_marginEnd="36dp"
android:layout_marginTop="5dp"/>
<TextView
android:id="#+id/txtPassword"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/et_UserName"
android:layout_alignStart="#+id/view"
android:layout_alignLeft="#+id/view"
android:layout_alignEnd="#+id/view"
android:layout_alignRight="#+id/view"
android:layout_marginStart="36dp"
android:layout_marginEnd="36dp"
android:layout_marginTop="10dp"
android:text="Password" />
<EditText
android:id="#+id/et_Password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/txtPassword"
android:layout_alignStart="#+id/view"
android:layout_alignLeft="#+id/view"
android:layout_alignEnd="#+id/view"
android:layout_alignRight="#+id/view"
android:layout_marginStart="36dp"
android:layout_marginEnd="36dp"
android:layout_marginTop="5dp"/>
<ImageButton
android:id="#+id/imgleft"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignStart="#id/view"
android:layout_alignBottom="#id/view"
android:layout_marginBottom="40dp"
android:layout_marginLeft="36dp"
android:background="#drawable/emoji"
android:layout_alignLeft="#id/view" />
<ImageButton
android:id="#+id/imgright"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignEnd="#id/view"
android:layout_alignBottom="#id/view"
android:layout_marginBottom="40dp"
android:layout_marginRight="36dp"
android:background="#drawable/emoji"
android:layout_alignRight="#id/view" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/rectangle_round"
android:layout_below="#+id/view"
android:layout_centerInParent="true"
android:layout_centerVertical="true"
android:layout_marginTop="-25dp"
android:text="Get Started"
android:textAlignment="center"
android:paddingLeft="50dp"
android:paddingRight="50dp"
android:textAllCaps="false"
app:layout_constraintBottom_toTopOf="#id/view"/>
<TextView
android:id="#+id/txtNotAMemberYet"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/view"
android:layout_centerHorizontal="true"
android:layout_marginTop="87dp"
android:text="Not a member yet"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/view"
app:layout_constraintBottom_toTopOf="#id/txtSignUp"
/>
<TextView
android:id="#+id/txtSignUp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/txtNotAMemberYet"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:text="Sign Up"
android:textColor="#00BCD4"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent" />
</RelativeLayout>

How to align two objects to the center of the Imageview

I would like to align two of my TextViews based on the Imageview. How would I be able to achieve that gravity:center effect on these TextViews responsively? I have tried making the adjusting the margins but then it doesn't work properly since the different phone will have different resolutions and screen sizes so it appears to be distorted on other phones.
Here is what I am trying to do:
See the Image
Code I tried (Constraint Layout is in AndroidX) :
<?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:id="#+id/Constraintlayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:id="#+id/imageView1"
android:layout_width="82dp"
android:layout_height="80dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/imageView2"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/photo" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="82dp"
android:layout_height="80dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/imageView1"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/photo" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
tools:layout_editor_absoluteX="58dp"
tools:layout_editor_absoluteY="420dp" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
tools:layout_editor_absoluteX="128dp"
tools:layout_editor_absoluteY="420dp" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
tools:layout_editor_absoluteX="226dp"
tools:layout_editor_absoluteY="420dp" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
tools:layout_editor_absoluteX="296dp"
tools:layout_editor_absoluteY="420dp" />
</androidx.constraintlayout.widget.ConstraintLayout>

You can try this:
<?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:id="#+id/Constraintlayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:id="#+id/imageView1"
android:layout_width="82dp"
android:layout_height="80dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/guideline"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:src="#tools:sample/avatars" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="82dp"
android:layout_height="80dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toTopOf="parent"
tools:src="#tools:sample/avatars" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
android:text="TextView"
app:layout_constraintEnd_toStartOf="#+id/guideline4"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView1" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:text="TextView"
app:layout_constraintEnd_toStartOf="#+id/guideline"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/guideline4"
app:layout_constraintTop_toBottomOf="#+id/imageView1" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
android:text="TextView"
app:layout_constraintEnd_toStartOf="#+id/guideline5"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toBottomOf="#+id/imageView2" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:text="TextView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/guideline5"
app:layout_constraintTop_toBottomOf="#+id/imageView2" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintEnd_toEndOf="#id/imageView1"
app:layout_constraintGuide_percent="0.25"
app:layout_constraintStart_toStartOf="#id/imageView1" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintEnd_toEndOf="#id/imageView2"
app:layout_constraintGuide_percent="0.75"
app:layout_constraintStart_toStartOf="#id/imageView2" />
</androidx.constraintlayout.widget.ConstraintLayout>

Try this:
<?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:id="#+id/Constraintlayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:id="#+id/imageView1"
android:layout_width="82dp"
android:layout_height="80dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/imageView2"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/photo" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="82dp"
android:layout_height="80dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/imageView1"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/photo" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:text="TextView"
app:layout_constraintEnd_toStartOf="#id/textView2"
app:layout_constraintStart_toStartOf="#id/imageView1"
app:layout_constraintTop_toBottomOf="#id/imageView1" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:text="TextView"
app:layout_constraintEnd_toEndOf="#id/imageView1"
app:layout_constraintStart_toEndOf="#id/textView1"
app:layout_constraintTop_toBottomOf="#id/imageView1" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:text="TextView"
app:layout_constraintEnd_toStartOf="#id/textView4"
app:layout_constraintStart_toStartOf="#id/imageView2"
app:layout_constraintTop_toBottomOf="#id/imageView2" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:text="TextView"
app:layout_constraintEnd_toEndOf="#id/imageView2"
app:layout_constraintStart_toEndOf="#id/textView3"
app:layout_constraintTop_toBottomOf="#id/imageView2" />
</androidx.constraintlayout.widget.ConstraintLayout>

You should try with Linear layout like this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:orientation="horizontal">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_gravity="center"
android:padding="5dp"
android:src="#drawable/ic_person_pin"
android:tint="#color/colorPrimaryDark" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="horizontal">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_weight="1"
android:text="TextView"
android:textColor="#000"
android:textSize="12sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="TextView"
android:textColor="#000"
android:textSize="12sp" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_gravity="center"
android:padding="5dp"
android:src="#drawable/ic_person_pin"
android:tint="#color/colorPrimaryDark" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="TextView"
android:textColor="#000"
android:textSize="12sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="TextView"
android:textColor="#000"
android:textSize="12sp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
This a xml code

Solver for ConstraintLayout doesn't measure include correctly

I'm currently practicing UI designing in Android and needed to make a layout be included in multiple layouts as a header. So I made this quite complex layout below.
<?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"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#f5f5f5">
<include
android:id="#+id/includeItem"
layout="#layout/dialog_header"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ScrollView
android:layout_width="match_parent"
android:layout_height="500dp"
android:layout_marginTop="60dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/includeItem">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.constraint.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="16dp" />
<android.support.constraint.Guideline
android:id="#+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_end="16dp" />
<EditText
android:id="#+id/editText4"
style="#style/CustomEditText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:ems="10"
android:hint="#string/name"
android:inputType="textPersonName"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/imageView5"
app:layout_constraintTop_toTopOf="#+id/imageView5" />
<ImageView
android:id="#+id/imageView5"
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_marginStart="16dp"
android:layout_marginTop="32dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#color/btn_bg" />
<Button
android:id="#+id/button4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:background="#drawable/border_transparent_bg"
android:drawableRight="#drawable/ic_chevron_right_black_24dp"
android:gravity="start|center_vertical"
android:padding="8dp"
android:text="#string/select_category"
android:textSize="24sp"
app:layout_constraintEnd_toEndOf="#+id/editText4"
app:layout_constraintStart_toStartOf="#+id/editText4"
app:layout_constraintTop_toBottomOf="#+id/editText4" />
<TextView
android:id="#+id/textView10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="#string/tap_to_edit"
android:textColor="#color/textDarkSecondary"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="#+id/imageView5"
app:layout_constraintStart_toStartOf="#+id/imageView5"
app:layout_constraintTop_toBottomOf="#+id/imageView5" />
<TableRow
android:id="#+id/tableRow4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#drawable/border_transparent_bg"
android:padding="8dp"
app:layout_constraintEnd_toEndOf="#+id/tableRow3"
app:layout_constraintStart_toStartOf="#+id/tableRow3"
app:layout_constraintTop_toBottomOf="#+id/tableRow3">
<EditText
android:id="#+id/editText7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="4dp"
android:layout_weight="1"
android:background="#color/white"
android:ems="10"
android:hint="#string/price"
android:inputType="textPersonName"
android:padding="8dp"
android:textSize="24sp" />
<EditText
android:id="#+id/editText6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="4dp"
android:layout_weight="1"
android:background="#color/white"
android:ems="10"
android:hint="#string/sku"
android:inputType="textPersonName"
android:padding="8dp"
android:textSize="24sp" />
</TableRow>
<TextView
android:id="#+id/textView11"
style="#style/ModuleTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:text="#string/variations"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView10" />
<TableRow
android:id="#+id/tableRow3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:background="#drawable/border_transparent_bg"
android:padding="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/textView11"
app:layout_constraintTop_toBottomOf="#+id/textView11">
<EditText
android:id="#+id/editText8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#color/white"
android:ems="10"
android:hint="#string/name"
android:inputType="textPersonName"
android:padding="8dp"
android:textSize="24sp" />
</TableRow>
<Button
android:id="#+id/button6"
style="#style/CommonButton"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="#string/add_variation"
app:layout_constraintEnd_toEndOf="#+id/tableRow4"
app:layout_constraintStart_toStartOf="#+id/tableRow4"
app:layout_constraintTop_toBottomOf="#+id/tableRow4" />
<TextView
android:id="#+id/textView12"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="#string/add_variation_msg"
android:textColor="#color/textDarkSecondary"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="#+id/button6"
app:layout_constraintStart_toStartOf="#+id/button6"
app:layout_constraintTop_toBottomOf="#+id/button6" />
<TextView
android:id="#+id/textView13"
style="#style/ModuleTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:text="#string/modifier_sets"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView12" />
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="0dp"
android:layout_height="200dp"
android:layout_marginTop="8dp"
app:layout_constraintEnd_toStartOf="#+id/guideline2"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toBottomOf="#+id/textView13">
</android.support.v7.widget.RecyclerView>
<TextView
android:id="#+id/textView14"
style="#style/ModuleTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:text="#string/taxes"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toBottomOf="#+id/recyclerView" />
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView2"
android:layout_width="0dp"
android:layout_height="200dp"
android:layout_marginTop="16dp"
app:layout_constraintEnd_toStartOf="#+id/guideline2"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toBottomOf="#+id/textView14" />
<TextView
android:id="#+id/textView17"
style="#style/ModuleTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="#string/select_kitchen_location"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toBottomOf="#+id/recyclerView2" />
<Spinner
android:id="#+id/spinner"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:padding="8dp"
app:layout_constraintEnd_toStartOf="#+id/guideline2"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toBottomOf="#+id/textView17" />
<CheckBox
android:id="#+id/checkBox"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="#string/available"
android:textColor="#color/black"
android:textSize="24sp"
app:layout_constraintEnd_toStartOf="#+id/guideline2"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toBottomOf="#+id/spinner" />
<EditText
style="#style/CustomEditText"
android:layout_width="0dp"
android:layout_height="200dp"
android:layout_marginTop="16dp"
android:layout_marginBottom="16dp"
android:textColor="#color/black"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/guideline2"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toBottomOf="#+id/checkBox" />
</android.support.constraint.ConstraintLayout>
</ScrollView>
</android.support.constraint.ConstraintLayout>
This is the include layout.
<?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"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imgDlgHeaderAction"
android:layout_width="90dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="#+id/lblDlgHeaderTitle"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_add_24dp" />
<Button
android:id="#+id/btnDlgHeaderSave"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/border_bg_pressed"
android:paddingStart="32dp"
android:paddingTop="16dp"
android:paddingEnd="32dp"
android:paddingBottom="16dp"
android:text="#string/save"
android:textColor="#color/white"
android:textSize="24sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/lblDlgHeaderTitle"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
android:text="TextView"
android:textColor="#color/black"
android:textSize="24sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="#+id/btnDlgHeaderSave"
app:layout_constraintEnd_toStartOf="#+id/btnDlgHeaderSave"
app:layout_constraintStart_toEndOf="#id/imgDlgHeaderAction"
app:layout_constraintTop_toTopOf="#+id/btnDlgHeaderSave" />
</android.support.constraint.ConstraintLayout>
In the layout editor, it looks fine. But when I compile my code, the ScrollView is clipping through the include without that much marginTop. I might file an issue if this is a bug.
From the suggestions below, I tried to change ScrollView to a NestedScrollView. As I have guessed, it still didn't work.
I also want to emphasized that my question is not about the RecyclerViews not being able to scroll, because I know that would happen, but about the clipping of the ScrollView through the include layout.

Change your include layout constraint like below
Remove bottom constarint and used NestedScrollView in main layout instead of ScrollView
<?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">
<ImageView
android:id="#+id/imgDlgHeaderAction"
android:layout_width="90dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="#+id/btnDlgHeaderSave"
app:layout_constraintEnd_toStartOf="#+id/lblDlgHeaderTitle"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/btnDlgHeaderSave"
app:srcCompat="#drawable/ic_email" />
<Button
android:id="#+id/btnDlgHeaderSave"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:background="#color/bg_toolbar"
android:gravity="center"
android:paddingStart="32dp"
android:paddingTop="16dp"
android:paddingEnd="32dp"
android:paddingBottom="16dp"
android:text="#string/save"
android:textColor="#android:color/white"
android:textSize="24sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/lblDlgHeaderTitle"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/lblDlgHeaderTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="TextView"
android:textColor="#android:color/black"
android:textSize="24sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="#+id/btnDlgHeaderSave"
app:layout_constraintEnd_toStartOf="#+id/btnDlgHeaderSave"
app:layout_constraintStart_toEndOf="#+id/imgDlgHeaderAction"
app:layout_constraintTop_toTopOf="#+id/btnDlgHeaderSave" />
</androidx.constraintlayout.widget.ConstraintLayout>
Main layout
<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"
android:background="#f5f5f5">
<include
android:id="#+id/includeItem"
layout="#layout/test_include"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.core.widget.NestedScrollView
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="20dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/includeItem">
<!.. Remining one as it is>
</androidx.core.widget.NestedScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>

Develop Reference

The Android operating system is a mobile operating system that was developed by Google (GOOGL?) to be primarily used for touchscreen devices, cell phones, and tablets.

Remove space between two views in chained view in constraint layout - android

To remove space between two chained view, simply add the following line to the first item in the chain: app:layout_constraintHorizontal_chainStyle="packed" To read more about chain styles: Official Android documentation Medium article

Related

How do I convert this Layout to ConstraintLayout?

Why is my view stretching over list view boundaries?

Layout has been misplaced while view in emulator and mobile

How to align two objects to the center of the Imageview

Solver for ConstraintLayout doesn't measure include correctly

Categories

Resources