Develop Reference

Bottom of one layout in the middle of another layout vertically in android xml?

I want to create the below layout, but not sure how to do it.
height of both blue layout and white layout is set to "wrap_content" and therefor they don't have a constant height.
The point is, I want the bottom of blue layout to always be in the middle of white layout(vertically). I have no idea how to do it using constraint or relative layout.
I searched but couldn't find any solution to this problem.

modify this accordingly
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/credentials_card"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginTop="20dp"
android:padding="#dimen/spacing_mlarge"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/image_logo">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/spacing_medium"
android:visibility="visible"
app:cardBackgroundColor="#color/white"
app:cardCornerRadius="6dp"
app:cardElevation="5dp"
app:cardUseCompatPadding="true"
tools:ignore="MissingConstraints">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="#dimen/spacing_xmlarge">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginBottom="25dp"
android:fontFamily="#string/font_family_light"
android:text="L O G I N"
android:textAppearance="#style/Base.TextAppearance.AppCompat.Large"
android:textColor="#color/colorPrimary"
android:textStyle="bold" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="MOBILE"
android:textAlignment="center"
android:textAppearance="#style/Base.TextAppearance.AppCompat.Caption"
android:textColor="#color/colorPrimary" />
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/mobileNumberET"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="number"
android:maxLength="10"
android:maxLines="1"
android:singleLine="true"
android:textAppearance="#style/Base.TextAppearance.AppCompat.Large"
android:textColor="#color/colorPrimary"
android:textStyle="bold" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="PASSWORD"
android:textAlignment="center"
android:textAppearance="#style/Base.TextAppearance.AppCompat.Caption"
android:textColor="#color/colorPrimary" />
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/passwordET"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPassword"
android:maxLength="50"
android:maxLines="1"
android:singleLine="true"
android:textAppearance="#style/Base.TextAppearance.AppCompat.Large"
android:textColor="#color/colorPrimary"
android:textStyle="bold" />
</LinearLayout>
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>
<Button
android:id="#+id/loginButton"
android:layout_width="match_parent"
android:layout_height="57dp"
android:layout_marginLeft="50dp"
android:layout_marginRight="50dp"
android:background="#drawable/button_round"
android:text="L O G I N"
android:fontFamily="#string/font_family_light"
android:textAllCaps="false"
android:textColor="#android:color/white"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="#+id/credentials_card"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

