Constraint layout not aligning textview - android

i am using contraint layout to align my textview in each corner of the screen but it looks like it is not working. the text on the right size of the screen gets align according to text length on the left size. take a look at the attach pic. text on the right is not properly align. for some reason there are a few spaces off. how can fix that?
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/payout_date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="12dp"
android:maxLines="1"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#color/black"
android:text="#string/payout_label"
app:layout_constraintBottom_toTopOf="#+id/income_icon"/>
<ImageView
android:id="#+id/income_icon"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_marginTop="30dp"
android:layout_marginStart="8dp"
android:layout_marginBottom="-50dp"
android:padding="1dp"
android:scaleType="centerCrop"
android:src="#drawable/ic_income"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintVertical_chainStyle="packed" />
<TextView
android:id="#+id/category"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:layout_marginStart="5dp"
android:layout_marginEnd="16dp"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#color/black"
android:text="Salary"
app:layout_constraintTop_toTopOf="#+id/income_icon"
app:layout_constraintStart_toEndOf="#+id/income_icon"
/>
<TextView
android:id="#+id/income_amount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="$0.00"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#color/green"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.91"
app:layout_constraintStart_toEndOf="#+id/category"
app:layout_constraintTop_toTopOf="#+id/income_icon" />
<TextView
android:id="#+id/frequency"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="-5dp"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#color/grey"
android:text="Monthly"
app:layout_constraintStart_toEndOf="#+id/income_icon"
app:layout_constraintBottom_toBottomOf="#+id/income_icon" />
<TextView
android:id="#+id/status"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Pending"
android:textAppearance="#style/TextAppearance.AppCompat.Body2"
android:textColor="#color/grey"
app:layout_constraintBottom_toBottomOf="#+id/income_icon"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.91"
app:layout_constraintStart_toEndOf="#+id/frequency" />
</android.support.constraint.ConstraintLayout>


If you want the amount to be right-justified and aligned, you don't need the following two lines of XML:
app:layout_constraintHorizontal_bias="0.91"
app:layout_constraintStart_toEndOf="#+id/category"
So, just delete them to give the following:
<TextView
android:id="#+id/income_amount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="$0.00"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#color/green"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/income_icon" />
If you need a margin on the right of, say, 16dp, add:
android:layout_marginEnd="16dp"


your mistakes are these - you must remove these
this line in income_amount
app:layout_constraintStart_toEndOf="#+id/category"
this line in status
app:layout_constraintStart_toEndOf="#+id/frequency"
this is correct design
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/payout_date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="12dp"
android:maxLines="1"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#color/black"
android:text="payout_label"
app:layout_constraintBottom_toTopOf="#+id/income_icon"/>
<ImageView
android:id="#+id/income_icon"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_marginTop="30dp"
android:layout_marginStart="8dp"
android:layout_marginBottom="-50dp"
android:padding="1dp"
android:scaleType="centerCrop"
android:src="#drawable/leak_canary_icon"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintVertical_chainStyle="packed" />
<TextView
android:id="#+id/category"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:layout_marginStart="5dp"
android:layout_marginEnd="8dp"
android:text="Salary"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#color/black"
app:layout_constraintEnd_toStartOf="#+id/income_amount"
app:layout_constraintStart_toEndOf="#+id/income_icon"
app:layout_constraintTop_toTopOf="#+id/income_icon"/>
<TextView
android:id="#+id/income_amount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:text="$0.00"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#color/green"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/income_icon"/>
<TextView
android:id="#+id/frequency"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="-5dp"
android:layout_marginStart="5dp"
android:layout_marginEnd="8dp"
android:text="Monthly"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#color/grey"
app:layout_constraintBottom_toBottomOf="#+id/income_icon"
app:layout_constraintEnd_toStartOf="#+id/status"
app:layout_constraintStart_toEndOf="#+id/income_icon"/>
<TextView
android:id="#+id/status"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:text="Pending"
android:textAppearance="#style/TextAppearance.AppCompat.Body2"
android:textColor="#color/grey"
app:layout_constraintBottom_toBottomOf="#+id/income_icon"
app:layout_constraintEnd_toEndOf="parent"/>
</android.support.constraint.ConstraintLayout>


