View is overlapped by another view in NestedScrollView with ConstrainLayout - android

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>

Related

ScrollView is not providing scrolling feature

The ScrollView is not scrolling. Although I have it and it is set to wrap_content, it contains only one child element, but there is not scrolling feature at all.How can I make it scroll? The scrolling should start after EditText that's why I have it below EditText, not as parent. Thanks in advance
<?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:fitsSystemWindows="true">
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/message"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="#dimen/dp_20"
android:src="#drawable/ic_messages"
app:layout_constraintBottom_toBottomOf="#+id/textViewDrawable"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/main_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/dp_16"
android:layout_marginTop="#dimen/dp_10"
android:fontFamily="#font/manrope_normal"
android:text="Платежи"
android:textColor="#071222"
android:textSize="34sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/message" />
<androidx.appcompat.widget.AppCompatEditText
android:id="#+id/search_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginHorizontal="#dimen/dp_16"
android:layout_marginTop="#dimen/dp_10"
android:background="#drawable/search_bar"
android:drawableStart="#drawable/ic_search_grey"
android:drawablePadding="#dimen/dp_10"
android:hint="Какой платеж ищете?"
android:paddingVertical="#dimen/dp_8"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/main_title" />
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/search_bar">
<androidx.appcompat.widget.LinearLayoutCompat
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<androidx.cardview.widget.CardView
android:id="#+id/card_popular"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginHorizontal="#dimen/dp_16"
android:layout_marginTop="#dimen/dp_26"
app:cardCornerRadius="#dimen/dp_12"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/search_bar">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/payments_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/dp_16"
android:layout_marginTop="20dp"
android:layout_marginRight="#dimen/dp_16"
android:layout_marginBottom="#dimen/dp_20"
app:layoutManager="androidx.recyclerview.widget.GridLayoutManager"
app:spanCount="4"
tools:listitem="#layout/recycler_popular_payment" />
</androidx.cardview.widget.CardView>
<androidx.appcompat.widget.LinearLayoutCompat
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/dp_16"
android:background="#color/colorWhite"
android:orientation="vertical"
android:paddingHorizontal="#dimen/dp_16"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/card_popular">
<androidx.appcompat.widget.AppCompatTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/dp_16"
android:text="Сохраненные" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/saved_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
tools:listitem="#layout/recycler_item_saved_payment" />
</androidx.appcompat.widget.LinearLayoutCompat>
</androidx.appcompat.widget.LinearLayoutCompat>
</ScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>

Your ScrollView should have these properties:
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
Using those and some dummy TextView(s) inside the LinearLayout I see that scrolling is working.

Now update the scroll view
<ScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:fillViewport="true"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/search_bar">

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"

Textview content cuts off from right in constraint layout

