ConstraintLayout not respecting constraints - android

I understand how to use the constraint layout on Android but I have faced this issue for the second time now and wished to know if there is a remedy or it is a bug with it.
I have set all constraints correctly in my layout my preview is revealed as seen on this photo
The corresponding xml is as seen below
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/root_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ui.auth.PlaceOfDeliveryFragment">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar_select_city"
style="#style/ToolbarStyle"
android:layout_width="0dp"
android:layout_height="56dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:navigationIcon="#drawable/ic_chevron_left_white_32dp"
app:title="#string/text_select_delivery_city"
app:titleMarginStart="75dp"
app:titleTextAppearance="#style/ToolbarStyle"
app:titleTextColor="#color/colorTextWhite" />
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/textInputLayout"
style="#style/TextInputLayoutStyle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="24dp"
android:layout_marginEnd="16dp"
android:hint="#string/city"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/country_spinner">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/city_text_input"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textCapWords" />
</com.google.android.material.textfield.TextInputLayout>
<Spinner
android:id="#+id/country_spinner"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:entries="#array/countries"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView" />
<TextView
android:id="#+id/textView"
style="#style/TextAppearance.AppCompat.Subhead"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="32dp"
android:text="#string/country_hint"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/toolbar_select_city" />
<com.google.android.material.button.MaterialButton
android:id="#+id/button_next"
style="#style/NoInsetsButton"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#string/next_txt"
android:textAlignment="textEnd"
app:icon="#drawable/ic_chevron_right_white_24dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
But when the app is run, I instead see the button hanging when I constrained it to the bottom of the layout.
I wish to understand if there is anything I am missing and the button hanging.

Related

why preview showing different ui and real screen different in constrainlayout

I am developing new android app but when I am trying to implement constrainlayout in preview window it is showing different but in real device showing different
below my layout
<?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="#451C80"
tools:context=".SetPasswordFragment">
<TextView
android:id="#+id/getStarted"
style="#style/password"
android:layout_width="178dp"
android:layout_height="wrap_content"
android:layout_marginTop="72dp"
android:layout_marginEnd="150dp"
android:gravity="center"
android:text="#string/password"
android:textAppearance="#style/password"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="34dp"
android:layout_height="34dp"
android:layout_marginStart="8dp"
android:layout_marginTop="80dp"
android:layout_marginEnd="11dp"
android:src="#drawable/ic_back"
app:layout_constraintEnd_toStartOf="#+id/getStarted"
app:layout_constraintHorizontal_bias="0.366"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
style="#style/username"
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="81dp"
android:layout_marginEnd="223dp"
android:layout_marginBottom="45dp"
android:text="#string/create_user"
app:layout_constraintBottom_toTopOf="#+id/textInputLayout"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/textInputLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="544dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/username_edittext"
android:hint="#string/username" />
</com.google.android.material.textfield.TextInputLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
below preview ui in android studio
and below ui in real device
I want to exactly where I am making something wrong what I have to do in order adjust constraints correctly so that I can show exact the same preview window ui in real device

The problem is that you have a Bottom margin = 544dp in the textInputLayout,
you should'n use a very larg margins in layouts
you can try
<?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="#451C80"
tools:context=".SetPasswordFragment">
<TextView
android:id="#+id/getStarted"
style="#style/password"
android:layout_width="178dp"
android:layout_height="wrap_content"
android:layout_marginTop="72dp"
android:layout_marginEnd="150dp"
android:gravity="center"
android:text="#string/password"
android:textAppearance="#style/password"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="34dp"
android:layout_height="34dp"
android:layout_marginStart="8dp"
android:layout_marginTop="80dp"
android:layout_marginEnd="11dp"
android:src="#drawable/ic_back"
app:layout_constraintEnd_toStartOf="#+id/getStarted"
app:layout_constraintHorizontal_bias="0.366"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
style="#style/username"
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="81dp"
android:layout_marginEnd="223dp"
android:layout_marginBottom="45dp"
android:text="#string/create_user"
app:layout_constraintTop_toBottomOf="#+id/imageView3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/textInputLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
app:layout_constraintVertical_bias="0"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/username_edittext"
android:hint="#string/username" />
</com.google.android.material.textfield.TextInputLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