I have aligned the status TextView to amount TextView and have given an 8 dp from right to status TextView so that it aligns to the amount TextView. Below is the code for it.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/payout_date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="12dp"
android:maxLines="1"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#android:color/black"
android:text="payout_label"
app:layout_constraintBottom_toTopOf="#+id/income_icon"/>
<ImageView
android:id="#+id/income_icon"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_marginTop="30dp"
android:layout_marginStart="8dp"
android:layout_marginBottom="-50dp"
android:padding="1dp"
android:scaleType="centerCrop"
android:src="#drawable/ic_launcher_background"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintVertical_chainStyle="packed"
android:layout_marginLeft="8dp" />
<TextView
android:id="#+id/category"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:layout_marginStart="5dp"
android:layout_marginEnd="16dp"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#android:color/black"
android:text="Salary"
app:layout_constraintTop_toTopOf="#+id/income_icon"
app:layout_constraintStart_toEndOf="#+id/income_icon"
android:layout_marginLeft="5dp"
android:layout_marginRight="16dp" />
<TextView
android:id="#+id/income_amount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="$0.00"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#android:color/holo_green_light"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.91"
app:layout_constraintStart_toEndOf="#+id/category"
app:layout_constraintTop_toTopOf="#+id/income_icon" />
<TextView
android:id="#+id/frequency"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="-5dp"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#android:color/darker_gray"
android:text="Monthly"
app:layout_constraintStart_toEndOf="#+id/income_icon"
app:layout_constraintBottom_toBottomOf="#+id/income_icon"
android:layout_marginLeft="5dp"
android:layout_marginRight="16dp" />
<TextView
android:id="#+id/status"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:text="Pending"
android:textAppearance="#style/TextAppearance.AppCompat.Body2"
android:textColor="#android:color/darker_gray"
app:layout_constraintBottom_toBottomOf="#+id/income_icon"
app:layout_constraintEnd_toEndOf="#+id/income_amount"
app:layout_constraintStart_toStartOf="#+id/income_amount" />
</android.support.constraint.ConstraintLayout>
Hope that helps!!!!


Design your layout like 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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="#dimen/_5sdp">
<TextView
android:id="#+id/payout_date"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/_5sdp"
android:maxLines="1"
android:text="payout_label"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#color/color_black"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/income_icon"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_marginTop="#dimen/_5sdp"
android:padding="1dp"
android:scaleType="centerCrop"
android:src="#drawable/ic_inbox_active"
app:layout_constraintLeft_toLeftOf="#+id/payout_date"
app:layout_constraintTop_toBottomOf="#+id/payout_date"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="30dp" />
<TextView
android:id="#+id/category"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Salary"
android:layout_marginRight="#dimen/_5sdp"
android:layout_marginStart="#dimen/_5sdp"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#color/color_black"
app:layout_constraintLeft_toRightOf="#+id/income_icon"
app:layout_constraintRight_toLeftOf="#+id/income_amount"
app:layout_constraintTop_toTopOf="#+id/income_icon"
tools:layout_editor_absoluteX="61dp"
tools:layout_editor_absoluteY="34dp" />
<TextView
android:id="#+id/income_amount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="$0.00"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#color/color_black"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/payout_date"
tools:layout_editor_absoluteX="344dp"
tools:layout_editor_absoluteY="30dp" />
<TextView
android:id="#+id/frequency"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Monthly"
app:layout_constraintLeft_toLeftOf="#+id/category"
app:layout_constraintTop_toBottomOf="#+id/category"
app:layout_constraintRight_toLeftOf="#+id/status"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#color/color_black"
tools:layout_editor_absoluteX="61dp"
tools:layout_editor_absoluteY="59dp" />
<TextView
android:id="#+id/status"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Pending"
android:textAppearance="#style/TextAppearance.AppCompat.Body2"
android:textColor="#color/color_black"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/income_amount" />
</android.support.constraint.ConstraintLayout>

Related

Using Margin or Padding with LinearLayout