I have a card view layout of having one imageView on left side and two textviews aligned vertically placed in right of imageview. Right now I am getting issue as text is cutting in right side of screen in one of textview. Below is XML layout that I am using.
<?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:padding="#dimen/spacing_large"
tools:context=".ui.profile.GroupProfileActivity"
android:background="#android:color/background_light">
<com.google.android.material.card.MaterialCardView
android:id="#+id/groupCardView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="#dimen/spacing_normal"
app:cardElevation="2dp"
android:elevation="2dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/layoutGroup"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/groupImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="#+id/layoutGroup"
app:layout_constraintBottom_toBottomOf="#+id/layoutGroup"
app:layout_constraintStart_toStartOf="#+id/layoutGroup"
app:srcCompat="#drawable/ic_group_black_24dp"
android:paddingLeft="#dimen/spacing_normal"/>
<!-- Donor type layout -->
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/layoutGroupView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="10dp"
app:layout_constraintLeft_toRightOf="#+id/groupImageView"
app:layout_constraintTop_toTopOf="#+id/layoutGroup"
android:layout_marginLeft="#dimen/spacing_normal">
<TextView
android:id="#+id/tvGroupName"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Demo"
android:textSize="#dimen/font_normal"
app:layout_constraintTop_toTopOf="#+id/layoutGroupView"
app:layout_constraintStart_toStartOf="#+id/layoutGroupView"/>
<TextView
android:id="#+id/tvGroupNameLabel"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#string/group_label"
android:textSize="#dimen/font_normal"
app:layout_constraintTop_toBottomOf="#+id/tvGroupName"
app:layout_constraintStart_toStartOf="#+id/layoutGroupView"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.card.MaterialCardView>
<com.google.android.material.card.MaterialCardView
android:id="#+id/mobileCardView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#+id/groupCardView"
android:layout_marginTop="#dimen/spacing_large"
app:cardElevation="2dp"
android:elevation="2dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/layoutPhone"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/phoneImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="#+id/layoutPhone"
app:layout_constraintBottom_toBottomOf="#+id/layoutPhone"
app:layout_constraintStart_toStartOf="#+id/layoutPhone"
app:srcCompat="#drawable/ic_phone_black_24dp"
android:paddingLeft="#dimen/spacing_normal"/>
<!-- Donor type layout -->
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/layoutPhoneView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="10dp"
app:layout_constraintLeft_toRightOf="#+id/phoneImageView"
app:layout_constraintTop_toTopOf="#+id/layoutPhone"
android:layout_marginLeft="#dimen/spacing_normal">
<TextView
android:id="#+id/tvPhone"
android:layout_width="0dp"
android:layout_height="wrap_content"
tools:text="Demo"
android:textSize="#dimen/font_normal"
app:layout_constraintTop_toTopOf="#+id/layoutPhoneView"
app:layout_constraintStart_toStartOf="#+id/layoutPhoneView"/>
<TextView
android:id="#+id/tvPhoneLabel"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#string/phone_label"
android:textSize="#dimen/font_normal"
app:layout_constraintTop_toBottomOf="#+id/tvPhone"
app:layout_constraintStart_toStartOf="#+id/layoutPhoneView"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.card.MaterialCardView>
<com.google.android.material.card.MaterialCardView
android:id="#+id/addressCardView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#+id/mobileCardView"
app:layout_constraintStart_toStartOf="parent"
android:layout_marginTop="#dimen/spacing_large"
app:cardElevation="2dp"
android:elevation="2dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/layoutAddress"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/addressImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="#+id/layoutAddress"
app:layout_constraintBottom_toBottomOf="#+id/layoutAddress"
app:layout_constraintStart_toStartOf="#+id/layoutAddress"
app:srcCompat="#drawable/ic_home_black_24dp"
android:paddingLeft="#dimen/spacing_normal"/>
<!-- Donor type layout -->
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/layoutHomeView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="10dp"
app:layout_constraintLeft_toRightOf="#+id/addressImageView"
app:layout_constraintTop_toTopOf="#+id/layoutAddress"
android:layout_marginLeft="#dimen/spacing_normal">
<TextView
android:id="#+id/tvAddress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:text="Demo"
android:textSize="#dimen/font_normal"
app:layout_constraintTop_toTopOf="#+id/layoutHomeView"
app:layout_constraintStart_toStartOf="#+id/layoutHomeView"/>
<TextView
android:id="#+id/tvAddressLabel"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#string/donor_address_hint"
android:textSize="#dimen/font_normal"
tools:text="sfsfgagaggsggddeggdgagahhahahahahhahahgsgjaaasshhs"
android:paddingRight="#dimen/spacing_xxhuge"
app:layout_constraintEnd_toEndOf="#+id/layoutHomeView"
app:layout_constraintTop_toBottomOf="#+id/tvAddress" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.card.MaterialCardView>
</androidx.constraintlayout.widget.ConstraintLayout>
And also adding screenshot.
Please look into this issue as I am struggling this issue long.

