Bottom Space on layouts Android - android

I have a parent constraint layout and i am getting bottom Space on each and Check Image U can see space at bottom even layout constraints are attach to bottom of parent every layout. However layout I have developed before are all working fine. Below is XML for one of my layouts.
You can see I have attached Constraints to bottom of parent but still I am getting this issue.
Please notice I have changed it to linear as well still the result is same. One strange thing is on Emulator its working fine.
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:bind="http://schemas.android.com/tools">
<data>
<import type="android.view.View" />
<variable
name="handler"
type="com.schoolber.handler.ChatEventhandlers" />
</data>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
>
<include
android:id="#+id/toolbar_tag"
layout="#layout/chat_main_toolbar_layout"
android:layout_width="0dp"
android:layout_height="#dimen/action_bar_height"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
bind:handler="#{handler}" />
<!-- <androidx.appcompat.widget.Toolbar-->
<!-- android:id="#+id/toolbar"-->
<!-- android:layout_width="0dp"-->
<!-- android:layout_height="#dimen/action_bar_height"-->
<!-- app:layout_constraintStart_toStartOf="parent"-->
<!-- app:layout_constraintEnd_toEndOf="parent"-->
<!-- app:layout_constraintTop_toTopOf="parent"-->
<!-- />-->
<View
android:id="#+id/greyPortionView"
android:layout_width="0dp"
android:layout_height="1dp"
android:background="#color/white_four"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/toolbar_tag" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/chatInboxList"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="1dp"
android:background="#null"
app:layout_constraintBottom_toTopOf="#+id/greyPortionViewSecond"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/greyPortionView" />
<TextView
android:id="#+id/noRecentTV"
android:layout_width="0dp"
android:layout_height="48dp"
android:textSize="10sp"
android:gravity="center_vertical"
android:paddingStart="32dp"
android:background="#color/white_seven"
app:layout_constraintTop_toBottomOf="#id/toolbar_tag"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:textColor="#color/brownish_grey"
android:letterSpacing="0.03"
android:lineSpacingExtra="3sp"
android:text="No Recent Chat Found"
/>
<ImageView
android:id="#+id/add_chat_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#drawable/ic_add_icon"
android:layout_margin="16dp"
android:background="#drawable/circle_shadow"
android:elevation="4dp"
android:translationZ="4dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toTopOf="#+id/greyPortionViewSecond"
/>
<View
android:id="#+id/greyPortionViewSecond"
android:layout_width="0dp"
android:layout_height="1dp"
android:background="#color/white_four"
android:layout_marginBottom="16dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toTopOf="#+id/fab_messgae" />
<ImageView
android:id="#+id/fab_messgae"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="#{() -> handler.searchUser()}"
android:scaleType="fitXY"
app:layout_constraintBottom_toTopOf="#+id/ic_chat"
app:backgroundTint="#android:color/transparent"
app:layout_constraintStart_toEndOf="#+id/ic_chat"
app:layout_constraintEnd_toStartOf="#+id/ic_chat"
app:srcCompat="#drawable/ic_menuchat_icon" />
<TextView
android:id="#+id/ic_chat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="10sp"
android:layout_marginBottom="16dp"
android:textColor="#color/aqua_marine"
android:letterSpacing="0.03"
android:lineSpacingExtra="-4sp"
android:text="#string/chat"
app:layout_constraintEnd_toStartOf="#id/ic_profile_tv"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:gravity="center_horizontal"
/>
<ImageView
android:id="#+id/fab_profile"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="#{() -> handler.searchUser()}"
android:scaleType="fitXY"
app:layout_constraintBottom_toTopOf="#+id/ic_profile_tv"
app:backgroundTint="#android:color/transparent"
app:layout_constraintStart_toEndOf="#+id/ic_profile_tv"
app:layout_constraintEnd_toStartOf="#+id/ic_profile_tv"
app:srcCompat="#drawable/ic_menucontacts_icon" />
<TextView
android:id="#+id/ic_profile_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="10sp"
android:layout_marginBottom="16dp"
android:text="#string/contacts"
android:textColor="#000000"
android:letterSpacing="0.03"
android:lineSpacingExtra="-4sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#id/ic_chat"
android:gravity="center_horizontal"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
</layout>

