rotating a constraintLayout and rotating constraints as well - android

I can visually show what I mean to do:
basically, something like:
app:layout_constraintBottom_toEndOf is Illegal
But, I'd like to know if there's a way to implement this sort of dynamic remapping of constraints that would in turn also rotate the views inside of the constraintLayout


I've used external library from https://github.com/rongi/rotate-layout It allows to rotate viewgroup's children.
<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/root"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<LinearLayout
android:id="#+id/container"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="16dp"
android:background="#color/colorPrimaryDark"
android:gravity="center"
android:orientation="horizontal"
app:layout_constraintBottom_toTopOf="#+id/button2"
app:layout_constraintEnd_toStartOf="#+id/button3"
app:layout_constraintStart_toEndOf="#+id/button4"
app:layout_constraintTop_toBottomOf="#+id/button">
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:gravity="center"
android:text="#string/hello_string"
android:textSize="24sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</LinearLayout>
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:layout_marginBottom="8dp"
android:text="Button1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.25"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:layout_marginTop="8dp"
android:text="Button2"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.75"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.96" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:layout_marginStart="8dp"
android:text="Button3"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.96"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:layout_marginEnd="8dp"
android:text="Button4"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.03"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textCoord"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
android:text="TextView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
Preview Child Not Rotated :
Preview Child Rotated

Related

how can I move views on the right direction in constrainlayout

I am developing a news app and I want to move views on the right
direction in constrain layout. but I could achieve what I want below
my XML file where I have implemented constraint layout any suggestion
and tips greatly appreciated.
I am developing a news app and I want to move views on the right
direction in constrain layout. but I could achieve what I want below
my XML file where I have implemented constraint layout any suggestion
and tips greatly appreciated.
<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="match_parent">
<ImageView
android:id="#+id/articleImage"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_margin="8dp"
app:layout_constraintDimensionRatio="16:9"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/guideline4"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/articleAuthor"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:gravity="start"
android:text="article_author"
android:textSize="12sp"
app:layout_constraintEnd_toStartOf="#+id/articleImage"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/articleTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="article_title"
android:textSize="12sp"
app:layout_constraintEnd_toStartOf="#+id/guideline4"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/articleAuthor" />
<TextView
android:id="#+id/articleTime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:text="Article Time"
android:textSize="18sp"
app:layout_constraintEnd_toStartOf="#+id/articleFavorite"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/articleTitle" />
<ImageButton
android:id="#+id/articleFavorite"
android:layout_width="32dp"
android:layout_height="32dp"
android:background="#color/colorWhite"
android:src="#drawable/ic_bookmark"
app:layout_constraintBottom_toBottomOf="#+id/articleTime"
app:layout_constraintEnd_toStartOf="#+id/articleShare"
app:layout_constraintStart_toEndOf="#+id/articleTime"
app:layout_constraintTop_toTopOf="#+id/articleTime" />
<ImageButton
android:id="#+id/articleShare"
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:background="#color/colorWhite"
android:contentDescription="TODO"
android:src="#drawable/ic_share"
app:layout_constraintBottom_toBottomOf="#+id/articleTime"
app:layout_constraintEnd_toStartOf="#+id/guideline4"
app:layout_constraintStart_toEndOf="#+id/articleFavorite"
app:layout_constraintTop_toTopOf="#+id/articleTime" />
<android.support.constraint.Guideline
android:id="#+id/guideline4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.6" />
</android.support.constraint.ConstraintLayout>
below current screenshot of the app
below screenshot which I want to achieve