Your last material card constraint and width is wrong.
Also, You can remove more layout hierarchy like in Donor type layout you can remove unnecessary constraintlayout.
<?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="#android:color/background_light"
android:padding="#dimen/spacing_large">
<com.google.android.material.card.MaterialCardView
android:id="#+id/groupCardView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/spacing_normal"
android:elevation="2dp"
app:cardElevation="2dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/layoutGroup"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/groupImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="#dimen/spacing_normal"
app:layout_constraintBottom_toBottomOf="#+id/layoutGroup"
app:layout_constraintStart_toStartOf="#+id/layoutGroup"
app:layout_constraintTop_toTopOf="#+id/layoutGroup"
app:srcCompat="#drawable/ic_launcher_background" />
<!-- Donor type layout -->
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/layoutGroupView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/spacing_normal"
android:orientation="horizontal"
android:padding="10dp"
app:layout_constraintStart_toEndOf="#+id/groupImageView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintLeft_toRightOf="#+id/groupImageView"
app:layout_constraintTop_toTopOf="#+id/layoutGroup">
<TextView
android:id="#+id/tvGroupName"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Demo"
android:textSize="#dimen/font_normal"
app:layout_constraintEnd_toEndOf="#+id/layoutGroupView"
app:layout_constraintStart_toStartOf="#+id/layoutGroupView"
app:layout_constraintTop_toTopOf="#+id/layoutGroupView" />
<TextView
android:id="#+id/tvGroupNameLabel"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="group_label"
android:textSize="#dimen/font_normal"
app:layout_constraintEnd_toEndOf="#+id/layoutGroupView"
app:layout_constraintStart_toStartOf="#+id/layoutGroupView"
app:layout_constraintTop_toBottomOf="#+id/tvGroupName" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.card.MaterialCardView>
<com.google.android.material.card.MaterialCardView
android:id="#+id/mobileCardView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/spacing_large"
android:elevation="2dp"
app:cardElevation="2dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/groupCardView">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/layoutPhone"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/phoneImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="#dimen/spacing_normal"
app:layout_constraintBottom_toBottomOf="#+id/layoutPhone"
app:layout_constraintStart_toStartOf="#+id/layoutPhone"
app:layout_constraintTop_toTopOf="#+id/layoutPhone"
app:srcCompat="#drawable/ic_launcher_background" />
<!-- Donor type layout -->
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/layoutPhoneView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/spacing_normal"
android:orientation="horizontal"
android:padding="10dp"
app:layout_constraintEnd_toEndOf="#+id/layoutPhone"
app:layout_constraintStart_toEndOf="#+id/phoneImageView"
app:layout_constraintTop_toTopOf="#+id/layoutPhone">
<TextView
android:id="#+id/tvPhone"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textSize="#dimen/font_normal"
app:layout_constraintEnd_toEndOf="#+id/layoutPhoneView"
app:layout_constraintStart_toStartOf="#+id/layoutPhoneView"
app:layout_constraintTop_toTopOf="#+id/layoutPhoneView"
tools:text="Demo" />
<TextView
android:id="#+id/tvPhoneLabel"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="phone_label"
android:textSize="#dimen/font_normal"
app:layout_constraintEnd_toEndOf="#+id/layoutPhoneView"
app:layout_constraintStart_toStartOf="#+id/layoutPhoneView"
app:layout_constraintTop_toBottomOf="#+id/tvPhone" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.card.MaterialCardView>
<com.google.android.material.card.MaterialCardView
android:id="#+id/addressCardView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/spacing_large"
android:elevation="2dp"
app:cardElevation="2dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/mobileCardView">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/layoutAddress"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/addressImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="#dimen/spacing_normal"
app:layout_constraintBottom_toBottomOf="#+id/layoutAddress"
app:layout_constraintStart_toStartOf="#+id/layoutAddress"
app:layout_constraintTop_toTopOf="#+id/layoutAddress"
app:srcCompat="#drawable/ic_launcher_background" />
<!-- Donor type layout -->
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/layoutHomeView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/spacing_normal"
android:orientation="horizontal"
android:padding="10dp"
app:layout_constraintEnd_toEndOf="#+id/layoutAddress"
app:layout_constraintStart_toEndOf="#+id/addressImageView"
app:layout_constraintTop_toTopOf="#+id/layoutAddress">
<TextView
android:id="#+id/tvAddress"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textSize="#dimen/font_normal"
app:layout_constraintEnd_toEndOf="#+id/layoutHomeView"
app:layout_constraintStart_toStartOf="#+id/layoutHomeView"
app:layout_constraintTop_toTopOf="#+id/layoutHomeView"
tools:text="Demo" />
<TextView
android:id="#+id/tvAddressLabel"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:paddingRight="#dimen/spacing_xxhuge"
android:text="donor_address_hint"
app:layout_constraintEnd_toEndOf="#+id/layoutHomeView"
app:layout_constraintTop_toBottomOf="#+id/tvAddress"
tools:text="sfsfgagaggsggddeggdgagahhahahahahhahahgsgjaaasshhs" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.card.MaterialCardView>
</androidx.constraintlayout.widget.ConstraintLayout>

You have set width to 0dp. Instead use wrap_content:
android:id="#+id/tvAddressLabel"
android:layout_width="wrap_content" //here
android:layout_height="wrap_content"

Add app:layout_constraintEnd_toEndOf="parent”
To layoutHomeView and addressCardView