I'm having trouble lining up a LinearLayout in a XML file. I'm trying to use a LinearLayout because I have TextViews that have to be hidden/shown upon certain options being selected, which I have that down. My problem is that I'm trying to use margin to line everything up centered, but if I run it on my Pixel 5 emulator, it's shift to the right when I have everything centered in my XML. Should I be using padding instead in my LinearLayout, or what should I be doing? Thank you!
App Screen
XML Design
dialog_job_request_confirmation.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#BF090909">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="1.0">
<androidx.cardview.widget.CardView
android:layout_width="0dp"
android:layout_height="560dp"
android:layout_marginStart="24dp"
android:layout_marginEnd="24dp"
app:cardBackgroundColor="#color/background_view"
app:cardCornerRadius="8dp"
app:cardElevation="5dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="70dp"
android:background="#color/main_purple"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="125dp"
android:layout_height="56dp"
android:layout_marginTop="8dp"
android:contentDescription="#string/skedaddle_service_logo"
android:scaleType="fitXY"
android:src="#drawable/skedaddle_services_"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.appcompat.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="70dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ScrollView
android:id="#+id/scrollView3"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/app_bar_layout">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="12dp"
android:orientation="vertical"
app:layout_constraintBottom_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/confirmJobRequestLabelTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="50dp"
android:layout_marginTop="495dp"
android:text="#string/confirm_job_request_details"
android:textColor="#color/black"
android:textSize="16sp"
android:textStyle="bold" />
<TextView
android:id="#+id/fullnameLabelTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="110dp"
android:layout_marginTop="12dp"
android:text="#string/full_name_"
android:textColor="#color/black"
android:textSize="16sp"
android:textStyle="bold" />
<TextView
android:id="#+id/fullnameDetailLabelTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="95dp"
android:layout_marginTop="8dp"
android:textAlignment="center"
android:textColor="#color/black"
android:textSize="16sp"
android:textStyle="italic" />
<TextView
android:id="#+id/addressLabelTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="115dp"
android:layout_marginTop="12dp"
android:text="#string/address_"
android:textColor="#color/black"
android:textSize="16sp"
android:textStyle="bold" />
<TextView
android:id="#+id/addressDetailLabelTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="95dp"
android:layout_marginTop="8dp"
android:textAlignment="center"
android:textColor="#color/black"
android:textSize="16sp"
android:textStyle="italic" />
<TextView
android:id="#+id/dateAndTimeLabelTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="120dp"
android:layout_marginTop="12dp"
android:text="#string/dates_and_times_"
android:textColor="#color/black"
android:textSize="16sp"
android:textStyle="bold" />
<TextView
android:id="#+id/firstDateAndTimeDetailLabelTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="170dp"
android:layout_marginTop="8dp"
android:textAlignment="center"
android:textColor="#color/black"
android:textSize="16sp"
android:textStyle="italic" />
<TextView
android:id="#+id/secondDateAndTimeDetailLabelTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="170dp"
android:layout_marginTop="8dp"
android:textAlignment="center"
android:textColor="#color/black"
android:textSize="16sp"
android:textStyle="italic" />
<TextView
android:id="#+id/thirdDateAndTimeDetailLabelTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="170dp"
android:layout_marginTop="8dp"
android:textAlignment="center"
android:textColor="#color/black"
android:textSize="16sp"
android:textStyle="italic" />
<TextView
android:id="#+id/timeConstraintsLabelTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="110dp"
android:layout_marginTop="12dp"
android:text="#string/time_constraints_"
android:textColor="#color/black"
android:textSize="16sp"
android:textStyle="bold" />
<TextView
android:id="#+id/timeConstraintsDetailLabelTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="170dp"
android:layout_marginTop="8dp"
android:textAlignment="center"
android:textColor="#color/black"
android:textSize="16sp"
android:textStyle="italic" />
<TextView
android:id="#+id/jobDescriptionLabelTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="115dp"
android:layout_marginTop="12dp"
android:text="#string/job_description_"
android:textColor="#color/black"
android:textSize="16sp"
android:textStyle="bold" />
<TextView
android:id="#+id/jobDescriptionDetailLabelTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="170dp"
android:layout_marginTop="8dp"
android:textAlignment="center"
android:textColor="#color/black"
android:textSize="16sp"
android:textStyle="italic" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<Button
android:id="#+id/cancelConfirmJobButton"
style="?android:attr/buttonBarButtonStyle"
android:layout_width="120dp"
android:layout_height="48dp"
android:layout_marginStart="48dp"
android:layout_marginTop="12dp"
android:layout_marginEnd="12dp"
android:background="#color/black"
android:text="#android:string/cancel"
android:textAllCaps="false"
android:textColor="#color/white" />
<Button
android:id="#+id/confirmJobRequestButton"
android:layout_width="120dp"
android:layout_height="48dp"
android:layout_marginTop="12dp"
android:layout_marginEnd="45dp"
android:background="#color/main_purple"
android:text="#string/confirm_job"
android:textAllCaps="false"
android:textColor="#color/white"
style="?android:attr/buttonBarButtonStyle" />
</LinearLayout>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