Creating a group box layout, trying to overlay the titles of the outer border

Android 4.0.1
I can trying to create a group box that will contain some details. But the problem I am having is with the titles that should display over the groupbox's border lines as in the diagram.
I have used the CoordinatorLayout as I think this would be better for overlaying the border lines and I can anchor on the top start and end.
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/clGroupBox"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="16dp"
android:background="#drawable/bg_border"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/tvStandardDeliver"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:text="Standard Delivery FREE"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tvExpressDelivery"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="16dp"
android:text="Express Deliver"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/tvStandardDeliver" />
</androidx.constraintlayout.widget.ConstraintLayout>
<TextView
android:id="#+id/tvHomeDeliver"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:translationZ="10dp"
android:text="Home Delivery"
app:layout_anchor="#id/clGroupBox"
app:layout_anchorGravity="top|start"/>
<TextView
android:id="#+id/tvViewDetails"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="32dp"
android:padding="8dp"
app:drawableEndCompat="#android:drawable/arrow_down_float"
android:gravity="center"
android:translationZ="20dp"
android:text="View Details"
app:layout_anchor="#id/clGroupBox"
app:layout_anchorGravity="top|end"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
However, when I run on a device the border lines are always displayed over the text titles. I have tried using translationZ and elevation to bring them forward. But it doesn't work.
This with what I can getting when I run:

Use This Code and you will get a result like below image
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:background="#FFFFFF"
android:layout_height="wrap_content">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/clGroupBox"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="16dp"
android:background="#drawable/stroke"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/tvStandardDeliver"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:text="Standard Delivery FREE"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tvExpressDelivery"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="16dp"
android:text="Express Deliver"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/tvStandardDeliver" />
</androidx.constraintlayout.widget.ConstraintLayout>
<TextView
android:id="#+id/tvHomeDeliver"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:text="Home Delivery"
android:background="#ffffff"
android:padding="10dp"
app:layout_anchor="#id/clGroupBox"
app:layout_anchorGravity="top|start" />
<TextView
android:id="#+id/tvViewDetails"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="32dp"
android:gravity="center"
android:background="#FFFFFF"
android:padding="10dp"
android:text="View Details"
app:drawableEndCompat="#android:drawable/arrow_down_float"
app:layout_anchor="#id/clGroupBox"
app:layout_anchorGravity="top|end" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

for others who have the same problem, you can use this library:
https://github.com/homayoonahmadi/GroupBoxLayout
It doesn't use any white or other color backgrounds for hiding border under the label
Also it supports rtl and ltr directions

NestedScrollView not scrolling to the bottom

This layout is part of my learning process. So please don't judge the use of textview for displaying data.
The problem is i am not able to scroll the entire data in the bottom textview. Always 2 sets of data is left behind.
If i have 8 sets,the scrollview will show up to 6 sets. If i have 4 set it will show 2 sets and wont scroll at all. What's the problem with my scrollview?
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:context=".FireStoreNotes">
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/textInputLayout"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/editText_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/title" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/textInputLayout2"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textInputLayout">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/editText_description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/description" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/textInputLayout3"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textInputLayout2">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/editText_priority"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/priority"
android:inputType="number" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.button.MaterialButton
android:id="#+id/button_add"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:text="#string/add_notes"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textInputLayout3" />
<com.google.android.material.button.MaterialButton
android:id="#+id/button_load"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:text="#string/load_notes"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button_add" />
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:paddingBottom="?android:attr/actionBarSize"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button_load">
<TextView
android:id="#+id/textView_loadData"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="20sp" />
</androidx.core.widget.NestedScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>
This is how my layout looks.
Thanks in advance.

Edit ConstraintLayout root layout_height (match_parent instead of wrap_content)
For NestedScrollView :
Replace layout_widthand layout_height values by 0dpfor applying constraints.
Add a bottom constraint with app:layout_constraintBottom_toBottomOf="parent"