Wrap the views with another Viewgroup (say ConstraintLayout again) and set app:layout_constraintStart_toStartOf="parent" and app:layout_constraintEnd_toEndOf="parent" as constraints to this viewgroup. Said view will then be centered horizontally.
Edit: The code
<android.support.constraint.ConstraintLayout android:layout_height="wrap_content" android:layout_width="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<android.support.constraint.ConstraintLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent">
<ImageView
android:id="#+id/articleImage"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_margin="8dp"
app:layout_constraintDimensionRatio="16:9"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/guideline4"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/articleAuthor"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:gravity="start"
android:text="article_author"
android:textSize="12sp"
app:layout_constraintEnd_toStartOf="#+id/articleImage"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/articleTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="article_title"
android:textSize="12sp"
app:layout_constraintEnd_toStartOf="#+id/guideline4"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/articleAuthor" />
<TextView
android:id="#+id/articleTime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:text="Article Time"
android:textSize="18sp"
app:layout_constraintEnd_toStartOf="#+id/articleFavorite"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/articleTitle" />
<ImageButton
android:id="#+id/articleFavorite"
android:layout_width="32dp"
android:layout_height="32dp"
android:background="#color/"
android:src="#drawable/"
app:layout_constraintBottom_toBottomOf="#+id/articleTime"
app:layout_constraintEnd_toStartOf="#+id/articleShare"
app:layout_constraintStart_toEndOf="#+id/articleTime"
app:layout_constraintTop_toTopOf="#+id/articleTime" />
<ImageButton
android:id="#+id/articleShare"
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:background="#color/"
android:contentDescription="TODO"
android:src="#drawable/"
app:layout_constraintBottom_toBottomOf="#+id/articleTime"
app:layout_constraintEnd_toStartOf="#+id/guideline4"
app:layout_constraintStart_toEndOf="#+id/articleFavorite"
app:layout_constraintTop_toTopOf="#+id/articleTime" />
<android.support.constraint.Guideline
android:id="#+id/guideline4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.6" />
</android.support.constraint.ConstraintLayout>
I messed up the ImageButtons a little, please fix the drawables and the color.
Edit 2: for some reason, another closing tag won't show in the code section here. make sure to add another ConstraintLayout closing tag right at the end.
<android.support.constraint.ConstraintLayout android:layout_height="wrap_content"
android:layout_width="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.constraint.Guideline
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.55"
android:id="#+id/guideline"/>
<ImageView
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#id/guideline"
app:layout_constraintDimensionRatio="16:9"
android:layout_margin="16dp"
android:id="#+id/imageView"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:id="#+id/mainTextView"
android:layout_marginStart="25dp"
android:layout_marginTop="10dp"
android:text="Placeholder"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/mainTextView"
app:layout_constraintStart_toStartOf="#id/mainTextView"
android:layout_marginTop="5dp"
android:text="Secondary"
android:id="#+id/secondaryTextView"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/secondaryTextView"
app:layout_constraintStart_toStartOf="#id/mainTextView"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="10dp"
android:layout_marginTop="5dp"
android:text="Tertiary"
android:id="#+id/tertiaryTextView"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="#id/tertiaryTextView"
app:layout_constraintBottom_toBottomOf="#id/tertiaryTextView"
app:layout_constraintStart_toEndOf="#id/tertiaryTextView"
android:layout_marginStart="15dp"
android:id="#+id/firstButton"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="#id/firstButton"
app:layout_constraintBottom_toBottomOf="#id/firstButton"
app:layout_constraintStart_toEndOf="#id/firstButton"
android:layout_marginStart="15dp"
android:id="#+id/secondButton"/>
Edit 3: Here's a clean take to it.This one should do what you want. Though you have to tweak the margins the way you want them! Again the closing tag ... I don't know why it won't appear here!