first: your text haven't whitespace and Android Studio thing is one word.
So in real world we haven't so longest word.
Just add whitespace.
Second: you created two containers for one cell. Example you create 1 container that include imageView and other container with textViews.
So you can use only 1 container that will include all views. Because your 'text container' go out of display (Added it on pictures).

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" />

GridLayout columns disappearing on smaller screen devices

I'm having some issues with my GridLayout contained within a ConstraintLayout. On larger screen devices (Pixel 2/3 XL for example) the GridLayout looks fine with content for all three columns showing up as expected.
On smaller screen devices only the first column is visible while the others just seem to disappear completely. What am I missing here?
<?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/login_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorWhite"
android:animateLayoutChanges="true"
tools:context=".myactivity.MyActivity">
<androidx.gridlayout.widget.GridLayout
android:id="#+id/activity_gridlayout_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
app:columnCount="3"
app:layout_constraintTop_toBottomOf="#id/top_layout"
app:rowCount="1">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/md_keylines_medium"
android:layout_marginTop="#dimen/md_keylines"
android:layout_marginEnd="#dimen/md_keylines"
android:layout_marginBottom="#dimen/md_keylines"
android:orientation="vertical"
app:layout_columnWeight="1">
<ImageView
android:id="#+id/activity_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_climate" />
<TextView
android:id="#+id/activity_state_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/colorWhite" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/md_keylines"
android:orientation="vertical"
app:layout_columnWeight="1">
<com.google.android.material.chip.Chip
android:id="#+id/activity_temp"
style="#style/Widget.MaterialComponents.Chip.Action"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="22.0"
app:chipIcon="#drawable/ic_minus"
app:chipIconSize="22dp"
app:closeIcon="#drawable/ic_add"
app:closeIconEnabled="true"
app:closeIconSize="22dp"
app:closeIconTint="#color/colorAccent" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/md_keylines"
android:orientation="vertical"
app:layout_columnWeight="1">
<com.google.android.material.chip.Chip
android:id="#+id/activity_toggle"
style="#style/Widget.MaterialComponents.Chip.Action"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/start"
android:textColor="#color/colorWhite"
app:chipBackgroundColor="#color/colorAccent"
app:chipIcon="#drawable/ic_power"
app:chipIconTint="#color/colorWhite" />
</LinearLayout>
</androidx.gridlayout.widget.GridLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

Just make layout width 0dp where you are using column weight and check:
Like:
<?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/login_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorWhite"
android:animateLayoutChanges="true"
tools:context=".myactivity.MyActivity">
<androidx.gridlayout.widget.GridLayout
android:id="#+id/activity_gridlayout_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
app:columnCount="3"
app:layout_constraintTop_toBottomOf="#id/top_layout"
app:rowCount="1">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/md_keylines_medium"
android:layout_marginTop="#dimen/md_keylines"
android:layout_marginEnd="#dimen/md_keylines"
android:layout_marginBottom="#dimen/md_keylines"
android:orientation="vertical"
app:layout_columnWeight="1">
<ImageView
android:id="#+id/activity_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_climate" />
<TextView
android:id="#+id/activity_state_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/colorWhite" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="#dimen/md_keylines"
android:orientation="vertical"
app:layout_columnWeight="1">
<com.google.android.material.chip.Chip
android:id="#+id/activity_temp"
style="#style/Widget.MaterialComponents.Chip.Action"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="22.0"
app:chipIcon="#drawable/ic_minus"
app:chipIconSize="22dp"
app:closeIcon="#drawable/ic_add"
app:closeIconEnabled="true"
app:closeIconSize="22dp"
app:closeIconTint="#color/colorAccent" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="#dimen/md_keylines"
android:orientation="vertical"
app:layout_columnWeight="1">
<com.google.android.material.chip.Chip
android:id="#+id/activity_toggle"
style="#style/Widget.MaterialComponents.Chip.Action"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/start"
android:textColor="#color/colorWhite"
app:chipBackgroundColor="#color/colorAccent"
app:chipIcon="#drawable/ic_power"
app:chipIconTint="#color/colorWhite" />
</LinearLayout>
</androidx.gridlayout.widget.GridLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Hope it helps.