Related

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>

View Manipulation not working while MotionLayout is in progress

I am trying create a layout where the view would scroll up , but inside a view there is a component that should be not scroll out of view and docked at the top and rest of the content scroll below it, the component would scroll till it hit the top of the screen.
So For the docking part I used motion layout and where it is constraint to the top of parent in the end state. the I placed a nested scrollview after the docked component. this is my motion scene file -
<Transition
android:id="#+id/scrollTransition"
motion:constraintSetEnd="#+id/end"
motion:constraintSetStart="#id/start"
motion:duration="1000">
<KeyFrameSet>
</KeyFrameSet>
<OnSwipe
motion:dragDirection="dragUp"
motion:onTouchUp="stop"
motion:touchAnchorId="#id/merchant_details"
motion:moveWhenScrollAtTop="true"/>
</Transition>
<ConstraintSet android:id="#+id/start">
</ConstraintSet>
<ConstraintSet android:id="#+id/end">
<Constraint
android:layout_height="wrap_content"
motion:layout_constraintStart_toStartOf="parent"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintBottom_toTopOf="#id/merchant_details"
android:layout_width="match_parent"
android:id="#+id/product_details" />
<Constraint
android:layout_height="wrap_content"
motion:layout_constraintStart_toStartOf="parent"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintTop_toTopOf="parent"
android:layout_width="match_parent"
android:id="#+id/merchant_details" />
</ConstraintSet>
But it should give the feed that it is naturally scrolling and if the user stops scrolling in the middle of the motion states, so I added the motion:onTouchUp="stop" for that.
this is my layout file -
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.motion.widget.MotionLayout 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"
xmlns:aapt="http://schemas.android.com/aapt"
android:id="#+id/hsmerchantListingRoot"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layoutDescription="#xml/activity_home_services_merchant_listing_scene"
tools:context="com.nearbuy.nearbuymobile.modules.home_services.HomeServicesMerchantListingActivity">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/product_details"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="#dimen/dp_15"
android:visibility="visible"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:visibility="gone">
<com.nearbuy.nearbuymobile.view.infiniteRotationView.InfiniteRotationView
android:id="#+id/productImageCarousel"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<WebView
android:id="#+id/htmlView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="gone"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/productImageCarousel" />
<com.nearbuy.nearbuymobile.view.NB_TextView
android:id="#+id/detailTitle"
style="#style/title_3_b"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="15dp"
android:layout_marginTop="15dp"
android:layout_marginEnd="15dp"
android:textColor="#2b2f31"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/productImageCarousel"
tools:text="Sofa Cleaning" />
<com.nearbuy.nearbuymobile.view.NB_TextView
android:id="#+id/detailDescription"
style="#style/body_2_r"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="15dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="15dp"
android:lineSpacingExtra="4.7sp"
android:textColor="#color/grey_n"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/detailTitle"
tools:text="From cotton upholstery to leather finish, there exists a wide array of sofa designs with a range of materials. All of them pick some amount of dust on a daily basis which cannot be washed away…" />
<com.nearbuy.nearbuymobile.view.NB_TextView
android:id="#+id/readMoreText"
style="#style/body_1_m"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4.7dp"
android:text="Read more"
android:textColor="#color/delight"
android:visibility="gone"
app:layout_constraintStart_toStartOf="#+id/detailDescription"
app:layout_constraintTop_toBottomOf="#+id/detailDescription" />
<androidx.constraintlayout.widget.Barrier
android:id="#+id/bannerBarrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="bottom"
app:constraint_referenced_ids="detailDescription,productImageCarousel,htmlView,detailTitle,readMoreText" />
<ImageView
android:id="#+id/serviceInfoBanner1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:adjustViewBounds="true"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/bannerBarrier"
tools:src="#drawable/test_img1"/>
<ImageView
android:id="#+id/serviceInfoBanner2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:adjustViewBounds="true"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/serviceInfoBanner1"
tools:src="#drawable/test_img1"/>
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/merchant_details"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/product_details"
app:layout_constraintVertical_bias="0.0"
tools:visibility="visible">
<androidx.constraintlayout.widget.Barrier
android:id="#+id/dateFilterBarrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="bottom"
app:constraint_referenced_ids="llDateFilter" />
<LinearLayout
android:id="#+id/llDateFilter"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#f7f7fd"
android:clipToPadding="false"
android:gravity="center_vertical"
android:orientation="horizontal"
android:paddingTop="#dimen/dp_15"
android:paddingBottom="#dimen/dp_10"
android:visibility="gone"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:visibility="visible">
<androidx.cardview.widget.CardView
android:id="#+id/cvMainFilter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/dp_15"
app:cardCornerRadius="#dimen/dp_4"
app:cardElevation="#dimen/dp_2">
<RelativeLayout
android:id="#+id/rlDate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/rounded_corner_gradient_blue"
android:paddingStart="#dimen/dp_10"
android:paddingTop="#dimen/dp_6"
android:paddingEnd="#dimen/dp_10"
android:paddingBottom="#dimen/dp_6">
<com.nearbuy.nearbuymobile.view.NB_TextView
android:id="#+id/tvDateTitle"
style="#style/small_m"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/white"
tools:text="Today" />
<com.nearbuy.nearbuymobile.view.NB_TextView
android:id="#+id/tvDateSubtitle"
style="#style/title_3_m"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/tvDateTitle"
android:layout_marginTop="#dimen/dp_2"
android:textColor="#color/white"
android:visibility="gone"
tools:text="1 Oct" />
<ImageView
android:id="#+id/ivDateDownArrow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/tvDateTitle"
android:layout_marginStart="#dimen/dp_10"
android:layout_marginTop="#dimen/dp_10"
android:layout_toEndOf="#+id/tvDateSubtitle"
android:src="#drawable/arrow_down_white"
android:visibility="gone" />
<com.nearbuy.nearbuymobile.view.NB_TextView
android:id="#+id/tvCount"
style="#style/body_4_m"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_marginLeft="#dimen/dp_10"
android:layout_toRightOf="#+id/tvDateTitle"
android:background="#drawable/white_circle"
android:gravity="center"
android:paddingLeft="#dimen/dp_8"
android:paddingTop="#dimen/dp_5"
android:paddingRight="#dimen/dp_8"
android:paddingBottom="#dimen/dp_5"
android:textColor="#color/delight"
android:visibility="gone"
tools:text="8" />
</RelativeLayout>
</androidx.cardview.widget.CardView>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rvTimeSlots"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipToPadding="false"
android:orientation="horizontal"
android:overScrollMode="never"
android:paddingStart="#dimen/dp_6"
android:paddingEnd="10dp"
android:scrollbars="none"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager" />
</LinearLayout>
<androidx.core.widget.NestedScrollView
android:id="#+id/merchantDetailScrollView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipChildren="false"
android:clipToPadding="false"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/dateFilterBarrier"
app:layout_constraintVertical_bias="0.0"
tools:visibility="visible">
<LinearLayout
android:id="#+id/l1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<include
layout="#layout/home_services_selected_merchant_card"
tools:visibility="gone" />
<ImageView
android:id="#+id/merchantInfoBanner"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitXY"
tools:src="#drawable/test_img1"
tools:visibility="visible" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/merchantAdditionalInfoTabLayout"
android:layout_marginTop="#dimen/dp_15"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.tabs.TabLayout
android:id="#+id/merchantInfoTab"
android:layout_width="0dp"
android:layout_height="30dp"
android:background="#color/white"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:tabIndicatorColor="#color/delight"
app:tabIndicatorHeight="#dimen/dp_2" />
<com.nearbuy.nearbuymobile.view.CustomViewPager
android:id="#+id/merchantInfoTabPager"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/merchantInfoTab" />
</androidx.constraintlayout.widget.ConstraintLayout>
</LinearLayout>
</androidx.core.widget.NestedScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/retryLayout"
android:layout_width="match_parent"
android:layout_height="#dimen/dp_60"
android:background="#color/cb_verify_color"
android:visibility="gone"
app:layout_constraintTop_toBottomOf="#+id/product_details" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/bottomCTACard"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white"
android:elevation="#dimen/dp_30"
android:translationZ="#dimen/dp_10"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent">
<com.nearbuy.nearbuymobile.view.NB_TextView
android:id="#+id/continueBookingCTA"
style="title_2_m"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/bg_groupon_migration"
android:gravity="center"
android:paddingTop="10.3dp"
android:paddingBottom="10.3dp"
android:textColor="#color/white"
android:layout_marginTop="#dimen/dp_15"
android:layout_marginBottom="#dimen/dp_30"
android:layout_marginStart="#dimen/dp_15"
android:layout_marginEnd="#dimen/dp_15"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
tools:text="Continue Booking">
</com.nearbuy.nearbuymobile.view.NB_TextView>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.motion.widget.MotionLayout>
You see the the layout in the include tag? , this is the layout -
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:aapt="http://schemas.android.com/aapt"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#f7f7fd"
android:paddingLeft="#dimen/dp_15"
android:paddingTop="#dimen/dp_10"
android:paddingRight="#dimen/dp_15"
android:paddingBottom="#dimen/dp_15">
<com.nearbuy.nearbuymobile.view.NB_TextView
android:id="#+id/serviceName"
style="#style/body_1_m"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:textColor="#color/black_n"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="3 Seater Sofa Cleaning" />
<com.nearbuy.nearbuymobile.view.NB_TextView
android:id="#+id/mspText"
style="#style/display_3_b"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:textColor="#color/black_n"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="₹349" />
<com.nearbuy.nearbuymobile.view.NB_TextView
android:id="#+id/mrpText"
style="#style/body_4_r"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="1.3dp"
android:textColor="#color/smoke"
app:layout_constraintEnd_toEndOf="#+id/mspText"
app:layout_constraintTop_toBottomOf="#+id/mspText"
app:strike="true"
tools:text="₹1,100" />
<com.nearbuy.nearbuymobile.view.NB_TextView
android:id="#+id/discountText"
style="#style/body_2_m"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="1.3dp"
android:layout_marginEnd="6.7dp"
android:textColor="#ff0000"
app:layout_constraintBottom_toBottomOf="#+id/mrpText"
app:layout_constraintEnd_toStartOf="#+id/mrpText"
app:layout_constraintTop_toBottomOf="#+id/mspText"
tools:text="55% OFF" />
<LinearLayout
android:id="#+id/timeAndInfoLayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginEnd="20dp"
android:orientation="vertical"
app:layout_constraintEnd_toStartOf="#+id/discountText"
app:layout_constraintStart_toStartOf="#+id/serviceName"
app:layout_constraintTop_toBottomOf="#+id/serviceName" />
<com.nearbuy.nearbuymobile.view.NB_TextView
android:id="#+id/freeCancellationText"
style="#style/body_3_m"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="3dp"
android:textColor="#1bbb33"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/timeAndInfoLayout"
tools:text="Free Cancellation" />
<ImageView
android:id="#+id/freeCancellationIcon"
android:layout_width="#dimen/dp_16"
android:layout_height="#dimen/dp_16"
android:layout_marginStart="10dp"
app:layout_constraintBottom_toBottomOf="#+id/freeCancellationText"
app:layout_constraintStart_toEndOf="#+id/freeCancellationText"
app:layout_constraintTop_toTopOf="#+id/freeCancellationText"
app:srcCompat="#drawable/info_green" />
<androidx.constraintlayout.widget.Barrier
android:id="#+id/dividerBarrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="bottom"
app:constraint_referenced_ids="timeAndInfoLayout,discountText,freeCancellationText,serviceName,freeCancellationIcon,mspText,mrpText"
tools:layout_editor_absoluteX="15dp"
tools:layout_editor_absoluteY="658dp" />
<View
android:id="#+id/divider9"
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_marginTop="10dp"
android:background="#d7dff0"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#id/dividerBarrier" />
<com.nearbuy.nearbuymobile.view.NB_TextView
android:id="#+id/merchantNameTitle"
style="#style/small_r"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:textColor="#color/black_n"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/divider9"
tools:text="Service provided by" />
<RelativeLayout
android:id="#+id/merchantRatingLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="7dp"
android:padding="#dimen/dp_4"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/merchantNameTitle">
<aapt:attr name="android:background">
<shape android:shape="rectangle">
<corners android:radius="3dp" />
<solid android:color="#1bbb33" />
</shape>
</aapt:attr>
<com.nearbuy.nearbuymobile.view.NB_TextView
android:id="#+id/merchantRatingText"
style="#style/body_3_m"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/white"
tools:text="4.5" />
<ImageView
android:id="#+id/merchantRatingIcon"
android:layout_width="#dimen/dp_10"
android:layout_height="#dimen/dp_10"
android:layout_centerVertical="true"
android:layout_marginLeft="2.7dp"
android:layout_toRightOf="#id/merchantRatingText"
app:srcCompat="#drawable/hs_merchant_rating_star" />
</RelativeLayout>
<com.nearbuy.nearbuymobile.view.NB_TextView
android:id="#+id/merchantName"
style="#style/body_2_r"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_marginEnd="20dp"
android:textColor="#color/black_n"
app:layout_constraintBottom_toBottomOf="#+id/merchantRatingLayout"
app:layout_constraintEnd_toStartOf="#+id/changeMerchantCTA"
app:layout_constraintStart_toEndOf="#+id/merchantRatingLayout"
app:layout_constraintTop_toTopOf="#+id/merchantRatingLayout"
tools:text="Balaji Deep Cleaning" />
<com.nearbuy.nearbuymobile.view.NB_TextView
android:id="#+id/otherProviderTitle"
style="#style/small_r"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:textColor="#color/black_n"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/divider9"
tools:text="Other Providers available" />
<com.nearbuy.nearbuymobile.view.NB_TextView
android:id="#+id/changeMerchantCTA"
style="#style/body_2_b"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="9dp"
android:gravity="end"
android:textColor="#color/delight"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/otherProviderTitle"
tools:text="Change (3 Available)" />
now whenever I stop between the states and try to manipulate the views, like there is a button , on tap of which a bottom sheet comes up with and I select another merchant and , now when manipulate the layout while it is in progress it doesn't show anything.. just vanishes and once I settle into any of the state, everything works. like this -
the full video is here - full video of Bug
I don't understand the problem, Can anyone tell me why this is happening? and how to solve it.