You shouldn't center anything using just padding or margin. In your case it's enough to use the layout_gravity in each TextView:
android:layout_gravity="center_horizontal"
More details here.

ScrollView Overlaps content in fragment

In this fragment as soon as try to scroll the contents start overlapping on each other.
This fragment opens immediately after a Splash Screen Activity. when I try to input something in first edit text and then scroll at that time all the things overlap on each other. The overlapping takes place only when I try to scroll. Please Help
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
android:id="#+id/scrollView_login"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".LoginFragment"
android:layout_height="match_parent"
android:layout_width="match_parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/MarginTop"
android:text="#string/app_name"
android:textAlignment="center"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
android:textSize="30sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/imageView"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginTop="20dp"
android:src="#drawable/ic_launch"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView3" />
<TextView
android:id="#+id/tagline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="#string/tagline"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView" />
<TextView
android:id="#+id/login"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
android:text="#string/Candidate_login"
android:textColor="#000000"
android:textSize="18dp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tagline" />
<TextView
android:id="#+id/email"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="56dp"
android:layout_marginTop="24dp"
android:text="#string/email"
android:textColor="#000000"
android:textSize="16dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/login" />
<EditText
android:id="#+id/emailmobile"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:background="#color/White"
android:hint="Enter Email"
android:inputType="textEmailAddress"
android:padding="5dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/email" />
<TextView
android:id="#+id/password"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="56dp"
android:layout_marginTop="24dp"
android:text="#string/pass"
android:textColor="#000000"
android:textSize="16dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/emailmobile" />
<EditText
android:id="#+id/passedit"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:background="#color/White"
android:hint="#string/pass"
android:inputType="textPassword"
android:padding="5dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.504"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/password" />
<Button
android:id="#+id/log_in"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:background="#color/colorPrimaryDark"
android:padding="5dp"
android:text="#string/login"
android:textColor="#color/White"
android:textSize="18dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/passedit" />
<TextView
android:id="#+id/textView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="18dp"
android:text="#string/forget_pass"
android:textColor="#color/colorPrimaryDark"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/log_in" />
<LinearLayout
android:id="#+id/sign"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="13dp"
android:gravity="center_horizontal"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView6">
<TextView
android:id="#+id/textView7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/NoAccount" />
<TextView
android:id="#+id/textViewSignUp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="3dp"
android:text="#string/signup"
android:textColor="#color/colorPrimaryDark" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>

Android: Relative Layout set TextView below of another textview and centered

This is my first ask on StackOverflow. a Greetings.
I am using Android Studio, I'm trying to make a Layout that the textView is just below and centered on another TextView. Actually, I have it like this.
Want to ask how I can do something like this:
To center it and be "responsive" with the superior text view. Thank you so much.
this is the code:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/selectableItemBackground"
android:padding="#dimen/activity_horizontal_margin">
<ImageView
android:id="#+id/imgPartidasRecomendaciones"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginEnd="#dimen/activity_horizontal_margin"
android:src="#drawable/ic_star" />
<TextView
android:id="#+id/tv_perfil_partidasJugadas"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/activity_horizontal_margin"
android:layout_toEndOf="#id/imgPartidasRecomendaciones"
android:background="#android:color/transparent"
android:text="Partidas"
android:textAppearance="#style/TextAppearance.AppCompat.Small"
android:textColor="#727272" />
<TextView
android:id="#+id/tv_perfil_recomendaciones"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="60dp"
android:layout_toEndOf="#id/tv_perfil_partidasJugadas"
android:background="#android:color/transparent"
android:text="Recomendaciones"
android:textAppearance="#style/TextAppearance.AppCompat.Small"
android:textColor="#727272" />
<TextView
android:id="#+id/tv_partidasJugadasNumber"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/tv_perfil_partidasJugadas"
android:layout_alignParentBottom="true"
android:layout_marginStart="#dimen/activity_horizontal_margin"
android:layout_toEndOf="#id/imgPartidasRecomendaciones"
android:layout_marginBottom="10dp"
android:text="0"
android:textAlignment="center"
android:textAppearance="#style/TextAppearance.AppCompat.Medium"
android:textColor="#212121"
android:textSize="20sp" />
<TextView
android:id="#+id/tv_recomendacionesNumber"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/tv_perfil_partidasJugadas"
android:layout_alignParentBottom="true"
android:layout_marginStart="60dp"
android:layout_toEndOf="#id/tv_partidasJugadasNumber"
android:layout_marginBottom="10dp"
android:text="0"
android:textAlignment="center"
android:textAppearance="#style/TextAppearance.AppCompat.Medium"
android:textColor="#212121"
android:textSize="20sp" />
</RelativeLayout>