Android ConstraintLayout sometimes doesn't draw correctly after switching between tabs

I'm seeing a ConstraintLayout occasionally fail to draw correctly, but only when I switch between fragments, and I'm not seeing why.
It looks like this initially:
But, after switching tabs, it looks like this:
fragment_overview.xml (The Fragment layout)
<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"
android:background="#color/palette_grey_light"
android:clipToPadding="false"
android:paddingTop="16dp">
<uk.lobsterdoodle.edinburghwolves.view.FixtureView
android:id="#+id/overview_fixture_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
... a few other views ...
</android.support.constraint.ConstraintLayout>
fixture_view.xml (The custom view layout, FixtureView)
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<View
android:id="#+id/fixture_away_color"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#color/palette_red"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/fixture_home_color"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<View
android:id="#+id/fixture_home_color"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#color/palette_grey"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintStart_toEndOf="#+id/fixture_away_color"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="#+id/fixture_away_team_score"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="27"
android:textColor="#color/palette_white"
android:textSize="24sp"
app:layout_constraintEnd_toEndOf="#+id/fixture_away_team_name"
app:layout_constraintStart_toStartOf="#+id/fixture_away_team_name"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="#+id/fixture_away_team_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="32dp"
android:text="WOLVES"
android:textColor="#color/palette_white"
android:textSize="16sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/fixture_home_color"
app:layout_constraintTop_toBottomOf="#+id/fixture_away_team_score"
app:layout_constraintVertical_bias="0.0"
android:layout_marginTop="0dp"/>
<TextView
android:id="#+id/fixture_home_team_score"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="21"
android:textColor="#color/palette_white"
android:textSize="24sp"
app:layout_constraintEnd_toEndOf="#+id/fixture_home_team_name"
app:layout_constraintStart_toStartOf="#+id/fixture_home_team_name"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="#+id/fixture_home_team_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginStart="32dp"
android:text="PIRATES"
android:textColor="#color/palette_white"
android:textSize="16sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="#+id/fixture_home_color"
android:layout_marginTop="0dp"
app:layout_constraintTop_toBottomOf="#+id/fixture_home_team_score"/>
<TextView
android:id="#+id/fixture_state"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:text="FINAL"
android:textColor="#color/palette_white"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="#+id/fixture_away_team_score"
android:layout_marginBottom="0dp"
/>
</android.support.constraint.ConstraintLayout>

While your fixture_view.xml file constrains views in the ConstraintLayout properly, a view in the ConstraintLayout in fragment_overview.xml isn't constrained, so they won't display properly at runtime. Add some some constraints to your FixtureView in fragment_overview.xml like so:
<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"
android:background="#color/palette_grey_light"
android:clipToPadding="false"
android:paddingTop="16dp">
<!-- You were missing constraints here -->
<uk.lobsterdoodle.edinburghwolves.view.FixtureView
android:id="#+id/overview_fixture_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
app:cardBackgroundColor="#color/palette_white"
app:cardElevation="2dp"
app:contentPadding="16dp"
app:layout_constraintTop_toBottomOf="#id/overview_fixture_view"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="standings"
android:textColor="#color/palette_grey"/>
</android.support.v7.widget.CardView>
</android.support.constraint.ConstraintLayout>

Fixed, by making the score TextView's height wrap_content instead of matching constraint of 0dp
<TextView
android:id="#+id/fixture_away_team_score"
android:layout_width="wrap_content"
android:layout_height="wrap_content" <-- wrap, not 0dp
...
/>

CardView in ConstraintLayout Not Wrapping Height