You can fix it with <Transition .... motion:layoutDuringTransition="honorRequest" >

MotionLayout works by taking a snapshot of the position of the views (calculated by the ConstraintSet) at the starting and ending points. Then interpolating all parameters that change. Once stopped Tat the starting or ending state it operates similar to a ConstraintLayout. If a view is being moved a series of .layout(t,b,l,r) (followed by draw) will be called if the view is being resized then a series of measure(), layout(), then draw() will be called
The starting and ending layouts are defined by the ConstraintSets.
In theory what you are trying to do is possible but difficult and would require some other calls.
If want create a simplified version and file a bug including the 3 main files (MainAcivity, layout & motionScene)

How to adjust constraint layout to scroll view to fit all screen?

I have problem in the bottom layout where my constraint layout does not fill the scroll view entirely(blank space bellow). This is the image evidence of the problem.
In this case I want the gray background to fill that white space below. I tried match parent in everything but it does not work.
This is my xml file that belongs to the layout I uploaded
<?xml version="1.0" encoding="utf-8"?>
<layout 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/layout">
<data>
<variable
name="viewModel"
type="com.repsol.repsolmove.ui.login.LoginViewModel" />
</data>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.core.widget.NestedScrollView
android:id="#+id/scrolView"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/imageView"
android:layout_width="174dp"
android:layout_height="70dp"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="3dp"
android:src="#drawable/ic_img_logo_repsolmove"
app:layout_constraintBottom_toTopOf="#+id/imageBottomMargin"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.repsol.repsolmove.ui.widgets.RepsolInputLayout
android:id="#+id/login"
android:layout_width="0dp"
android:layout_height="105dp"
android:layout_marginTop="30dp"
app:errorText="#string/invalid_card_number"
app:layout_constraintEnd_toStartOf="#+id/marginEnd"
app:layout_constraintStart_toStartOf="#+id/marginStart"
app:layout_constraintTop_toBottomOf="#+id/imageView"
app:titleText="#string/login_title" />
<com.repsol.repsolmove.ui.widgets.RepsolInputLayout
android:id="#+id/password"
android:layout_width="0dp"
android:layout_height="105dp"
app:errorText="#string/invalid_password"
app:isPassword="true"
app:layout_constraintEnd_toStartOf="#+id/marginEnd"
app:layout_constraintStart_toStartOf="#+id/marginStart"
app:layout_constraintTop_toBottomOf="#+id/login"
app:titleText="#string/password_title" />
<TextView
android:id="#+id/newPassword"
style="#style/RepsolText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:layout_marginEnd="8dp"
android:fontFamily="#font/repsol_regular"
android:text="#string/new_password"
android:textSize="16dp"
app:layout_constraintEnd_toStartOf="#+id/marginEnd"
app:layout_constraintTop_toBottomOf="#+id/password" />
<Button
android:id="#+id/btnLogin"
android:layout_width="228dp"
android:layout_height="50dp"
android:layout_marginStart="8dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="8dp"
android:background="#drawable/shape_rounded_fill_rectangle"
android:fontFamily="#font/repsol_regular"
android:text="#string/login"
android:textAllCaps="false"
android:textColor="#android:color/white"
android:textSize="16sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/newPassword" />
<Button
android:id="#+id/btnJoin"
android:layout_width="0dp"
android:layout_height="51dp"
android:layout_marginStart="8dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="32dp"
android:background="#drawable/shape_rounded_rectangle"
android:fontFamily="#font/repsol_regular"
android:text="#string/join"
android:textAllCaps="false"
android:textColor="#color/colorPrimaryDark"
android:textSize="16sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/btnNologin"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="#+id/marginStart"
app:layout_constraintTop_toBottomOf="#+id/btnLogin"
app:layout_constraintVertical_bias="0.75" />
<Button
android:id="#+id/btnNologin"
android:layout_width="0dp"
android:layout_height="51dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="32dp"
android:background="#drawable/shape_rounded_no_stroke_rectangle"
android:fontFamily="#font/repsol_regular"
android:text="#string/enter_without_login"
android:textAllCaps="false"
android:textColor="#color/colorPrimaryDark"
android:textSize="16sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/marginEnd"
app:layout_constraintStart_toEndOf="#+id/btnJoin"
app:layout_constraintTop_toBottomOf="#+id/btnLogin"
app:layout_constraintVertical_bias="0.75" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/imageBottomMargin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.30" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/marginStart"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.10" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/marginEnd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.90" />
<com.repsol.repsolmove.ui.widgets.RepsolDialog
android:id="#+id/dialog"
android:layout_width="match_parent"
android:layout_height="0dp"
android:elevation="10dp"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<include
android:id="#+id/loading"
layout="#layout/loading"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>
</layout>