The solution is to wrap each pair of TextViews inside a vertical LinearLayout:
<ImageView
android:id="#+id/imgPartidasRecomendaciones"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginEnd="#dimen/activity_horizontal_margin"
android:src="#drawable/ic_star" />
<LinearLayout
android:id="#+id/leftLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/activity_horizontal_margin"
android:layout_marginBottom="10dp"
android:layout_toEndOf="#id/imgPartidasRecomendaciones"
android:orientation="vertical">
<TextView
android:id="#+id/tv_perfil_partidasJugadas"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:text="Partidas"
android:textAppearance="#style/TextAppearance.AppCompat.Small"
android:textColor="#727272" />
<TextView
android:id="#+id/tv_partidasJugadasNumber"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/activity_horizontal_margin"
android:text="0"
android:textAlignment="center"
android:textAppearance="#style/TextAppearance.AppCompat.Medium"
android:textColor="#212121"
android:textSize="20sp" />
</LinearLayout>
<LinearLayout
android:id="#+id/rightLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_toEndOf="#id/leftLayout"
android:layout_marginStart="60dp"
android:layout_marginBottom="10dp">
<TextView
android:id="#+id/tv_perfil_recomendaciones"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:text="Recomendaciones"
android:textAppearance="#style/TextAppearance.AppCompat.Small"
android:textColor="#727272" />
<TextView
android:id="#+id/tv_recomendacionesNumber"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="60dp"
android:text="0"
android:textAlignment="center"
android:textAppearance="#style/TextAppearance.AppCompat.Medium"
android:textColor="#212121"
android:textSize="20sp" />
</LinearLayout>
</RelativeLayout>

You can put every pair of textViews inside vertical LinearLayout but you better use constraint layout - it is a better layout for responsive screen building and easy to integrate with, here is a good example of using it:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:background="#color/buttonColor"
android:text="view"
android:textColor="#color/textMainColour"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/guideline2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="19dp"
android:layout_marginStart="20dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:background="#color/buttonColor"
android:text="view"
android:textColor="#color/textMainColour"
app:layout_constraintBottom_toTopOf="#+id/textView10"
app:layout_constraintEnd_toStartOf="#+id/guideline3"
app:layout_constraintStart_toStartOf="#+id/guideline2" />
<TextView
android:id="#+id/textView5"
android:layout_width="0dp"
android:layout_height="21dp"
android:layout_marginTop="8dp"
android:background="#color/buttonColor"
android:text="view"
android:textColor="#color/textMainColour"
app:layout_constraintEnd_toEndOf="#+id/textView4"
app:layout_constraintStart_toStartOf="#+id/textView4"
app:layout_constraintTop_toBottomOf="#+id/textView10" />
<TextView
android:id="#+id/textView9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/buttonColor"
android:text="view"
android:textColor="#color/textMainColour"
app:layout_constraintBottom_toBottomOf="#+id/textView5"
app:layout_constraintEnd_toEndOf="#+id/textView8"
app:layout_constraintStart_toStartOf="#+id/textView8"
app:layout_constraintTop_toTopOf="#+id/textView5"
app:layout_constraintVertical_bias="0.0" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="55dp"
app:layout_constraintGuide_percent="0.2" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="146dp"
app:layout_constraintGuide_percent="0.6" />
<TextView
android:id="#+id/textView8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:background="#color/buttonColor"
android:text="view"
android:textColor="#color/textMainColour"
app:layout_constraintBottom_toBottomOf="#+id/textView4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/textView4"
app:layout_constraintTop_toTopOf="#+id/textView4" />
</androidx.constraintlayout.widget.ConstraintLayout>

