Develop Reference

Cannot fully scroll to first and last items with padding on both ends in recycler view

I have recycler view in a home fragment.
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerViewSkills"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:clipToPadding="false"
android:paddingLeft="16dp"
android:paddingRight="16dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView3" />
The Item in the recycler view has layout as follows:
<?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="wrap_content"
android:layout_height="wrap_content"
android:clipToPadding="false"
android:padding="4dp">
<androidx.cardview.widget.CardView
android:id="#id/cardView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:cardElevation="4dp"
android:clipToPadding="false"
app:cardCornerRadius="8dp"
app:contentPaddingLeft="48dp"
app:contentPaddingRight="48dp"
app:contentPaddingTop="24dp"
app:contentPaddingBottom="24dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="#+id/imageViewCategoryIcon"
android:layout_width="#dimen/category_card_icon_size_small"
android:layout_height="#dimen/category_card_icon_size_small"
android:adjustViewBounds="true" />
</androidx.cardview.widget.CardView>
<TextView
android:id="#+id/textViewCategoryName"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="2dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="2dp"
android:ellipsize="end"
android:gravity="center"
android:lines="2"
android:textAlignment="center"
android:textColor="#color/colorPrimary"
app:layout_constraintEnd_toEndOf="#+id/cardView"
app:layout_constraintStart_toStartOf="#+id/cardView"
app:layout_constraintTop_toBottomOf="#+id/cardView"
tools:text="Communication" />
<ImageView
android:id="#+id/imageViewPremium"
android:elevation="8dp"
android:layout_width="24dp"
android:layout_height="24dp"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:src="#drawable/ribbon"
android:visibility="gone"
app:layout_constraintTop_toTopOf="#id/cardView"
app:layout_constraintRight_toRightOf="#id/cardView"
tools:visibility="visible" />
</androidx.constraintlayout.widget.ConstraintLayout>
My problem is when I cannot fully scroll to the first or last item.
When I scroll to the end it looks like image below:
But when I leave it, it goes back to the position as shown below: Somehow when scroll horizontal the recycler view's padding on left and right doesn't work.

Setting both height and width of RecyclerView to 0dp worked for me. (when using constraintLayout)

I think u should use margin instead of padding in your recyclerview :
Change your recyclerview to this :
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerViewSkills"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:clipToPadding="false"
android:layout_marginStart="24dp"
android:layout_marginEnd="24dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView3" />

RecyclerView in NestedScrollView to fill remaining space

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>

Android Constraint Layout Dimension Ratio Not Working with Wrap Content

Hi I just want to display two textviews in constraint layout like below
What I have done so far is horizontally chain these textviews and since I need them to be squares, set the size as a ratio (constraintDimensionRatio).
This is the code.
<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">
<TextView
android:id="#+id/textView3"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#color/colorBlueGrey"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toStartOf="#+id/textView8"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<TextView
android:id="#+id/textView8"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#color/colorBrown"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/textView3"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
Now the issue is when I'm changing the constraint layout's
layout_height
into
wrap_content
like this,
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content">
It will display like below.
Yep. It won't display at all. Any idea to fix this?
I'm using constraint-layout:1.1.0.

You can achieve the desired result by using a vertical Guideline set at 50% of the parent width and constraining both TextViews to it and maintaining 1:1 ratio, like so:
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.constraint.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5" />
<TextView
android:id="#+id/textView3"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="4dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#color/colorBlueGrey"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toStartOf="#+id/guideline"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView8"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="4dp"
android:layout_marginTop="8dp"
android:background="#color/colorBrown"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/guideline"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
Note that the TextViews no longer create a chain and the margins at the end of the first TextView and at the start of the second TextView had to be changed to make it 8dp in total between the views.

you can try the attribute: android:layout_height="0dp" change android:layout_height="wrap_content".

If you want to preserve aspect ratio and parent layout must be "wrap_content" (useful for text views with variable text), you can add a fake view, which keeps aspect ratio and other elements must be constrained to this view:
<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="wrap_content"
android:layout_height="wrap_content">
<View
android:id="#+id/ratio_constraint"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="122:246"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="#id/ratio_constraint"
app:layout_constraintStart_toStartOf="#id/ratio_constraint"
app:layout_constraintTop_toTopOf="#id/ratio_constraint"
tools:text="The TextView which can extend the layout" />
</androidx.constraintlayout.widget.ConstraintLayout>

Constraint Layout display another screen on preview and on practice

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"

Android - Constraint Layout inside another Constraint Layout background not showing