Add this attribute to your NestScrollView element in xml file
android:fillViewport="true"

Progress bar show under Button

Android studio 3.1
minSdkVersion 21
Here my layout xml:
<?xml version="1.0" encoding="utf-8"?>
<layout 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">
<data>
<variable
name="handler"
type="md.dotfinance.tm.android.ui.activity.AddTraderActivity" />
</data>
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/common_gray_color_bg">
<include
android:id="#+id/jsonViewToolBar"
layout="#layout/tool_bar"
android:title='#{#string/add_trader}'
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/baseTextView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="#dimen/default_margin"
android:layout_marginEnd="8dp"
android:text="#string/base"
android:textSize="13sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/jsonViewToolBar" />
<EditText
android:id="#+id/baseEditText"
style="#style/textViewOneLine"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textSize="20sp"
app:layout_constraintEnd_toEndOf="#+id/baseTextView"
app:layout_constraintStart_toStartOf="#+id/baseTextView"
app:layout_constraintTop_toBottomOf="#+id/baseTextView" />
<TextView
android:id="#+id/quoteTextView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/default_margin"
android:text="#string/quote"
android:textSize="13sp"
app:layout_constraintEnd_toEndOf="#+id/baseTextView"
app:layout_constraintStart_toStartOf="#+id/baseTextView"
app:layout_constraintTop_toBottomOf="#+id/baseEditText" />
<EditText
android:id="#+id/quoteEditText"
style="#style/textViewOneLine"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textSize="13sp"
app:layout_constraintEnd_toEndOf="#+id/baseTextView"
app:layout_constraintStart_toStartOf="#+id/baseTextView"
app:layout_constraintTop_toBottomOf="#+id/quoteTextView" />
<Button
android:id="#+id/startButton"
android:layout_width="0dp"
android:layout_height="#dimen/min_height"
android:layout_marginTop="#dimen/default_margin"
android:layout_marginBottom="#dimen/default_margin"
android:background="#color/button_gray"
android:text="#string/start"
app:layout_constraintEnd_toEndOf="#+id/baseTextView"
app:layout_constraintStart_toStartOf="#+id/baseTextView"
app:layout_constraintTop_toBottomOf="#+id/quoteEditText" />
<include
layout="#layout/progress_bar_layout"
android:visibility="gone" />
</android.support.constraint.ConstraintLayout>
</layout>
Here my progress_bar_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/containerProgressBarLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#4777"
android:clickable="true"
android:focusable="true">
<ProgressBar
android:id="#+id/progressBar"
style="?android:attr/progressBarStyle"
android:layout_width="48dp"
android:layout_height="48dp"
android:indeterminateTint="#color/colorPrimary"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
But when I start app the progress bar is UNDER button.
But I need over button.
How I can do this?