You can nest multiple layouts (LinearLayout, RelativeLayout, CoordinatorLayout) to achieve what you want.
If I understand what you asked, you are probably looking for something like this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/selectableItemBackground"
android:padding="16dp"
xmlns:android="http://schemas.android.com/apk/res/android">
<RelativeLayout
android:id="#+id/rl1"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imgPartidasRecomendaciones"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginRight="16dp"
android:layout_marginEnd="16dp"
android:src="#drawable/ic_launcher_foreground" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/rl2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toEndOf="#+id/rl1"
android:layout_toRightOf="#+id/rl1">
<TextView
android:id="#+id/tv_perfil_partidasJugadas"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:background="#android:color/transparent"
android:text="Partidas"
android:textAppearance="#style/TextAppearance.AppCompat.Small"
android:textColor="#727272" />
<TextView
android:id="#+id/tv_partidasJugadasNumber"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:layout_marginBottom="10dp"
android:layout_below="#id/tv_perfil_partidasJugadas"
android:layout_centerInParent="true"
android:text="0"
android:textAlignment="center"
android:textAppearance="#style/TextAppearance.AppCompat.Medium"
android:textColor="#212121"
android:textSize="20sp" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/rl3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toEndOf="#+id/rl2"
android:layout_toRightOf="#+id/rl2">
<TextView
android:id="#+id/tv_perfil_recomendaciones"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="60dp"
android:layout_marginLeft="60dp"
android:background="#android:color/transparent"
android:text="Recomendaciones"
android:textAppearance="#style/TextAppearance.AppCompat.Small"
android:textColor="#727272" />
<TextView
android:id="#+id/tv_recomendacionesNumber"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/tv_perfil_recomendaciones"
android:layout_alignParentBottom="true"
android:layout_marginStart="60dp"
android:layout_marginLeft="60dp"
android:layout_marginBottom="10dp"
android:text="0"
android:layout_centerInParent="true"
android:textAlignment="center"
android:textAppearance="#style/TextAppearance.AppCompat.Medium"
android:textColor="#212121"
android:textSize="20sp" />
</RelativeLayout>
</RelativeLayout>
I suggest you to use Constraint Layout to build better responsive layouts (easier).

ConstraintLayout Stuck at Parent top despite being constrained to View