You can try this (I don't include border radius so take care of it..)
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/constraintLayout"
android:layout_width="match_parent"
android:layout_height="250dp"
android:background="#8F2A2A"
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="70dp"
android:layout_marginStart="50dp"
android:layout_marginEnd="50dp"
android:layout_marginTop="200dp"
android:background="#B8C159"
app:layout_constraintTop_toTopOf="#+id/constraintLayout" />
</androidx.constraintlayout.widget.ConstraintLayout>

Here My Ans check
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginLeft="#dimen/dp_16"
android:layout_marginRight="#dimen/dp_16"
app:cardBackgroundColor="#color/blue"
app:cardCornerRadius="#dimen/dp_10"
app:cardElevation="#dimen/dp_5"
app:cardUseCompatPadding="true"
android:id="#+id/card_container"
app:layout_constraintBottom_toBottomOf="#id/guideline"
app:layout_constraintTop_toTopOf="parent">
</androidx.cardview.widget.CardView>
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.42" />
<androidx.cardview.widget.CardView
android:layout_width="0dp"
android:layout_height="100dp"
app:cardBackgroundColor="#color/white"
app:cardCornerRadius="#dimen/dp_10"
app:cardElevation="#dimen/dp_5"
app:cardUseCompatPadding="true"
android:layout_marginStart="#dimen/dp_20"
android:layout_marginEnd="#dimen/dp_20"
app:layout_constraintStart_toStartOf="#id/card_container"
app:layout_constraintEnd_toEndOf="#id/card_container"
app:layout_constraintTop_toTopOf="#id/guideline"
app:layout_constraintBottom_toTopOf="#id/guideline">
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>

Use constraint layout as parent and then constraint the topOfSmallComponent to the bottomOfBigComponent. Then again constraint the bottomOfSmallComponent to the bottomOf BigComponent.
Example code below:
app:layout_constraintTop_toBottomOf="your_blue_items_id"
app:layout_constraintBottom_toBottomOf="your_blue_items_id"

TextViews in ConstraintLayout not wrapping properly despite setting properties

For some strange reason, the TextViews in my ConstraintLayout won't budge to show all text and it appears to go over the screen's boundaries. I already tried using app:layout_constrainedWidth="true" with android:layout_width="wrap_content" but that didn't have any effect in changing the positioning, leading me to think what would happen to the '1C' and '1D' text views when I add longer text in those.
Current result
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
app:cardUseCompatPadding="true"
android:background="#android:color/white">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:id="#+id/linearLayoutA"
android:padding="12dp"
android:foreground="?android:attr/selectableItemBackground">
<!--Constraint 1-->
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/constraintLayoutTitle"
android:layout_marginBottom="10dp">
<ImageView
android:id="#+id/ibA"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#mipmap/ic_launcher_round" />
<TextView
android:id="#+id/tvA"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
app:layout_constraintStart_toEndOf="#+id/ibA"
app:layout_constraintTop_toTopOf="parent"
app:layout_constrainedWidth="true"
style="#android:style/TextAppearance.Medium"/>
</androidx.constraintlayout.widget.ConstraintLayout>
<!--Constraint 2-->
<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:id="#+id/constraintLayout">
<ImageView
android:id="#+id/ivA"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#mipmap/ic_launcher_round" />
<TextView
android:id="#+id/tvB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
app:layout_constraintStart_toEndOf="#+id/ivA"
app:layout_constraintTop_toTopOf="#+id/ivA"
style="#android:style/TextAppearance.Medium"/>
<TextView
android:id="#+id/tvC"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp"
app:layout_constraintBottom_toTopOf="#+id/tvD"
app:layout_constraintStart_toEndOf="#+id/ivA"
app:layout_constraintTop_toBottomOf="#+id/tvB"
style="#android:style/TextAppearance.Medium"/>
<ImageView
android:id="#+id/ivD"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
app:layout_constraintEnd_toEndOf="#+id/ivA"
app:layout_constraintStart_toStartOf="#+id/ivA"
app:layout_constraintTop_toBottomOf="#+id/ivA"
app:layout_constraintTop_toTopOf="#+id/tvD"
app:srcCompat="#mipmap/ic_launcher_round" />
<TextView
android:id="#+id/tvD"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
app:layout_constraintStart_toEndOf="#+id/ivD"
app:layout_constraintTop_toBottomOf="#+id/tvC"
style="#android:style/TextAppearance.Medium"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</LinearLayout>
</androidx.cardview.widget.CardView>
Suraj Vaishnav's suggestion

Because there is no constraint from the right(or end) side, add this app:layout_constraintEnd_toEndOf="parent" to tvA,tvB and so on.
Update:
apply both constraints: start and end and set the width 0dp. here are the working properties for tvB:
<TextView
android:id="#+id/tvB"
app:layout_constraintStart_toEndOf="#+id/ivA"
android:layout_width="0dp"
app:layout_constraintEnd_toEndOf="parent"
...
I guess you can do the same things for tvC & tvD, let me know if you face any issue.

View is overlapped by another view in NestedScrollView with ConstrainLayout

I have the following layout:
<?xml version="1.0" encoding="utf-8"?>
<androidx.core.widget.NestedScrollView 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:fillViewport="true">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/content_ll"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/margin_32"
android:orientation="vertical"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.cardview.widget.CardView
android:id="#+id/online_card_cv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginHorizontal="#dimen/margin_16"
android:layout_marginTop="#dimen/margin_25"
android:background="#color/white"
app:cardCornerRadius="#dimen/margin_8">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginVertical="#dimen/margin_8">
<androidx.appcompat.widget.AppCompatRadioButton
android:id="#+id/online_card_rb"
android:layout_width="#dimen/margin_22"
android:layout_height="#dimen/margin_22"
android:layout_marginStart="#dimen/margin_16"
app:layout_constraintBottom_toBottomOf="#id/online_card_ll"
app:layout_constraintEnd_toStartOf="#id/online_card_ll"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#id/online_card_ll" />
<LinearLayout
android:id="#+id/online_card_ll"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/margin_16"
android:background="#color/white"
android:gravity="start"
android:orientation="vertical"
android:paddingVertical="#dimen/padding_16"
app:layout_constraintEnd_toStartOf="#id/cards_iv"
app:layout_constraintStart_toEndOf="#id/online_card_rb"
app:layout_constraintTop_toTopOf="parent">
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/online_card_tv"
style="#style/OnlineCardTitleTextStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/online_card_title"
app:lineHeight="#dimen/default_text_size_28" />
<androidx.appcompat.widget.AppCompatTextView
style="#style/OnlineCardSubTitleTextStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/online_card_now" />
</LinearLayout>
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/cards_iv"
android:layout_width="#dimen/margin_80"
android:layout_height="#dimen/margin_20"
android:layout_marginEnd="#dimen/margin_16"
android:src="#drawable/ic_visa_master"
app:layout_constraintBottom_toBottomOf="#id/online_card_ll"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#id/online_card_ll" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/online_card_expanded_info_cl"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="gone"
app:layout_constraintTop_toBottomOf="#id/online_card_ll">
<View
android:id="#+id/online_card_divider"
style="#style/ViewDividerStyle"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginTop="#dimen/margin_16"
app:layout_constraintTop_toTopOf="parent" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/cards_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/online_card_divider" />
<View
android:id="#+id/cards_list_divider"
style="#style/ViewDividerStyle"
android:layout_width="match_parent"
android:layout_height="1dp"
app:layout_constraintTop_toBottomOf="#id/cards_list" />
<TextView
android:id="#+id/read_more_tv"
style="#style/OnlineCardReadMoreTextStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/margin_16"
android:layout_marginTop="#dimen/margin_16"
android:layout_marginBottom="#dimen/margin_8"
android:text="#string/read_more"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/cards_list_divider" />
<LinearLayout
android:id="#+id/additional_info_ll"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/margin_21"
android:layout_marginTop="#dimen/margin_16"
android:layout_marginEnd="#dimen/margin_10"
android:layout_marginBottom="#dimen/margin_8"
android:orientation="vertical"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/cards_list_divider">
<TextView
android:id="#+id/online_card_less_info_tv"
style="#style/OnlineCardReadMoreTextStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/online_card_less_info" />
<TextView
android:id="#+id/check_card_type_title_tv"
style="#style/OnlineCardBottomTitleTextStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/margin_4"
android:text="#string/online_check_card" />
<TextView
android:id="#+id/check_card_type_info_tv"
style="#style/OnlineCardBottomDescriptionTextStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/margin_8"
android:layout_marginTop="#dimen/margin_4"
android:text="#string/online_check_card_info" />
<TextView
android:id="#+id/online_card_data_title_tv"
style="#style/OnlineCardBottomTitleTextStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/margin_4"
android:text="#string/online_card_data" />
<TextView
android:id="#+id/online_card_data_info_tv"
style="#style/OnlineCardBottomDescriptionTextStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/margin_8"
android:layout_marginTop="#dimen/margin_4"
android:text="#string/online_card_data_info" />
<TextView
android:id="#+id/online_card_confirmation_title_tv"
style="#style/OnlineCardBottomTitleTextStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/margin_4"
android:text="#string/online_card_confirmation" />
<TextView
android:id="#+id/online_card_confirmation_info_tv"
style="#style/OnlineCardBottomDescriptionTextStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/margin_8"
android:layout_marginTop="#dimen/margin_4"
android:text="#string/online_card_confirmation_info" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:id="#+id/bank_account_cv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginHorizontal="#dimen/margin_16"
android:layout_marginTop="25dp"
android:background="#color/white"
app:cardCornerRadius="#dimen/margin_8">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginVertical="#dimen/margin_24">
<androidx.appcompat.widget.AppCompatRadioButton
android:id="#+id/bank_account_rb"
android:layout_width="#dimen/margin_22"
android:layout_height="#dimen/margin_22"
android:layout_marginStart="#dimen/margin_16"
app:layout_constraintBottom_toBottomOf="#id/bank_account_tv"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#id/bank_account_tv" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/bank_account_tv"
style="#style/OnlineCardTitleTextStyle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/margin_14"
android:text="#string/title_on_bank"
android:textAlignment="textStart"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/bank_account_rb"
app:layout_constraintTop_toTopOf="parent" />
<View
android:id="#+id/bank_account_divider"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginTop="#dimen/margin_16"
android:alpha="0.5"
android:background="#000001"
app:layout_constraintTop_toBottomOf="#id/bank_account_tv" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/iban_hint_tv"
style="#style/OnlineCardEditTextHintTextStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/margin_16"
android:layout_marginTop="15dp"
android:text="#string/step7_iban_hint"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/bank_account_divider" />
<androidx.appcompat.widget.AppCompatEditText
android:id="#+id/step1_phone"
android:layout_width="match_parent"
android:layout_height="#dimen/height_edittext"
android:layout_marginHorizontal="#dimen/margin_16"
android:layout_marginTop="#dimen/margin_2"
android:background="#drawable/rounded_edittext_with_border"
android:maxLines="1"
app:layout_constraintTop_toBottomOf="#id/iban_hint_tv" />
<androidx.constraintlayout.widget.Group
android:id="#+id/group"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone"
app:constraint_referenced_ids="step1_phone, iban_hint_tv, bank_account_divider" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
</LinearLayout>
<androidx.appcompat.widget.AppCompatButton
android:id="#+id/step7_next_btn"
android:layout_width="#dimen/width_button_next"
android:layout_height="#dimen/height_button_next"
android:layout_marginBottom="#dimen/margin_10"
android:background="#drawable/rounded_button_next"
android:text="#string/next"
android:textColor="#color/button_text_green"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
When the part of the view has gone visibility, my screen looks like this:
As you can see, button is placed in the bottom and it's not overlapped by any other views. But when card is expanded, it looks like this:
As you can see, now button overlaps another card, and I need to place button under the card. So, how can I prevent existing behavior and place the button under all cards in the bottom? Thanks in advance, I will appreciate any help!

See below for an updated answer.
Old
I don't see the purpose of ConstraintLayout. You can remove that and place the button as last item in LinearLayout. The XML would then be like:
NestedScrollingView
LinearLayout
CardView ...
CardView ...
AppCompatButton
You can also use ConstraintLayout instead of LinearLayout, but I don't see the need for both.
This introduces a problem: the button is not at the bottom, when the content does not fill out the screen. For an easy fix, you can use ConstraintLayout with appropriate constraints.
New
I suggest you to use a ConstraintLayout. With it, you can achieve a flat layout hierarchy. You can use chains and vertical bias as such:
Chain the first card to the top of your parent
Chain the button to the bottom of your parent
Chain the second card to the bottom of the first card and to the top of the button. Apply a vertical bias of 0.0.
The result:
And the simple code for the example:
<?xml version="1.0" encoding="utf-8"?>
<androidx.core.widget.NestedScrollView 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="#dddddd"
android:fillViewport="true">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.cardview.widget.CardView
android:id="#+id/card1"
android:layout_width="0dp"
android:layout_height="200dp"
android:layout_margin="16dp"
app:cardCornerRadius="8dp"
app:cardElevation="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="First card" />
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:id="#+id/card2"
android:layout_width="0dp"
android:layout_height="800dp"
android:layout_margin="16dp"
app:cardCornerRadius="8dp"
app:cardElevation="8dp"
app:layout_constraintBottom_toTopOf="#id/button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/card1"
app:layout_constraintVertical_bias="0.0">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Second card" />
</androidx.cardview.widget.CardView>
<androidx.appcompat.widget.AppCompatButton
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="64dp"
android:layout_marginBottom="16dp"
android:background="#ffffff"
android:text="Button text"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintWidth_percent="0.5" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>

How to set height of a view in percent using ConstraintLayout

Currently I'm learning ConstraintLayout
below is my code that i have tried so far
<?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="#000000"
android:fitsSystemWindows="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context=".activity.PhaseListActivity">
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:weightSum="1">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.8"
android:background="#color/colorAccent">
<VideoView
android:id="#+id/myVideoView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="visible" />
<TextSwitcher
android:id="#+id/tvAnimText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_gravity="center"
android:fontFamily="#font/knowledge_bold"
android:textColor="#color/greenColor"
android:textSize="#dimen/_100ssp"
android:textStyle="bold"
tools:text="1" />
</FrameLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.2"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="10dp"
android:text="Scrollbale view below my videoView"
android:textColor="#ff00"
android:textStyle="bold" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="10dp"
android:text="Scrollbale view below my videoView"
android:textColor="#ff00"
android:textStyle="bold" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="10dp"
android:text="Scrollbale view below my videoView"
android:textColor="#ff00"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>
</androidx.core.widget.NestedScrollView>
<LinearLayout
android:id="#+id/bottomView"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_gravity="bottom"
android:background="#color/greenColor"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="Fixed Bottombar"
android:textColor="#ff00"
android:textStyle="bold" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
I want don't want use nested LinearLayout inside ConstraintLayout
Also in above layout my NestedScrollView is not scrolling
I want to create this type of screen using ConstraintLayout
My expected OUTPUT
I have tried to set Guideline but it didn't work for me, because i don't know how to use Guideline in above layout
Can anybody help me create this screen only using ConstraintLayout
If need more information please do let me know. Thanks in advance. Your efforts will be appreciated.

So, after looking at your xml file, I've come up with solution to get rid of nested LinearLayout hierarchy in below solution:
<?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="#000000"
android:fitsSystemWindows="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<androidx.core.widget.NestedScrollView
android:layout_width="0dp"
android:layout_height="0dp"
android:fillViewport="true"
app:layout_constraintBottom_toTopOf="#id/tv_bottom_view"
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="wrap_content">
<VideoView
android:id="#+id/myVideoView"
android:layout_width="0dp"
android:layout_height="0dp"
android:visibility="visible"
app:layout_constrainedHeight="true"
app:layout_constraintBottom_toTopOf="#id/tv1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_default="percent"
app:layout_constraintHeight_percent="0.85"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="packed" />
<TextSwitcher
android:id="#+id/tvAnimText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_gravity="center"
android:fontFamily="#font/knowledge_bold"
android:textColor="#color/greenColor"
android:textSize="#dimen/_100ssp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="#id/myVideoView"
app:layout_constraintEnd_toEndOf="#id/myVideoView"
app:layout_constraintStart_toStartOf="#id/myVideoView"
app:layout_constraintTop_toTopOf="#id/myVideoView"
tools:text="1" />
<TextView
android:id="#+id/tv1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="10dp"
android:text="Scrollbale view below my videoView"
android:textColor="#ff00"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#id/tv2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/myVideoView" />
<TextView
android:id="#+id/tv2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="10dp"
android:text="Scrollbale view below my videoView"
android:textColor="#ff00"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#id/tv3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/tv1" />
<TextView
android:id="#+id/tv3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="10dp"
android:text="Scrollbale view below my videoView"
android:textColor="#ff00"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/tv2" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
<TextView
android:id="#+id/tv_bottom_view"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
android:text="Fixed Bottombar"
android:textColor="#ff00"
android:textStyle="bold"
app:layout_constrainedHeight="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_default="percent"
app:layout_constraintHeight_percent="0.08"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Let me know if there's any query in comments. For your fixed bottombar TextView, now you can change height percent to whatever you want to change it's height dynamically.

You can use below code for bottom View which remove your Nested LinearLayout :
<TextView
android:id="#+id/bottomView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Fixed Bottombar"
android:textColor="#ff00"
android:background="#00ff00"
android:padding="15dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:textStyle="bold" />

How to get constraintView to fill width space inside scrollView?

I have a constraintLayout inside a scrollView as shown below and the constraintLayout does not fill the screen in terms of width. How can I get it to do so ?
<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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/scrollView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
tools:context=".MainActivity">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/title_leg"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center|center_horizontal|center_vertical"
android:text="#string/leg"
android:textAppearance="#style/TextAppearance.AppCompat.Display1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="parent"
app:layout_constraintVertical_bias="1.0" />
<TextView
android:id="#+id/leg1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:layout_marginLeft="5dp"
android:layout_marginTop="10dp"
android:text="#string/leg"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
app:layout_constraintStart_toStartOf="#id/title_leg"
app:layout_constraintTop_toBottomOf="#id/title_leg" />
<TextView
android:id="#+id/leg2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="55dp"
android:layout_marginLeft="5dp"
android:layout_marginTop="10dp"
android:text="#string/leg"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
app:layout_constraintStart_toStartOf="#id/leg1"
app:layout_constraintTop_toBottomOf="#id/leg1" />
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
Here is a screenshot, it does look fine in the Android Studio design tool but not on the phone I use for emulation sake:

If you want exactly like below
then please check this xml.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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/scrollView"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/title_leg"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center|center_horizontal|center_vertical"
android:text="leg"
android:textAppearance="#style/TextAppearance.AppCompat.Display1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="parent"
app:layout_constraintVertical_bias="1.0" />
<TextView
android:id="#+id/leg1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:layout_marginLeft="5dp"
android:layout_marginTop="10dp"
android:text="leg"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
app:layout_constraintStart_toStartOf="#id/title_leg"
app:layout_constraintTop_toBottomOf="#id/title_leg" />
<TextView
android:id="#+id/leg2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="55dp"
android:layout_marginLeft="5dp"
android:layout_marginTop="10dp"
android:text="leg"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
app:layout_constraintStart_toStartOf="#id/leg1"
app:layout_constraintTop_toBottomOf="#id/leg1" />
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>