Try to use
of
android.support.constraint.ConstraintLayout
and add
android:elevation="30dp"
to the RelativeLayout tag

The best way to do this is to hide the progress bar or make it's visibility="gone". Make sure you give it an ID so you can invoke it and hide the other layout with buttons and text views. Then show the progress bar when you process a certain request. Make it invisible!!!

Try that
<?xml version="1.0" encoding="utf-8"?>
<layout 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">
<data>
<variable
name="handler"
type="md.dotfinance.tm.android.ui.activity.AddTraderActivity" />
</data>
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
layout="#layout/progress_bar_layout"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/common_gray_color_bg">
<include
android:id="#+id/jsonViewToolBar"
layout="#layout/tool_bar"
android:title='#{#string/add_trader}'
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/baseTextView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="#dimen/default_margin"
android:layout_marginEnd="8dp"
android:text="#string/base"
android:textSize="13sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/jsonViewToolBar" />
<EditText
android:id="#+id/baseEditText"
style="#style/textViewOneLine"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textSize="20sp"
app:layout_constraintEnd_toEndOf="#+id/baseTextView"
app:layout_constraintStart_toStartOf="#+id/baseTextView"
app:layout_constraintTop_toBottomOf="#+id/baseTextView" />
<TextView
android:id="#+id/quoteTextView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/default_margin"
android:text="#string/quote"
android:textSize="13sp"
app:layout_constraintEnd_toEndOf="#+id/baseTextView"
app:layout_constraintStart_toStartOf="#+id/baseTextView"
app:layout_constraintTop_toBottomOf="#+id/baseEditText" />
<EditText
android:id="#+id/quoteEditText"
style="#style/textViewOneLine"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textSize="13sp"
app:layout_constraintEnd_toEndOf="#+id/baseTextView"
app:layout_constraintStart_toStartOf="#+id/baseTextView"
app:layout_constraintTop_toBottomOf="#+id/quoteTextView" />
<Button
android:id="#+id/startButton"
android:layout_width="0dp"
android:layout_height="#dimen/min_height"
android:layout_marginTop="#dimen/default_margin"
android:layout_marginBottom="#dimen/default_margin"
android:background="#color/button_gray"
android:text="#string/start"
app:layout_constraintEnd_toEndOf="#+id/baseTextView"
app:layout_constraintStart_toStartOf="#+id/baseTextView"
app:layout_constraintTop_toBottomOf="#+id/quoteEditText" />
</android.support.constraint.ConstraintLayout>
</layout>

