I have view hierarchy like below:
NestedScrollView > ConstraintLayout > [Layout,Layout, RecyclerView]
I want my RecyclerView to fill remaining space in Nested ScrollView.
My ConstaintLayout has wrap_content layout_height. Child Layouts has fixed height set in dp units. And I want to set RecyclerView height to adjust remaining space inside ConstraintLayout.
I am setting height of ConstraintLayout programatically to calculated value like height of both child Layouts + Screen Height. I nearly works, but RecyclerView with current wrap_content height seem to stretch out of its parent ConstraintLayout boundaries not fitting its bottom margin. If I constraint to bottom of parent ConstrintLayout then it is moved over the above child Layouts content. If I set 0dp height of RecyclerView then it has 0dp height not streching inside available space. Maybe only option is to set height of RecyclerView to fixed dp size programatically ex. onMeasure(), onLayout or other callback methods in Views, Fragments, etc?
Any Idea?
<?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:myapp="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".ui.billing.BillingFragment"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.domain.AppName.base.ui.billing.BillingNestedScrollView
android:layout_width="0dp"
android:layout_height="0dp"
android:overScrollMode="never"
android:fillViewport="true"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:background="#color/theMinteFormBackground">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clickable="true"
android:focusable="true"
android:focusableInTouchMode="true">
<com.domain.AppName.base.utils.design.ShadowLayout
android:id="#+id/creditCardSectionLayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
myapp:sl_shadow_color="#AAD4D4D4"
myapp:sl_shadow_angle="360"
myapp:sl_shadow_distance="0dp"
myapp:sl_shadow_radius="4dp"
myapp:sl_shadow_top="true"
myapp:sl_shadow_bottom="true"
myapp:sl_shadow_right="true"
myapp:sl_shadow_left="true"
myapp:sl_shadowed="true">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/white">
<com.domain.AppName.base.ui.forms.FormHeaderView
android:id="#+id/creditCardHeaderFormView"
android:layout_width="0dp"
android:layout_height="50dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
myapp:labelText="#string/billing_payment_info_section_header"
style="#style/FormSectionHeaderStyle" />
<Button
android:id="#+id/cancelCreditCardButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/payment_info_form_cancel_button_title"
app:layout_constraintEnd_toEndOf="#id/creditCardHeaderFormView"
app:layout_constraintTop_toTopOf="#id/creditCardHeaderFormView"
app:layout_constraintBottom_toBottomOf="#id/creditCardHeaderFormView"
style="#style/CancelCreditCardButtonStyle"
android:visibility="invisible" />
<Button
android:id="#+id/scanCreditCardButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/payment_info_form_scan_card_button_title"
app:layout_constraintEnd_toEndOf="#id/creditCardHeaderFormView"
app:layout_constraintTop_toTopOf="#id/creditCardHeaderFormView"
app:layout_constraintBottom_toBottomOf="#id/creditCardHeaderFormView"
style="#style/ScanCreditCardButtonStyle" />
<com.domain.AppName.base.ui.forms.material.ValidableCardNumberInput
android:id="#+id/cardNumberInput"
android:layout_width="0dp"
android:layout_height="50dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/creditCardHeaderFormView"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:layout_marginTop="16dp"
myapp:hintText="#string/payment_info_form_card_number_label"
myapp:inputType="number"
myapp:inputText=""
myapp:iconDrawable="#drawable/baseline_credit_card_24"
myapp:isRequired="true"
myapp:validationEmptyError="#string/validation_card_number_empty"
myapp:requireType="none"
myapp:validationError="#string/validation_card_number_error"
myapp:validationErrorColor="#color/theMinteValidationError" />
<com.domain.AppName.base.ui.forms.material.ValidableExpiryDateInput
android:id="#+id/expirationDateInput"
android:layout_width="0dp"
android:layout_height="50dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/cardNumberInput"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:layout_marginTop="16dp"
myapp:hintText="#string/payment_info_form_expiration_date_label"
myapp:inputType="number"
myapp:inputText=""
myapp:isRequired="true"
myapp:validationEmptyError="#string/validation_expiration_date_empty"
myapp:requireType="regex"
myapp:regexPattern="\\d{1,2}/\\d{2,4}"
myapp:validationError="#string/validation_expiration_date_error"
myapp:validationErrorColor="#color/theMinteValidationError" />
<com.domain.AppName.base.ui.forms.material.ValidableTextInput
android:id="#+id/cvcTextInput"
android:layout_width="0dp"
android:layout_height="50dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/expirationDateInput"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_margin="16dp"
myapp:hintText="#string/payment_info_form_cvc_label"
myapp:inputType="number"
myapp:inputText=""
myapp:isRequired="true"
myapp:validationEmptyError="#string/validation_cvc_empty"
myapp:requireType="none"
myapp:minLength="3"
myapp:maxLength="4"
myapp:validationError="#string/validation_cvc_error"
myapp:validationErrorColor="#color/theMinteValidationError" />
</android.support.constraint.ConstraintLayout>
</com.domain.AppName.base.utils.design.ShadowLayout>
<include
android:id="#+id/googlePayFormView"
layout="#layout/view_google_pay"
android:layout_width="0dp"
android:layout_height="82dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/creditCardSectionLayout" />
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="0dp"
android:layout_height="100dp"
android:layout_margin="16dp"
android:nestedScrollingEnabled="true"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/googlePayFormView" />
<View
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_marginTop="16dp"
app:layout_constraintTop_toBottomOf="#id/recyclerView"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
</android.support.constraint.ConstraintLayout>
</com.domain.AppName.base.ui.billing.BillingNestedScrollView>
</android.support.constraint.ConstraintLayout>
android:fillViewport="true" on the NestedScrollView is forcing the inner ConstraintLayout to fill the remaining space. You can constrain the bottom view to the bottom of the ConstraintLayout and constrain the bottom of the RecyclerView to the top of the bottom view. Set match_constraints on the RecyclerView so it fills the available space - something like this mock-up of your layout.
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.core.widget.NestedScrollView
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#android:color/white"
android:fillViewport="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<FrameLayout
android:id="#+id/creditCardSectionLayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
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="250dp"
android:background="#android:color/darker_gray" />
</FrameLayout>
<FrameLayout
android:id="#+id/googlePayFormView"
android:layout_width="0dp"
android:layout_height="82dp"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:background="#android:color/holo_green_light"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/creditCardSectionLayout" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="16dp"
android:layout_marginBottom="8dp"
android:background="#android:color/holo_red_light"
app:layout_constraintBottom_toTopOf="#+id/view2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/googlePayFormView" />
<View
android:id="#+id/view2"
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>
Related
Is it possible to flatten this layout (only have one ConstraintLayout outside) and preserve the following:
MaterialCardView keeps it square shape and an overall padding of 10dp
ImageView is centered over some squared View (having the background set to a filled oval achieving its cicle-look)
ImageView has a fixed ratio of width/height relative the squared View
TextView is positoned below the squared View with a vertical distance of 10dp
The squared View is centered horizontally inside (or then maybe over?) the MaterialCardView
How it looks right now and should continue to look:
The current layout:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.card.MaterialCardView
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="10dp"
app:cardCornerRadius="10dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:strokeColor="#color/primaryColor"
app:strokeWidth="2dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/imageViewContainer"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#drawable/round_bg"
app:layout_constraintBottom_toTopOf="#id/textView"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_default="percent"
app:layout_constraintHeight_percent=".58"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_default="percent"
app:layout_constraintWidth_percent=".58"
app:tint="#color/primaryTextColor"
tools:src="#drawable/ic_qrcode" />
</androidx.constraintlayout.widget.ConstraintLayout>
<TextView
android:id="#+id/textView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:textAlignment="center"
android:textColor="#color/primaryColor"
android:textSize="17sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/imageViewContainer"
tools:text="ItemName" />
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.card.MaterialCardView>
</androidx.constraintlayout.widget.ConstraintLayout>
Remove parent ContraintLayout, let the MaterialCardview be the parent.
Then keep only one ConstraintLayout since its required if u want to have multiple views inside MaterialCardView.
The second ConstraitLayout aka imageViewContainer can be transformed into View and still it will be pretending to be a container.
<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.card.MaterialCardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
app:cardCornerRadius="10dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:strokeColor="#color/colorPrimary"
app:strokeWidth="2dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp">
<View
android:id="#+id/imageViewContainer"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#drawable/background_rounded"
app:layout_constraintBottom_toTopOf="#id/textView"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_default="percent"
app:layout_constraintHeight_percent=".58"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_default="percent"
app:layout_constraintWidth_percent=".58"
app:tint="#color/gray"
tools:src="#drawable/ic_close" />
<TextView
android:id="#+id/textView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:textAlignment="center"
android:textColor="#color/colorPrimary"
android:textSize="17sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/imageViewContainer"
tools:text="ItemName" />
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.card.MaterialCardView>
I have two view that are fit at the top and bottom of the screen and I have a Recycler view that will sit between them but there is one view that much be packed with recyclview vertically. Something like this
I have to use constraint layout to achieve this. I have tried to achieve this with using packed-chain but that puts the view in center of screen not align to the the top view.
Change the bias of the chain to zero and that will position the RecyclerView and the view below it to the top of the center area. Something like this:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:text="Bottom View"
android:textSize="24sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/textView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:gravity="center"
android:text="Top"
android:textSize="24sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constrainedHeight="true"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:background="#android:color/holo_green_light"
app:layout_constraintBottom_toTopOf="#+id/textView3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView"
app:layout_constraintVertical_bias="0.0"
app:layout_constraintVertical_chainStyle="packed" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="View"
android:textSize="24sp"
app:layout_constraintBottom_toTopOf="#+id/textView2"
app:layout_constraintStart_toStartOf="#+id/recyclerView"
app:layout_constraintTop_toBottomOf="#+id/recyclerView" />
</androidx.constraintlayout.widget.ConstraintLayout>
I think the key point here is that the top and bottom views do not have to be part of the chain.
You could also, maybe, do the same without the chain by constraining the tops of the center views.
The point is not having bottom constraints for these top, RecyclerView and tiny view.
And for your passing through problem, you can use Guideline for your RecycleView's bottom constraint.
This is an example. You should modify to fit to your actual situation. Especially about widths or heights which have px sized may be replaced with wrap_content:
<?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"
tools:context=".MainActivity">
<View
android:id="#+id/topView"
android:layout_width="0dp"
android:layout_height="120px"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#id/guideline"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/topView" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="#id/guideline"
app:layout_constraintGuide_begin="400dp" />
<View
android:id="#+id/tinyView"
android:layout_width="240px"
android:layout_height="120px"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/guideline" />
<View
android:id="#+id/bottomView"
android:layout_width="0dp"
android:layout_height="120px"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
I am trying to overlap components inside a constraint layout. I would like to have the bottom of Team One to be on top of the vs container. I was able to align it by using the app:layout_constraintVertical_bias attribute. When the keyboard expands, the component is not responsive. It will push the Team One over the vs past the point of being flush with top of the vs container.
<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/team_divider_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/team_one_name_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxWidth="200dp"
android:elevation="2dp"
app:layout_constraintEnd_toStartOf="#id/team_two_name"
app:layout_constraintHorizontal_bias=".3"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#id/select_teams_container">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_gravity="center|end"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.textfield.TextInputEditText
android:layout_gravity="center|start"
android:id="#+id/team_one_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#null"
android:focusedByDefault="false"
android:cursorVisible="true"
android:minWidth="100dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#id/color_picker_circle"
android:textCursorDrawable="#null"
android:text="#string/start_game"
android:inputType="textCapCharacters|textNoSuggestions"
android:textAppearance="#style/TextAppearance.MyTheme.Headline1"/>
<com.madrapps.pikolo.HSLColorPicker
android:id="#+id/team_one_color_picker"
android:layout_width="200dp"
android:layout_height="200dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias=".75"
app:layout_constraintStart_toEndOf="#id/team_one_name"
app:layout_constraintTop_toTopOf="parent" />
<com.google.android.material.card.MaterialCardView
android:id="#+id/color_picker_circle"
android:layout_width="50dp"
android:layout_height="50dp"
android:clickable="true"
android:focusable="true"
app:cardElevation="2dp"
app:cardBackgroundColor="#color/color_primary"
app:layout_constraintStart_toEndOf="#id/team_one_name"
app:layout_constraintEnd_toEndOf="#id/team_one_color_picker"
app:layout_constraintBottom_toBottomOf="#id/team_one_name"
app:layout_constraintTop_toTopOf="#id/team_one_name"
app:shapeAppearance="#style/ShapeAppearanceOverlay.MyApp.MaterialCardView.Circle"/>
<ImageButton
android:id="#+id/confirm_team_one_color_btn"
android:layout_width="60dp"
android:layout_height="60dp"
android:background="#drawable/ic_check_circle_black_48dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#id/team_one_color_picker"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias=".25"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</LinearLayout>
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/team_two_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minWidth="100dp"
android:background="#null"
android:cursorVisible="true"
android:focusedByDefault="false"
android:gravity="end"
android:inputType="textCapCharacters|textNoSuggestions"
android:textAppearance="#style/TextAppearance.MyTheme.Headline1"
android:textCursorDrawable="#null"
app:layout_constraintBottom_toTopOf="#id/select_teams_container"
app:layout_constraintEnd_toEndOf="#id/select_teams_container"
app:layout_constraintWidth_percent=".25" />
<com.google.android.material.card.MaterialCardView
android:id="#+id/select_teams_container"
android:layout_width="0dp"
android:layout_height="0dp"
app:strokeWidth="2dp"
app:strokeColor="#color/color_primary"
app:shapeAppearance="#style/ShapeAppearance.MaterialComponents.MediumComponent.TeamSelectCard"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintWidth_percent=".6"
app:layout_constraintHeight_percent=".55">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/team_one_container"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_gravity="center"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/team_two_container"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/team_one_recyclerView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:nestedScrollingEnabled="false"
android:orientation="vertical"
android:overScrollMode="never"
android:weightSum="5"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:itemCount="5"
tools:listitem="#layout/playercard_draggable" />
</androidx.constraintlayout.widget.ConstraintLayout>
<TextView
android:id="#+id/vertical_divider"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="VS"
style="#style/TextAppearance.MyTheme.Headline1"
app:layout_constraintStart_toEndOf="#id/team_one_container"
app:layout_constraintEnd_toStartOf="#id/team_two_container"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/team_two_container"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintStart_toEndOf="#id/team_one_container"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/team_two_recyclerView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:weightSum="5"
android:overScrollMode="never"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:itemCount="5"
tools:listitem="#layout/playercard_draggable" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
When I don't use vertical bias:
When I use vertical bias:
When the keyboard is expanded:
I cant do simple comments on the initial post yet.
But it look as if your team_one_color_picker view has a set height of 200, which is making the parent view not fit in the available screen correctly. Try changing that height param to be something dynamic
Also your team_one_name_container object can be a height of 0dp since it is constrained at the top and bottom.
First, set android:windowSoftInputMode="adjustNotjing" in the manifest file or through the Java code, so that your view does not change when the keyboard is in open or closed state, and then you can use translationY=-10dp or any particular dp depending on your need for Team1 to move it on to the top of vs container.
i have a constraintlayout with a recyclerview. some items of my list not appears because the recyclerview is croping. When i see the constraint bottom of recyclerview to bottom of my parent everything works fine in the bottom, but i have other problem in the top. The recycler view going to the back of my cardview, cuting some itens of top.
is that my 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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/shadow"
android:orientation="vertical"
android:paddingBottom="8dp">
<android.support.v7.widget.CardView
android:id="#+id/myCardView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:cardCornerRadius="4dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="#+id/txtExpenseValue"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="8dp"
android:ems="10"
android:inputType="textPersonName"
android:background="#android:color/transparent"
android:hint="#string/expense_category"
android:drawableLeft="#drawable/ic_folder"
android:drawablePadding="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/btnRegister"
android:layout_width="51dp"
android:layout_height="52dp"
android:layout_marginBottom="8dp"
android:layout_marginRight="10dp"
android:layout_marginTop="8dp"
android:background="#drawable/btn_add_newdesign"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>
<TextView
android:id="#+id/txtTotalPrice"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginLeft="10dp"
android:layout_marginTop="15dp"
android:text="R$ 15.000,00"
android:textSize="24sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#id/myCardView" />
<android.support.v7.widget.RecyclerView
android:id="#+id/myRecyclerView"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#color/shadow"
android:padding="4dp"
android:scrollbars="vertical"
android:layout_marginBottom="4dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/txtTotalPrice" />
</android.support.constraint.ConstraintLayout>
im tried to use margin to correct, but not works.
Constrain the bottom of the RecyclerView to the bottom of the parent and set its android:layout_height to 0dp to match constraints instead of match_parent. It's not recommended to use match_parent for Views contained in a ConstraintLayout as stated in the documentation:
Important: MATCH_PARENT is not recommended for widgets contained in a ConstraintLayout. Similar behavior can be defined by using MATCH_CONSTRAINT with the corresponding left/right or top/bottom constraints being set to "parent".
I use the follow code to display buttons and ViewPager. I want to display ViewPager above of buttons but that it have wrap_content height and width.
<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:id="#+id/linearLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/transparent_hd_image_scrim">
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<LinearLayout
android:id="#+id/buttons_bottom_layout"
android:layout_width="0dp"
android:layout_height="#dimen/hd_preview_buttons_height"
android:layout_marginEnd="#dimen/basic_keyline"
android:layout_marginRight="#dimen/basic_keyline"
android:orientation="horizontal"
android:layout_marginBottom="16dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#id/view_pager"
app:layout_constraintBottom_toBottomOf="parent">
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:visibility="invisible" />
<View
android:id="#+id/stubBottom"
android:layout_width="#dimen/basic_keyline"
android:layout_height="wrap_content" />
<Button
android:id="#+id/send_button"
style="#style/HDPreviewButtonStyle"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#color/colorAccent"
android:text="#string/send"
android:textAllCaps="true" />
</LinearLayout>
What I see on preview.
But on practice on emulator I get this screen.
What I do incorrect?
From the XML code you posted there are several issues that ConstraintLayout might have problem with.
Also ConstraintLayout can help you with nesting layout, which you also mentioned in comments you want to avoid.
I am not sure you want the view pager to behave as wrap rather than match it's constraints.
I created what I think is what you want using what ConstraintLayout has to offer to ease pain of previous layouts.
<android.support.constraint.ConstraintLayout android:id="#+id/linearLayout"
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="#color/transparent_hd_image_scrim">
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toTopOf="#+id/barrier"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="16dp"
android:layout_marginStart="16dp"
android:visibility="invisible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/send_button"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/view_pager" />
<Button
android:id="#+id/send_button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="16dp"
android:layout_marginStart="8dp"
android:background="#color/colorAccent"
android:textAllCaps="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/button"
app:layout_constraintTop_toBottomOf="#+id/view_pager"
tools:text="Send" />
<android.support.constraint.Barrier
android:id="#+id/barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="top"
app:constraint_referenced_ids="send_button, button"
app:layout_constraintBottom_toBottomOf="parent" />
</android.support.constraint.ConstraintLayout>
Bottom buttons are chained horizontally together - this is basically replacement of the previous LinearLayout and the weight usage.
Also added barrier for height of the bottom buttons - this will make sure the height of the view pager will always accomodate to the height of any of them.
If you will actually want to the view pager to have wrap content add these
app:layout_constraintWidth_max="wrap"
app:layout_constraintHeight_max="wrap"