If you want to move your views that are on the left side of the screen to the right part of the screen simply change your constraints like this:
Replace your constraints, your views will get constraint to your guideline from the left and to the right side on the screen as the right constraint.
Do it like this:
<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="match_parent">
<ImageView
android:id="#+id/articleImage"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_margin="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
app:layout_constraintDimensionRatio="16:9"
app:layout_constraintEnd_toStartOf="#+id/guideline4"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/articleAuthor"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:gravity="start"
android:text="article_author"
android:textSize="12sp"
app:layout_constraintEnd_toStartOf="#+id/articleImage"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/guideline4"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/articleTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:text="article_title"
android:textSize="12sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/guideline4"
app:layout_constraintTop_toBottomOf="#+id/articleAuthor" />
<TextView
android:id="#+id/articleTime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="Article Time"
android:textSize="18sp"
app:layout_constraintEnd_toStartOf="#+id/articleFavorite"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="#+id/guideline4"
app:layout_constraintTop_toBottomOf="#+id/articleTitle" />
<ImageButton
android:id="#+id/articleFavorite"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#color/colorWhite"
android:src="#drawable/ic_bookmark"
app:layout_constraintBottom_toBottomOf="#+id/articleTime"
app:layout_constraintEnd_toStartOf="#+id/articleShare"
app:layout_constraintStart_toEndOf="#+id/articleTime"
app:layout_constraintTop_toTopOf="#+id/articleTime" />
<ImageButton
android:id="#+id/articleShare"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginEnd="8dp"
android:background="#color/colorWhite"
android:contentDescription="TODO"
android:src="#drawable/ic_share"
app:layout_constraintBottom_toBottomOf="#+id/articleTime"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/articleFavorite"
app:layout_constraintTop_toTopOf="#+id/articleTime"
app:layout_constraintVertical_bias="0.0" />
<android.support.constraint.Guideline
android:id="#+id/guideline4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.6" />
</android.support.constraint.ConstraintLayout>
And it will look like this:

Android constraint layout changes it's appearance in Mobile

Layout is looking awesome but not in Mobile. How to overcome it!!!
tried to connect each view to parent separately, watched some tutorials to resolve the issue but it was not resolving the issue.I tried to connect each view with parent but it didn't resolved the issues in landscape mode.
<?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"
android:background="#FF1E38C9"
tools:context=".MainActivity">
<EditText
android:id="#+id/UrlEditText"
android:layout_width="280dp"
android:layout_height="45dp"
android:background="#android:color/transparent"
android:ems="10"
android:hint="Search url"
android:inputType="textUri"
android:textAlignment="center"
android:textSize="25sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.045"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.001"
tools:text="www.google.com" />
<Button
android:id="#+id/DownloadButton"
android:layout_width="49dp"
android:layout_height="44dp"
android:background="#android:drawable/stat_sys_download_done"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.825"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.001" />
<Button
android:id="#+id/GoogleButton"
android:layout_width="92dp"
android:layout_height="41dp"
android:background="#FF09E0F8"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.843"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.371" />
<Button
android:id="#+id/FacebookButton"
android:layout_width="90dp"
android:layout_height="40dp"
android:background="#FF09E0F8"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.498"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.37" />
<Button
android:id="#+id/YoutubeButton"
android:layout_width="90dp"
android:layout_height="40dp"
android:background="#FF09E0F8"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.177"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.369" />
<Button
android:id="#+id/GmailButton"
android:layout_width="90dp"
android:layout_height="40dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
android:background="#FF09E0F8"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.169"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.538" />
<Button
android:id="#+id/InstagramButton"
android:layout_width="90dp"
android:layout_height="40dp"
android:background="#FF09E0F8"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.499"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.536" />
<Button
android:id="#+id/TwitterButton"
android:layout_width="90dp"
android:layout_height="40dp"
android:background="#FF09E0F8"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.843"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.536" />
</android.support.constraint.ConstraintLayout>
I was expecting same results as they were in Android studio