Problem with multiple horizontal barriers in ConstraintLayout

I'm banging my head against the barriers of ConstraintLayout (sorry for the pun...)
Here's what I would like to accomplish:
Place a label and an edittext in the "first row". Align their centers vertically. Add a horizontal barrier referencing those two UI elements below them.
Add two buttons in a second row, one left aligned, one right aligned. Have another barrier below those two.
Let a RecyclerView fill all the space below the second barrier.
So here's my attempt at a layout file:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
android:layout_marginBottom="8dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#+id/editText"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#id/top_barrier"
app:layout_constraintVertical_bias=".5"
/>
<EditText
android:id="#+id/editText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:inputType="textPersonName"
android:text="Name"
app:layout_constraintStart_toEndOf="#id/textView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#id/top_barrier"
app:layout_constraintVertical_bias=".5"
/>
<android.support.constraint.Barrier
android:id="#+id/top_barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="bottom"
app:constraint_referenced_ids="textView,editText" />
<!-- Try to cut from here..... -->
<ImageButton
android:id="#+id/imageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/button"
app:layout_constraintHorizontal_bias="1"
app:layout_constraintTop_toBottomOf="#+id/top_barrier"
app:srcCompat="#android:drawable/btn_star" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:text="Button"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/top_barrier"
/>
<android.support.constraint.Barrier
android:id="#+id/lowerBarrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="bottom"
app:constraint_referenced_ids="imageButton,button" />
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginTop="8dp"
app:layout_constraintTop_toTopOf="#+id/lowerBarrier"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
/>
<!-- ..... to here. -->
</android.support.constraint.ConstraintLayout>
Problem is, that the first barrier moves up, as soon as I add something below it. It seems to move to the bottom of the smaller UI element, which seems a bit nonsensical to me.
The layout without the elements between the comments looks like this:
It stops working when I add the elements between the comments:
I'd be very happy, if you could explain what I'm doing wrong.
Cheers
EDIT:
Interestingly enough, I can get a little further by defining the buttons in the second row in reversed order.
But adding a second barrier below those two once again destroys the layout...
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
android:layout_marginBottom="8dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#+id/editText"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#id/top_barrier"
app:layout_constraintVertical_bias=".5"
/>
<EditText
android:id="#+id/editText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:inputType="textPersonName"
android:text="Name"
app:layout_constraintStart_toEndOf="#id/textView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#id/top_barrier"
app:layout_constraintVertical_bias=".5"
/>
<android.support.constraint.Barrier
android:id="#+id/top_barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="bottom"
app:constraint_referenced_ids="textView,editText" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:text="Button"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/top_barrier"
/>
<ImageButton
android:id="#+id/imageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/button"
app:layout_constraintHorizontal_bias="1"
app:layout_constraintTop_toBottomOf="#+id/top_barrier"
app:srcCompat="#android:drawable/btn_star" />
</android.support.constraint.ConstraintLayout>

Imho I don't see anything wrong in Your code.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Name:"
app:layout_constraintBaseline_toBaselineOf="#+id/editText"
app:layout_constraintStart_toStartOf="parent" />
<EditText
android:id="#+id/editText"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/textView"
tools:text="John Smith" />
<android.support.constraint.Barrier
android:id="#+id/top_barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="bottom"
app:constraint_referenced_ids="textView,editText" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/top_barrier" />
<ImageButton
android:id="#+id/imageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/top_barrier"
app:srcCompat="#android:drawable/btn_star" />
<android.support.constraint.Barrier
android:id="#+id/lowerBarrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="bottom"
app:constraint_referenced_ids="button,imageButton" />
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/lowerBarrier" />
<!-- ..... to here. -->
</android.support.constraint.ConstraintLayout>
Preview:
I've changed only constraintVertical_bias for constraintBaseline_toBaselineOf.

Categories

Resources