Searched around, can't find this issue specifically. Created an account specifically to ask WHAT'S HAPPENING HERE?!
Using a ConstraintLayout for the first time - I've had good success, but for some reason CANNOT get two of my Components to play nicely.
Here's what I WANT it to look like (accomplished by breaking constraints and hardcoding stuff):
...and here's the jumbled mess I get if I try to constrain "LabelJournal" and "linearLayout2":
The problems are happening for components named "LabelJournal" and "linearLayout2". Here's what my LayoutFile looks like... It's a WIP so I know right now there's a lot of hardcoding of text values and whatnot - I'm just trying to figure out WHAT in the world is causing these two components to get stuck at the top of the parent:
<?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">
<ImageButton
android:id="#+id/imageButton"
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#android:color/transparent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_left" />
<EditText
android:id="#+id/editText"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_marginEnd="14dp"
android:layout_marginStart="14dp"
android:inputType="date"
android:text="03/04/2018"
android:textAlignment="center"
android:textSize="24sp"
app:layout_constraintEnd_toStartOf="#+id/imageButton2"
app:layout_constraintStart_toEndOf="#+id/imageButton"
app:layout_constraintTop_toTopOf="parent" />
<ImageButton
android:id="#+id/imageButton2"
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#android:color/transparent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_right" />
<TextView
android:id="#+id/LabelJournal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:text="Journal:"
android:textStyle="italic"
app:layout_constraintBottom_toTopOf="#id/ContentJournal"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageButton" />
<TextView
android:id="#+id/ContentJournal"
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"
android:text="The journal text would go in right about here. It should wrap to the next line for sufficientyl large text blocks."
android:textColorLink="#android:color/black"
android:textSize="18sp"
app:layout_constraintBottom_toTopOf="#+id/LabelTags"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/LabelJournal" />
<TextView
android:id="#+id/LabelTags"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginStart="16dp"
android:text="Tags:"
android:textStyle="italic"
app:layout_constraintBottom_toTopOf="#+id/horizontalScrollView"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#id/ContentJournal" />
<HorizontalScrollView
android:id="#+id/horizontalScrollView"
android:layout_width="0dp"
android:layout_height="41dp"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/LabelTags">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal">
<TextView
android:id="#+id/TagDayOff"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical|center_horizontal"
android:padding="10dp"
android:paddingBottom="15dp"
android:paddingTop="15dp"
android:text="#DayOff"
android:textAlignment="center"
android:textColor="#android:color/darker_gray"
android:textSize="18sp" />
<TextView
android:id="#+id/TagUntracked"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical|center_horizontal"
android:padding="10dp"
android:paddingBottom="15dp"
android:paddingTop="15dp"
android:text="#Untracked"
android:textAlignment="center"
android:textColor="#android:color/darker_gray"
android:textSize="18sp" />
<TextView
android:id="#+id/TagTravel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical|center_horizontal"
android:padding="10dp"
android:paddingBottom="15dp"
android:paddingTop="15dp"
android:text="#Travel"
android:textAlignment="center"
android:textColor="#android:color/darker_gray"
android:textSize="18sp" />
<TextView
android:id="#+id/TagGames"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical|center_horizontal"
android:padding="10dp"
android:paddingBottom="15dp"
android:paddingTop="15dp"
android:text="#Games"
android:textAlignment="center"
android:textColor="#android:color/darker_gray"
android:textSize="18sp" />
<TextView
android:id="#+id/TagMovie"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_vertical|center_horizontal"
android:padding="10dp"
android:paddingBottom="15dp"
android:paddingTop="15dp"
android:text="#Games"
android:textAlignment="center"
android:textColor="#android:color/darker_gray"
android:textSize="18sp" />
</LinearLayout>
</HorizontalScrollView>
<TextView
android:id="#+id/LabelDIet"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:text="Diet:"
android:textStyle="italic"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/horizontalScrollView" />
<TextView
android:id="#+id/ContentCalories"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginTop="8dp"
android:textSize="18sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/LabelDIet"
tools:text="2813" />
<TextView
android:id="#+id/DietCalLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="Cal"
android:textSize="10sp"
android:textStyle="italic"
app:layout_constraintBottom_toBottomOf="#+id/ContentCalories"
app:layout_constraintStart_toEndOf="#+id/ContentCalories" />
<ProgressBar
android:id="#+id/ProgressCalories"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="2dp"
android:layout_marginEnd="-8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="2dp"
android:progressDrawable="#android:color/holo_blue_dark"
android:progressTint="#android:color/holo_green_light"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="#+id/ContentCalories"
app:layout_constraintEnd_toEndOf="#+id/ContentProteinPercent"
app:layout_constraintStart_toEndOf="#+id/DietCalLabel"
app:layout_constraintTop_toTopOf="#+id/ContentCalories" />
<TextView
android:id="#+id/ContentProtein"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginTop="8dp"
android:textSize="18sp"
app:layout_constraintEnd_toStartOf="#+id/DietCalLabel"
app:layout_constraintTop_toBottomOf="#+id/ContentCalories"
tools:text="154" />
<TextView
android:id="#+id/DietProteinLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="P"
android:textSize="10sp"
android:textStyle="italic"
app:layout_constraintBottom_toBottomOf="#+id/ContentProtein"
app:layout_constraintStart_toEndOf="#+id/ContentProtein" />
<ProgressBar
android:id="#+id/ProgressProtein"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="150dp"
android:layout_height="0dp"
android:layout_marginBottom="4dp"
android:layout_marginStart="8dp"
android:layout_marginTop="4dp"
android:progressDrawable="#android:color/holo_blue_dark"
android:progressTint="#android:color/holo_red_light"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="#+id/ContentProtein"
app:layout_constraintStart_toEndOf="#+id/DietCalLabel"
app:layout_constraintTop_toTopOf="#+id/ContentProtein" />
<TextView
android:id="#+id/ContentProteinPercent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:paddingEnd="8dp"
android:paddingStart="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.074"
app:layout_constraintStart_toEndOf="#+id/ProgressProtein"
app:layout_constraintTop_toTopOf="#+id/ContentProtein"
tools:text="22 %" />
<TextView
android:id="#+id/ContentFat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginTop="8dp"
android:textSize="18sp"
app:layout_constraintEnd_toStartOf="#+id/DietCalLabel"
app:layout_constraintTop_toBottomOf="#+id/ContentProtein"
tools:text="103" />
<TextView
android:id="#+id/dietProteinLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="F"
android:textSize="10sp"
android:textStyle="italic"
app:layout_constraintBottom_toBottomOf="#+id/ContentFat"
app:layout_constraintStart_toEndOf="#+id/ContentFat" />
<ProgressBar
android:id="#+id/ProgressFats"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="150dp"
android:layout_height="0dp"
android:layout_marginBottom="4dp"
android:layout_marginStart="8dp"
android:layout_marginTop="4dp"
android:progressDrawable="#android:color/holo_blue_dark"
android:progressTint="#android:color/holo_orange_light"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="#+id/ContentFat"
app:layout_constraintStart_toEndOf="#+id/DietCalLabel"
app:layout_constraintTop_toTopOf="#+id/ContentFat" />
<TextView
android:id="#+id/contentProteinPercent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:paddingEnd="8dp"
android:paddingStart="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.074"
app:layout_constraintStart_toEndOf="#+id/ProgressProtein"
app:layout_constraintTop_toTopOf="#+id/ContentFat"
tools:text="33 %" />
<TextView
android:id="#+id/ContentCarbs"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginTop="8dp"
android:textSize="18sp"
app:layout_constraintEnd_toStartOf="#+id/DietCalLabel"
app:layout_constraintTop_toBottomOf="#+id/ContentFat"
tools:text="302" />
<TextView
android:id="#+id/DietCarbLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="C"
android:textSize="10sp"
android:textStyle="italic"
app:layout_constraintBottom_toBottomOf="#+id/ContentCarbs"
app:layout_constraintStart_toEndOf="#+id/ContentCarbs" />
<ProgressBar
android:id="#+id/ProgressCarbs"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="150dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginStart="8dp"
android:progressDrawable="#android:color/holo_blue_dark"
android:progressTint="#android:color/holo_blue_light"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="#+id/ContentCarbs"
app:layout_constraintStart_toEndOf="#+id/DietCalLabel"
app:layout_constraintTop_toTopOf="#+id/ContentCarbs" />
<TextView
android:id="#+id/ContentCarbPercent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:paddingEnd="8dp"
android:paddingStart="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.074"
app:layout_constraintStart_toEndOf="#+id/ProgressProtein"
app:layout_constraintTop_toTopOf="#+id/ContentCarbs"
tools:text="43 %" />
<TextView
android:id="#+id/LabelExercise"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:text="Exercise:"
android:textStyle="italic"
app:layout_constraintBottom_toTopOf="#+id/linearLayout2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/ContentCarbs" />
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="436dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/LabelExercise" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<ImageButton
android:id="#+id/ImageExerciseAttribution"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:layout_weight="1"
android:background="#android:color/transparent"
android:scaleType="fitXY"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/LabelExercise"
app:srcCompat="#drawable/fit" />
<TextView
android:id="#+id/ContentExercise"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_weight="1"
android:text="45 min - PHUL Upper Power"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="#+id/ImageExerciseAttribution"
app:layout_constraintStart_toEndOf="#+id/ImageExerciseAttribution"
app:layout_constraintTop_toTopOf="#+id/ImageExerciseAttribution" />
</LinearLayout>
</LinearLayout>
</android.support.constraint.ConstraintLayout>
Perhaps I should also mention - I have no errors showing up in my Constraint Layout (although a ton of warnings about hardcoded text and whatnot that I'll deal with later).

Alright took me an hour of tinkering - but ever line in my Layout HTML that contains "layout_constraintBottom_toTopOf" caused the problem. I don't know if it's an ordering thing or some weird drawing hierarchy. It makes no sense to me how this got busted.

Remove space between two views in chained view in constraint layout

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

Categories

Resources