Design View should be like this
<com.google.android.material.card.MaterialCardView
android:id="#+id/tab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="#{(v)->callback.onTabClick(v)}"
app:touchListener="#{mContext}">
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center">
<ImageView
android:id="#+id/iv_card_icon"
android:layout_width="#dimen/grid_menu_image"
android:layout_height="#dimen/grid_menu_image"
android:layout_centerInParent="true"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
app:imageResource="#{tabIcon}"
android:scaleType="center"
app:layout_constraintBottom_toTopOf="#+id/tv_guide_title"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="spread"
tools:src="#drawable/guide_icon" />
<!--android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"-->
<com.hp.pregnancy.customviews.new_50.RobotoMediumTextView
android:id="#+id/tv_guide_title"
style="#style/TextAppearance.MaterialComponents.Subtitle1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="16dp"
android:ellipsize="end"
android:gravity="center"
android:maxLines="2"
android:text="#{tabTitle}"
android:textAlignment="center"
android:textColor="#color/menu_color"
android:textFontWeight="500"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/iv_card_icon"
tools:text="#string/guideTitle" />
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.card.MaterialCardView>
For Grid Include like this
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/relativeLayout3"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
android:id="#+id/include2"
layout="#layout/toolbar"
android:layout_width="0dp"
android:layout_height="?attr/actionBarSize"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:visibility="gone"/>
<include
android:id="#+id/tab1"
layout="#layout/card"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="#dimen/small_margin"
android:layout_marginTop="#dimen/small_margin"
android:layout_marginEnd="#dimen/xsmall_margin"
android:layout_marginBottom="#dimen/xsmall_margin"
app:callback="#{callback}"
app:layout_constraintBottom_toTopOf="#+id/tab3"
app:layout_constraintEnd_toStartOf="#+id/guideline7"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/include2"
/>
<include
android:id="#+id/tab2"
layout="#layout/card"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="#dimen/xsmall_margin"
android:layout_marginEnd="#dimen/small_margin"
android:layout_marginLeft="#dimen/xsmall_margin"
android:layout_marginRight="#dimen/small_margin"
android:layout_marginStart="#dimen/xsmall_margin"
android:layout_marginTop="#dimen/small_margin"
app:layout_constraintBottom_toTopOf="#+id/tab4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="#+id/guideline7"
app:layout_constraintTop_toBottomOf="#+id/include2"
/> <!--guideLayout-->
<include
android:id="#+id/tab3"
layout="#layout/card"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="#dimen/xsmall_margin"
android:layout_marginEnd="#dimen/xsmall_margin"
android:layout_marginLeft="#dimen/small_margin"
android:layout_marginRight="#dimen/xsmall_margin"
android:layout_marginStart="#dimen/small_margin"
android:layout_marginTop="#dimen/xsmall_margin"
app:layout_constraintBottom_toTopOf="#+id/tab5"
app:layout_constraintEnd_toStartOf="#+id/guideline7"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tab1"
/>
<include
android:id="#+id/tab4"
layout="#layout/card"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="#dimen/xsmall_margin"
android:layout_marginEnd="#dimen/small_margin"
android:layout_marginLeft="#dimen/xsmall_margin"
android:layout_marginRight="#dimen/small_margin"
android:layout_marginStart="#dimen/xsmall_margin"
android:layout_marginTop="#dimen/xsmall_margin"
app:layout_constraintBottom_toTopOf="#+id/tab6"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="#+id/guideline7"
app:layout_constraintTop_toBottomOf="#+id/tab2"
/>
<include
android:id="#+id/tab5"
layout="#layout/card"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="#dimen/xsmall_margin"
android:layout_marginEnd="#dimen/xsmall_margin"
android:layout_marginLeft="#dimen/small_margin"
android:layout_marginRight="#dimen/xsmall_margin"
android:layout_marginStart="#dimen/small_margin"
android:layout_marginTop="#dimen/xsmall_margin"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/guideline7"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tab3"
/>
<include
android:id="#+id/tab6"
layout="#layout/card"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="#dimen/xsmall_margin"
android:layout_marginEnd="#dimen/small_margin"
android:layout_marginLeft="#dimen/xsmall_margin"
android:layout_marginRight="#dimen/small_margin"
android:layout_marginStart="#dimen/xsmall_margin"
android:layout_marginTop="#dimen/xsmall_margin"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="#+id/guideline7"
app:layout_constraintTop_toBottomOf="#+id/tab4"
/>
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5" />
</androidx.constraintlayout.widget.ConstraintLayout>
If you are testing for smaller screen add scrollview and constraintlayout in activity or fragment layout and then add include.

Categories

Resources