I'm working on an Android activity in which I want to have a header, and the content below the header. I want to have background image that is streched just on the content, but not on the header.
From the picture you can see that my image is streched also on the logo part of the screen, which I don't want.
Here is the xml of my current 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"
android:background="#drawable/background_11"
tools:context=".login.LoginActivity"
>
<ImageView
android:id="#+id/logo"
android:layout_width="381dp"
android:layout_height="156dp"
android:src="#drawable/logo"
tools:ignore="ContentDescription"
app:layout_constraintTop_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginTop="-480dp"
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
app:layout_constraintHorizontal_bias="0.47" />
<ImageView
android:id="#+id/emptyImage"
android:layout_width="384dp"
android:layout_height="445dp"
android:layout_marginBottom="0dp"
android:layout_marginRight="0dp"
android:layout_marginTop="0dp"
android:background="#color/TICK_BACKGROUND"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/logo"
app:layout_constraintVertical_bias="0.0"
app:srcCompat="#drawable/empty" />
<EditText
android:id="#+id/login_usernameTextField"
android:layout_width="291dp"
android:layout_height="63dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="80dp"
android:background="#drawable/rounded_text_edit_shape"
android:ems="10"
android:hint="Username"
android:inputType="textPersonName"
android:textColor="#color/INPUT_TEXT_COLOR"
android:textColorHint="#color/iron"
android:textCursorDrawable="#null"
app:layout_constraintHorizontal_bias="0.506"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/logo"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp" />
<EditText
android:id="#+id/login_passwordTextField"
android:layout_width="291dp"
android:layout_height="63dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="-38dp"
android:background="#drawable/rounded_text_edit_shape"
android:ems="10"
android:hint="Password"
android:textCursorDrawable="#null"
android:inputType="textPassword"
android:textColor="#color/INPUT_TEXT_COLOR"
android:textColorHint="#color/iron"
app:layout_constraintHorizontal_bias="0.506"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/login_usernameTextField"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp" />
<Button
android:id="#+id/login_loginButton"
android:onClick="loginButtonClick"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="30dp"
android:background="#drawable/rounded_button_shape"
android:text="Log In"
android:textColor="#color/white"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/login_passwordTextField"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="8dp"
app:layout_constraintVertical_bias="0.28"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp" />
</android.support.constraint.ConstraintLayout>
I thought about making a parent Layout and inside that Layout add a header and another layout that contains the content. And then set the background inside the content layout like like this: android:background="#drawable/background_11"
Here is the code I tried:
<?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">
<ImageView
android:id="#+id/logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
app:srcCompat="#drawable/logo_2"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="-1dp"
android:layout_marginLeft="0dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintHorizontal_bias="0.0" />
<android.support.constraint.ConstraintLayout
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#drawable/background_11"
app:layout_constraintTop_toBottomOf="#id/logo"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="parent">
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>
However, my background is not showing up. Here are the reuslts:

You can use a ConstraintLayout in an other ConstraintLayout but you need to respect some rules. All direct childs of a ConstraintLayout should have constraint on left,top, right and bottom.
I think that without the constraint left and right of your inner ConstraintLayout, he have a width and height equals to 0dp , he is not displayed.
Have you try to add constraint left and rigth to your inner ConstraintLayout ?
<?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">
<ImageView
android:id="#+id/logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
app:srcCompat="#drawable/logo_2"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="-1dp"
android:layout_marginLeft="0dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintHorizontal_bias="0.0" />
<android.support.constraint.ConstraintLayout
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#drawable/background_11"
app:layout_constraintTop_toBottomOf="#id/logo"
android:layout_marginLeft="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent">
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>
Hope this helps.

I made it work by making a constraint layout inside the Linear Layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical">
<ImageView
android:id="#+id/imageView5"
android:layout_width="wrap_content"
android:layout_height="146dp"
app:srcCompat="#drawable/netset_logo_2" />
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#drawable/background_11">
</android.support.constraint.ConstraintLayout>
</LinearLayout>
Still I don't understand why doesn't my first solution work. Why can't you add a constraint layout inside the constraint layout?

There is no problem adding a constraint layout inside of another constraint layout if you satisfy all constraints.
This would work:
<android.support.constraint.ConstraintLayout
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#drawable/background_11"
android:layout_marginLeft="8dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/logo"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent">
</android.support.constraint.ConstraintLayout>
But also:
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#drawable/background_11"
android:layout_marginLeft="8dp"
app:layout_constraintTop_toBottomOf="#id/logo"
app:layout_constraintBottom_toBottomOf="parent">
</android.support.constraint.ConstraintLayout>
If it is the right approach using a ConstraintLayout for the purpose of setting a background image is another question.
Since you are only using the ConstraintLayout to use the background property, you can skip that layout completely and use a View directly.
Since all views inherit from View, but just add a lot of logic on top of it, in this use case a View is enough to satisfy the needs.
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#drawable/background_11"
android:layout_marginLeft="8dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/logo"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent">
</View>

Well naturally, you made the constraint layout take the entire screen, and the Logo take a smaller subset of it.
so you have the logo on your screen, and beneath it the background.
you might want to set the "background" on a different sub layout inside the main constraint layout.
something like this
<constraintlayout
width:match_parent
height:match_parent>
<logo here/>
<constraintlayout
background_here>
<constraintlayout/>
<constraintlayout/>
hope it makes sense.