please notice that in both of your answer and question you are using fixed sizes on your view and that will not make your screen responsive to all screen size(you will keep seeing your problem in the future).
I agree that you can use guidelines, but don't use them with fixed size, use them like 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:layout_width="match_parent"
android:layout_height="match_parent">
<EditText
android:id="#+id/UrlEditText"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:background="#android:color/transparent"
android:ems="10"
android:hint="Search url"
android:inputType="textUri"
android:textAlignment="center"
android:textSize="25sp"
app:layout_constraintBottom_toTopOf="#+id/guideline5"
app:layout_constraintEnd_toStartOf="#+id/guideline3"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="www.google.com" />
<Button
android:id="#+id/DownloadButton"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:background="#android:drawable/stat_sys_download_done"
app:layout_constraintBottom_toTopOf="#+id/guideline5"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/guideline3"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/GoogleButton"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="#+id/FacebookButton"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/FacebookButton"
app:layout_constraintTop_toTopOf="#+id/FacebookButton" />
<Button
android:id="#+id/FacebookButton"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toTopOf="#+id/guideline4"
app:layout_constraintEnd_toStartOf="#+id/GoogleButton"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/YoutubeButton"
app:layout_constraintTop_toTopOf="#+id/guideline6" />
<Button
android:id="#+id/YoutubeButton"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="#+id/FacebookButton"
app:layout_constraintEnd_toStartOf="#+id/FacebookButton"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/FacebookButton" />
<Button
android:id="#+id/GmailButton"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="#+id/InstagramButton"
app:layout_constraintEnd_toStartOf="#+id/InstagramButton"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/InstagramButton" />
<Button
android:id="#+id/InstagramButton"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toTopOf="#+id/guideline7"
app:layout_constraintEnd_toStartOf="#+id/TwitterButton"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/GmailButton"
app:layout_constraintTop_toTopOf="#+id/guideline4" />
<Button
android:id="#+id/TwitterButton"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="#+id/InstagramButton"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/InstagramButton"
app:layout_constraintTop_toTopOf="#+id/InstagramButton" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.8" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.6" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.1" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.7" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.5" />
</androidx.constraintlayout.widget.ConstraintLayout>
It will look something like this (the top right corner view is there but with no background so in the picture you can`t notice him):

Use horizontal guidelines to limit views/buttons to a particular area and add chains by selecting each horizontal(left to right) view and then cycle chains(a button appearing at bottom of the current view) to change the gap in between.
Visit Official site for more
https://developer.android.com/training/constraint-layout#constrain-chain
And you can follow this tutorial as well. Goodluck!!!
https://www.youtube.com/watch?v=hqEfshM5Vfw
Hope it will help beginners
<?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"
android:background="#drawable/backgroundhomescreen"
tools:context=".MainActivity">
<EditText
android:id="#+id/UrlEditText"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:background="#android:color/transparent"
android:ems="10"
android:hint="Search url"
android:inputType="textUri"
android:textAlignment="center"
android:textSize="25sp"
app:layout_constraintBottom_toTopOf="#+id/guideline"
app:layout_constraintEnd_toStartOf="#+id/DownloadButton"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="1.0"
tools:text="www.google.com" />
<Button
android:id="#+id/DownloadButton"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
android:background="#android:drawable/stat_sys_download_done"
app:layout_constraintBottom_toTopOf="#+id/guideline"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/guidelinevert"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="1.0" />
<Button
android:id="#+id/GoogleButton"
android:layout_width="92dp"
android:layout_height="41dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:background="#drawable/google"
app:layout_constraintBottom_toTopOf="#+id/guideline4"
app:layout_constraintEnd_toStartOf="#+id/InstagramButton"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/guideline3" />
<Button
android:id="#+id/FacebookButton"
android:layout_width="90dp"
android:layout_height="40dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:background="#drawable/facebook"
app:layout_constraintBottom_toTopOf="#+id/guideline3"
app:layout_constraintEnd_toStartOf="#+id/YoutubeButton"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/GmailButton"
app:layout_constraintTop_toTopOf="#+id/guideline2" />
<Button
android:id="#+id/YoutubeButton"
android:layout_width="90dp"
android:layout_height="40dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:background="#drawable/youtube"
app:layout_constraintBottom_toTopOf="#+id/guideline3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/FacebookButton"
app:layout_constraintTop_toTopOf="#+id/guideline2" />
<Button
android:id="#+id/GmailButton"
android:layout_width="90dp"
android:layout_height="40dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:background="#drawable/gmail"
app:layout_constraintBottom_toTopOf="#+id/guideline3"
app:layout_constraintEnd_toStartOf="#+id/FacebookButton"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/guideline2" />
<Button
android:id="#+id/InstagramButton"
android:layout_width="90dp"
android:layout_height="40dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:background="#drawable/instagram"
app:layout_constraintBottom_toTopOf="#+id/guideline4"
app:layout_constraintEnd_toStartOf="#+id/TwitterButton"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/GoogleButton"
app:layout_constraintTop_toTopOf="#+id/guideline3" />
<Button
android:id="#+id/TwitterButton"
android:layout_width="90dp"
android:layout_height="40dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:background="#drawable/twitter"
app:layout_constraintBottom_toTopOf="#+id/guideline4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/InstagramButton"
app:layout_constraintTop_toTopOf="#+id/guideline3" />
<android.support.constraint.Guideline
android:id="#+id/guidelinevert"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.84" />
<android.support.constraint.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="61dp" />
<android.support.constraint.Guideline
android:id="#+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="192dp" />
<android.support.constraint.Guideline
android:id="#+id/guideline3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="277dp" />
<android.support.constraint.Guideline
android:id="#+id/guideline4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="365dp" />
</android.support.constraint.ConstraintLayout>

Constraint Layout is causing views to overlap

I'm trying to create a view in Android using ConstraintLayout but I'm having a lot of issues with views overlapping or being pushed off of the screen. I think a lot of it might be because I'm so used to iOS constraints and I'm thinking in terms of them. Here is my code:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".LocationFragment">
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical"
android:id="#+id/guideHorz125"
app:layout_constraintGuide_percent="0.125"/>
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical"
android:id="#+id/guideHorz875"
app:layout_constraintGuide_percent="0.875"/>
<TextView style="#style/Label"
android:id="#+id/currentSelectionLabel"
android:layout_marginBottom="21dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="11dp"
android:text="#string/current_selection"
app:layout_constraintBottom_toTopOf="#id/locationLabel"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<TextView style="#style/Label"
android:id="#+id/locationLabel"
android:layout_marginLeft="41dp"
android:text="#string/none"
app:layout_constraintBottom_toTopOf="#id/mapView"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#id/currentSelectionLabel"/>
<com.google.android.gms.maps.MapView
android:id="#+id/mapView"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="20dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_marginTop="20dp"
app:layout_constraintBottom_toTopOf="#id/previousButton"
app:layout_constraintDimensionRatio="16:9"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/locationLabel"/>
<Button style="#style/RoundedButton"
android:id="#+id/previousButton"
android:text="#string/previous"
app:layout_constraintBottom_toTopOf="#id/newButton"
app:layout_constraintLeft_toLeftOf="#id/guideHorz125"
app:layout_constraintRight_toRightOf="#id/guideHorz875"
app:layout_constraintTop_toBottomOf="#id/mapView"/>
<Button style="#style/RoundedButton"
android:id="#+id/newButton"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
android:text="#string/new_location"
app:layout_constraintBottom_toTopOf="#id/resetButton"
app:layout_constraintLeft_toLeftOf="#id/previousButton"
app:layout_constraintRight_toRightOf="#id/previousButton"
app:layout_constraintTop_toBottomOf="#id/previousButton"/>
<Button style="#style/RoundedButton"
android:id="#+id/resetButton"
android:text="#string/reset"
app:layout_constraintBottom_toTopOf="#id/startButton"
app:layout_constraintLeft_toLeftOf="#id/previousButton"
app:layout_constraintRight_toRightOf="#id/previousButton"
app:layout_constraintTop_toBottomOf="#id/previousButton"/>
<com.company.ui.ImageButton
android:id="#+id/startButton"
android:layout_width="240dp"
android:layout_height="90dp"
android:layout_marginTop="16dp"
android:layout_marginBottom="11dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:src="#drawable/start"
app:text="#string/get_started"/>
</android.support.constraint.ConstraintLayout>
The first image is what I'd like to see, and the second is what I'm getting.

Try changing
<Button style="#style/RoundedButton"
android:id="#+id/resetButton"
android:text="#string/reset"
app:layout_constraintBottom_toTopOf="#id/startButton"
app:layout_constraintLeft_toLeftOf="#id/previousButton"
app:layout_constraintRight_toRightOf="#id/previousButton"
app:layout_constraintTop_toBottomOf="#id/previousButton"/>
To
<Button style="#style/RoundedButton"
android:id="#+id/resetButton"
android:text="#string/reset"
app:layout_constraintBottom_toTopOf="#id/startButton"
app:layout_constraintLeft_toLeftOf="#id/previousButton"
app:layout_constraintRight_toRightOf="#id/previousButton"
app:layout_constraintTop_toBottomOf="#id/newButton"/>

Use below 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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginTop="4dp"
android:text="Current Selection"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="None"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.184"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView3" />
<com.google.android.gms.maps.MapView
android:id="#+id/mapView"
android:layout_width="311dp"
android:layout_height="114dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView4" />
<Button
android:id="#+id/button54"
android:layout_width="296dp"
android:layout_height="36dp"
android:layout_marginTop="52dp"
android:text="Button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/mapView" />
<Button
android:id="#+id/button55"
android:layout_width="296dp"
android:layout_height="36dp"
android:layout_marginTop="96dp"
android:text="Button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/mapView" />
<Button
android:id="#+id/button56"
android:layout_width="296dp"
android:layout_height="36dp"
android:layout_marginTop="8dp"
android:text="Button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/mapView" />
<ImageButton
android:id="#+id/imageButton"
android:layout_width="293dp"
android:layout_height="116dp"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button55"
app:layout_constraintVertical_bias="0.529"
app:srcCompat="#drawable/googleg_disabled_color_18" />
</android.support.constraint.ConstraintLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.constraint.ConstraintLayout>

RecyclerView row layout collapsing

I have a row layout, which is a constraint layout.
However, the layout is collapsing on being displayed, as follows:
here is what it should look like:
I want the first 3 element to be constrained to the left, and the last 2 to be constrained to the right, with any empty space being in the middle.
Here's my XML:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/habitEventCommentTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="comment" />
<TextView
android:id="#+id/eventTypeTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#+id/textView"
app:layout_constraintTop_toTopOf="parent"
tools:text="Habit Type" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:text="TYPE:"
android:textSize="16sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#+id/habitEventCommentTextView"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.52" />
<TextView
android:id="#+id/dateTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="16dp"
android:layout_marginTop="8dp"
android:text="date"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="date" />
<ImageView
android:id="#+id/habitEventThumbnail"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="16dp"
android:layout_marginTop="8dp"
android:background="#drawable/greyrabbit"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/dateTextView"
app:layout_constraintRight_toLeftOf="#+id/dateTextView"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
</android.support.constraint.ConstraintLayout>
</LinearLayout>

try this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/txtComment"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/txtType"
app:layout_constraintTop_toTopOf="parent"
android:text="comment" />
<TextView
android:id="#+id/txtType"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:text="TYPE:"
android:textSize="16sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#+id/txtComment"
app:layout_constraintRight_toLeftOf="#id/eventTypeTextView"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/eventTypeTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="16dp"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toLeftOf="#id/habitEventThumbnail"
app:layout_constraintLeft_toRightOf="#+id/txtType"
app:layout_constraintTop_toTopOf="parent"
android:text="Habit Type" />
<ImageView
android:id="#+id/habitEventThumbnail"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="16dp"
android:layout_marginTop="8dp"
android:background="#mipmap/ic_launcher"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toLeftOf="#+id/dateTextView"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/dateTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="16dp"
android:layout_marginTop="8dp"
android:text="date"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="date" />
</android.support.constraint.ConstraintLayout>
</LinearLayout>

use a relative layout with two child linear layout ,one alignparentleft and one alignparent right.

How to apply divider or view in Constraint layout

I want to apply a divider at some places in Constraint layout but when I do it by simple view, the whole layout get shifted to the top and everything gets merged. I want to use only constraints layout for the whole design.
<TextView
android:id="#+id/textView16"
android:layout_width="0dp"
android:layout_height="18dp"
android:text="TextView"
app:layout_constraintLeft_toRightOf="#+id/imageView11"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintHorizontal_bias="1.0"
android:layout_marginTop="13dp"
app:layout_constraintTop_toBottomOf="#+id/textView14"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="8dp"
app:layout_constraintVertical_bias="0.0"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp" />
<TextView
android:id="#+id/textView20"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/textView16"
app:layout_constraintLeft_toRightOf="#+id/imageView11"
android:layout_marginLeft="8dp"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintVertical_bias="0.0"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp" />
<View
android:layout_width="0dp"
android:layout_height="2dp"
android:background="#android:color/background_dark"
tools:layout_editor_absoluteY="98dp"
android:id="#+id/view"
tools:layout_editor_absoluteX="0dp" />
<TextView
android:id="#+id/textView21"
android:layout_width="wrap_content"
android:layout_height="17dp"
android:layout_marginBottom="8dp"
android:layout_marginRight="8dp"
android:text="Nivedita Parmar"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.025"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/view"
app:layout_constraintVertical_bias="0.035"
android:layout_marginEnd="8dp" />
Please give some idea regarding this.
Thanks in advance..

See my answer below. I am putting view between text view. May help you.
<?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:context="com.example.shweta.firebasedemo.Main2Activity">
<TextView
android:id="#+id/txt_1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="TextView1"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toRightOf="#+id/imageView2"
app:layout_constraintTop_toTopOf="#+id/imageView2"
app:layout_constraintBottom_toTopOf="#+id/txt_2"
/>
<TextView
android:id="#+id/txt_2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="TextView2"
android:layout_marginTop="8dp"
app:layout_constraintRight_toRightOf="#+id/txt_1"
app:layout_constraintLeft_toLeftOf="#+id/txt_1"
app:layout_constraintTop_toBottomOf="#+id/txt_1"
app:layout_constraintBottom_toTopOf="#+id/txt_3"
/>
<TextView
android:id="#+id/txt_3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="TextView3"
android:layout_marginTop="8dp"
app:layout_constraintRight_toRightOf="#+id/txt_2"
app:layout_constraintLeft_toLeftOf="#+id/txt_2"
app:layout_constraintTop_toBottomOf="#+id/txt_2"
app:layout_constraintBottom_toBottomOf="#+id/imageView2"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#mipmap/ic_launcher"
app:layout_constraintLeft_toLeftOf="parent"
android:id="#+id/imageView2"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="20dp"
android:layout_marginLeft="16dp" />
<View
android:layout_width="0dp"
android:layout_height="2dp"
android:background="#android:color/background_dark"
android:id="#+id/view"
android:layout_marginTop="25dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView2"
/>
<TextView
android:id="#+id/textView21"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Nivedita Parmar"
android:layout_marginLeft="16dp"
android:layout_marginRight="8dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/imageView"
app:layout_constraintTop_toTopOf="#+id/imageView"
app:layout_constraintHorizontal_bias="0.502" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#mipmap/ic_launcher"
android:id="#+id/imageView"
android:layout_marginRight="16dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#+id/view"
android:layout_marginTop="20dp" />
<TextView
android:id="#+id/txt_home"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="home"
android:layout_marginTop="8dp"
app:layout_constraintRight_toRightOf="#+id/textView21"
app:layout_constraintTop_toBottomOf="#+id/textView21"
app:layout_constraintLeft_toLeftOf="#+id/textView21"
app:layout_constraintBottom_toTopOf="#+id/txt_height"/>
<TextView
android:id="#+id/txt_height"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="home"
android:layout_marginTop="8dp"
app:layout_constraintRight_toRightOf="#+id/txt_home"
app:layout_constraintTop_toBottomOf="#+id/txt_home"
app:layout_constraintLeft_toLeftOf="#+id/txt_home"
app:layout_constraintBottom_toBottomOf="#+id/imageView"/>
</android.support.constraint.ConstraintLayout>

Check out Guideline. I've found it to be useful when working with Constraint Views.
<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">
<androidx.constraintlayout.widget.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/guideline"
app:layout_constraintGuide_begin="100dp"
android:orientation="vertical"/>
<Button
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/button"
app:layout_constraintLeft_toLeftOf="#+id/guideline"
android:layout_marginTop="16dp"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Categories

Resources