CardView in ConstraintLayout Not Wrapping Height.
Facing the similar issue with stable CL library:
compile 'com.android.support.constraint:constraint-layout:1.0.2'
Android Studio: 2.3.2
Observations:
Setting hardcoded cardview-height fixes the issue.
Changing CardView with RelativeLayout fixes.
Is there still an issue with Cardview that it is finding hard to cope up with ConstraintLayout.
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_absoluteX="0dp"
tools:layout_editor_absoluteY="25dp">
<android.support.v7.widget.CardView
android:id="#+id/cardView"
android:layout_width="0dp"
android:layout_height="122dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
app:cardBackgroundColor="#color/io15_blue_grey_100"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHeight_default="wrap"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_default="spread">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/mobLeftIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="#+id/mobInputLayout"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/mobInputLayout"
app:layout_constraintTop_toTopOf="#+id/mobInputLayout"
app:srcCompat="#drawable/ic_up" />
<android.support.design.widget.TextInputLayout
android:id="#+id/mobInputLayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
app:layout_constraintLeft_toRightOf="#+id/mobLeftIcon"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<EditText
android:id="#+id/editText4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Mobile Number"
android:text="123123123" />
</android.support.design.widget.TextInputLayout>
<ImageView
android:id="#+id/phoneLeftIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="#+id/phoneInputLayout"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/phoneInputLayout"
app:layout_constraintTop_toTopOf="#+id/phoneInputLayout"
app:srcCompat="#drawable/ic_up" />
<android.support.design.widget.TextInputLayout
android:id="#+id/phoneInputLayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
app:layout_constraintLeft_toRightOf="#+id/phoneLeftIcon"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/mobInputLayout">
<EditText
android:id="#+id/editText5"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Telphone Number"
android:text="123123123" />
</android.support.design.widget.TextInputLayout>
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>
</android.support.constraint.ConstraintLayout>
Screenshot:

To make CardView wrap content represented by ConstraintLayout, you have to add 3 chains to views inside ConstraintLayout:
Horizontal spread chain between mobLeftIcon and mobInputLayout
Horizontal spread chain between phoneLeftIcon and phoneInputLayout
Vertical spread chain between mobInputLayout and phoneInputLayout
See this screenshot of Layout Editor:
Here's the final source code for your layout:
<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">
<android.support.v7.widget.CardView
android:id="#+id/cardView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/mobLeftIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginStart="16dp"
android:layout_marginBottom="8dp"
app:srcCompat="#drawable/ic_up"
app:layout_constraintTop_toTopOf="#+id/mobInputLayout"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="#+id/mobInputLayout"
app:layout_constraintEnd_toStartOf="#+id/mobInputLayout"
app:layout_constraintHorizontal_chainStyle="spread" />
<android.support.design.widget.TextInputLayout
android:id="#+id/mobInputLayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginStart="16dp"
android:layout_marginEnd="8dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toEndOf="#+id/mobLeftIcon"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toTopOf="#+id/phoneInputLayout"
app:layout_constraintVertical_chainStyle="spread">
<EditText
android:id="#+id/editText4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Mobile Number"
android:text="123123123" />
</android.support.design.widget.TextInputLayout>
<ImageView
android:id="#+id/phoneLeftIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginStart="16dp"
android:layout_marginBottom="8dp"
app:srcCompat="#drawable/ic_up"
app:layout_constraintTop_toTopOf="#+id/phoneInputLayout"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="#+id/phoneInputLayout"
app:layout_constraintEnd_toStartOf="#+id/phoneInputLayout"
app:layout_constraintHorizontal_chainStyle="spread" />
<android.support.design.widget.TextInputLayout
android:id="#+id/phoneInputLayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginStart="16dp"
android:layout_marginEnd="8dp"
app:layout_constraintTop_toBottomOf="#+id/mobInputLayout"
app:layout_constraintStart_toEndOf="#+id/phoneLeftIcon"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent">
<EditText
android:id="#+id/editText5"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Telphone Number"
android:text="123123123" />
</android.support.design.widget.TextInputLayout>
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>
</android.support.constraint.ConstraintLayout>
As a result, you get something like:

<android.support.v7.widget.CardView
android:id="#+id/cardView"
android:layout_width="0dp"
android:layout_height="122dp"
You can use the height as 0dp and use the line
app:layout_constraintHeight_default="wrap"

Categories

Resources