Develop Reference

Add Divider to AlertDialog with CustomView

I'd like to add a divider to an alert dialog at the bottom, similar to the one it shows when there are long list views (see image).
However, I've added a customized view, because I want to be able to use a generic layout for all my AlertDialogs in the whole app. Now there is a very huge space between view and buttons. Additionally the listview, which used to have the divider (from the original AlertDialog view), is not available anymore and my layout has it's own recyclerview. (Because they are recommended nowadays.)
I tried adding a divider in my custom view, but this divider is bound to the padding of it's parent and therefore doesn't fill the whole dialog (and is still heavily spaced from the buttons).
So I'd basically like to access the area of the buttons in the alertdialog to add a divider at the top of this view. (Which then would be full width and below the padding of the custom view.) It would be great, if this was possible with the Builder, because I sometimes use positive and negative buttons and sometimes only negative or only positive and customizing all that in a generic layout as well would be a huge effort.
Here's my custom layout (with divider). I'm using the MaterialAlertDialogBuilder. Note: I could remove the padding at the bottom to remove the space, but then it looks smashed and the problem with the width of the divider still isn't fixed.
<?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"
style="#style/AppCompatAlertDialogTheme"
android:padding="?dialogPreferredPadding"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/alert_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="to"
android:textAppearance="#style/TFAlertDialogStyle"
android:textColor="#color/black"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/alert_explanation"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/padding_small"
android:text="#string/lorem"
android:textColor="#color/black"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/alert_title"
tools:visibility="visible" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/alert_options"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/padding_small"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/alert_explanation">
<!--In here will be the options for every alert dialog-->
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/alert_options_recycler"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<View
android:id="#+id/alertDivider"
style="#style/Divider"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Goal:
Edit 1: It should also work with the recyclerview being filled, so it has to scroll, where the current solutions let the recyclerview disappear in the padding. There's 1 1/2 items left, but I can't scroll any further. (Image is without marginTop on Divider, with margin it actually disappears as well)
Solution:
If you don't have a scrolling recyclerview with many items, #shraddha patel s approach works just fine. However, if you have one, to avoid cutting off the last items, you need to use a LinearLayout instead of a ConstraintLayout for the contentview, as shown in this somewhat related bug report: https://github.com/material-components/material-components-android/issues/1336
However, if you have items below the recyclerview, the parent layout still needs to stay a constraint layout or the divider will disappear in scrolling lists.
So the working solution for me now is:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!--Don't ever refactor that to constraint layout.
There's some weird magic making it work only with a LinearLayout.-->
<androidx.appcompat.widget.LinearLayoutCompat
android:orientation="vertical"
android:id="#+id/alert_content_view"
style="#style/AppCompatAlertDialogTheme"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="?dialogPreferredPadding">
<TextView
android:id="#+id/alert_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="TextView"
android:textAppearance="#style/TFAlertDialogStyle"
android:textColor="#color/black"/>
<TextView
android:id="#+id/alert_explanation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/padding_small"
android:text="#string/desc"
android:textColor="#color/black"
tools:visibility="visible" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/alert_options"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/padding_small">
<!--In here will be the options for every alert dialog-->
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/alert_options_recycler"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
//Some views set to visibility = gone
</androidx.appcompat.widget.LinearLayoutCompat>
<View
android:id="#+id/alertDivider"
style="#style/Divider"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>

If you have to implement the above UI using the ConstraintLayout layout then you can use the below code,
<?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">
<androidx.constraintlayout.widget.ConstraintLayout
style="#style/AppCompatAlertDialogTheme"
android:padding="?dialogPreferredPadding"
android:layout_width="match_parent"
android:id="#+id/csLayout"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/alert_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/Title"
android:textColor="#color/black"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/alert_explanation"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="#string/desc"
android:textColor="#color/black"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/alert_title"
tools:visibility="visible" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/alert_options"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/alert_explanation">
<!--In here will be the options for every alert dialog-->
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/alert_options_recycler"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginTop="10dp"
app:layout_constraintTop_toBottomOf="#+id/csLayout"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:background="#color/black" />
</androidx.constraintlayout.widget.ConstraintLayout>

Try using linear layout(Copy this code and try).
<androidx.cardview.widget.CardView 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:orientation="vertical"
app:cardCornerRadius="8dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:weightSum="1">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="10dp">
<TextView
android:id="#+id/alert_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="to"
android:textColor="#color/black"
android:textSize="20sp"
android:textStyle="bold" />
<TextView
android:id="#+id/alert_explanation"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="loremfgdgdfgdgdgdgdgdgdgdgdgdgdgdgdgdgloremfgdgdfgdgdgdgdgdgdgdgdgdgdgdgdgdg"
android:textColor="#color/black"
android:textSize="16sp"
tools:visibility="visible" />
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#color/black" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_marginEnd="20dp"
android:orientation="horizontal"
android:padding="8dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="2dp"
android:text="Cancel"
android:textColor="#color/black"
android:textSize="16sp"
android:textStyle="bold" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="15dp"
android:padding="2dp"
android:text="Ok"
android:textColor="#color/black"
android:textSize="16sp"
android:textStyle="bold"
tools:visibility="visible" />
</LinearLayout>
</LinearLayout>
</androidx.cardview.widget.CardView>

Set proper constraint in Constraint Layout in Android Kotlin

I am creating a chat application. I used stackFromEnd = false and reverseLayout = true to show items from the bottom of screen. In which I used reyclerview and it's working fine, and I am adding the code below with a screenshot. How it looks likes
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#cccccc">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/conversationRecyclerView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingStart="10dp"
android:paddingEnd="10dp"
android:paddingBottom="10dp"
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"
app:layout_constraintVertical_bias="0" />
</androidx.constraintlayout.widget.ConstraintLayout>
The above code is working fine when there is a single item in recyclerView it opens a screen like this
Image 1
But when there are more items the screen look like this
Image 2
Note: This above image is my expected output. Also soft keyboard shift the layout.
Now the main story starts, I want to add editText at bottom of the screen.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#cccccc">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/conversationRecyclerView"
android:layout_width="0dp"
android:layout_height="0dp"
android:paddingStart="10dp"
android:paddingEnd="10dp"
android:paddingBottom="10dp"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
app:layout_constraintBottom_toTopOf="#+id/inputContainer"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/inputContainer"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#ffffff"
android:paddingStart="10dp"
android:paddingTop="14dp"
android:visibility="gone"
android:paddingEnd="10dp"
android:paddingBottom="14dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/conversationRecyclerView"
app:layout_constraintVertical_bias="1.0">
<EditText
android:id="#+id/edittext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="textMultiLine|text|textNoSuggestions"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Problem 1
Image 1 is not getting the correct constraint and it looks like this
and image 2 is working fine and the soft keyboard shifts the layout.
problem 2
I tried some code to solve problem 1 and the soft keyboard is not shifting the 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="match_parent"
android:background="#cccccc">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/conversationRecyclerView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:paddingStart="10dp"
android:paddingEnd="10dp"
android:paddingBottom="10dp"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
app:layout_constrainedHeight="true"
app:layout_constraintBottom_toTopOf="#+id/inputContainer"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/inputContainer"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#ffffff"
android:paddingStart="10dp"
android:paddingTop="14dp"
android:paddingEnd="10dp"
android:paddingBottom="14dp"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintVertical_bias="1.0">
<EditText
android:id="#+id/sendMessageEditText"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
UPDATE
After #Cheticamp suggestion, I added this but not working. It has still a problem 1 issue. It's not resolving.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#cccccc">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/conversationRecyclerView"
android:layout_width="0dp"
android:layout_height="0dp"
android:paddingStart="10dp"
android:paddingEnd="10dp"
android:paddingBottom="10dp"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
app:layout_constrainedHeight="true"
app:layout_constraintBottom_toTopOf="#+id/inputContainer"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/inputContainer"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#ffffff"
android:paddingStart="10dp"
android:paddingTop="14dp"
android:paddingEnd="10dp"
android:paddingBottom="14dp"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
>
<EditText
android:id="#+id/sendMessageEditText"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
UPDATE 1
After #Tenfour04 suggestions, I added some code please have a look. Am I am doing correctly?
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#cccccc">
<FrameLayout
android:id="#+id/conversationRecyclerViewViewWrapper"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/inputContainer"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/conversationRecyclerView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:paddingStart="10dp"
android:paddingEnd="10dp"
android:paddingBottom="10dp"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager" />
</FrameLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/inputContainer"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#ffffff"
android:paddingStart="10dp"
android:paddingTop="14dp"
android:paddingEnd="10dp"
android:paddingBottom="14dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/conversationRecyclerView">
<EditText
android:id="#+id/sendMessageEditText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:inputType="textMultiLine|text|textNoSuggestions"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

The problem is your RecyclerView's height is wrap_content instead of 0dp (a.k.a. "match_constraints"), so it ignores the constraint that it should be above inputContainer.
So instead of making it wrap_content and using vertical bias to try to keep it at the top of the screen, try wrapping it in a FrameLayout and giving it layout gravity of "top". The FrameLayout should use 0dp for height so it can fill the entire space, but not overlap inputContainer. The RecyclerView can use wrap_content for height, and the layout gravity will bias it to the top of the FrameLayout's space. So replace your RecyclerView element with this:
<FrameLayout
android:id="#+id/recyclerViewWrapper"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/inputContainer"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/conversationRecyclerView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:paddingStart="10dp"
android:paddingEnd="10dp"
android:paddingBottom="10dp"
app:layoutManager="LinearLayoutManager"
app:reverseLayout="true"/>
</FrameLayout>
The app:layout_constraintVertical_bias is meaningless on inputContainer because it has no top constraint, so you can remove that.

For problem #1, make the height and the width of the RecyclerView 0dp and let the constraints size it to fill the screen. Also, remove the vertical bias - you don't need it.
btw, never use match_parent in a ConstraintLayout. Always use 0dp and the constraints.
That may solve all your issues with this layout.
Update: I should have scrolled down in your layout.
I take it that you want the RecyclerView to fill the screen except for the EditText on the bottom. In general, nesting layout within a ConstraintLayout is not needed and is considered by many poor design.
Make the changes I suggest above, remove the inner ConstraintLayout and place the two views into a vertical chain like this:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#cccccc">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/conversationRecyclerView"
android:layout_width="0dp"
android:layout_height="0dp"
android:paddingStart="10dp"
android:paddingEnd="10dp"
android:paddingBottom="10dp"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
app:layout_constrainedHeight="true"
app:layout_constraintBottom_toTopOf="#+id/sendMessageEditText"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="#+id/sendMessageEditText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="This is the EditText"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/conversationRecyclerView" />
</androidx.constraintlayout.widget.ConstraintLayout>

Android: ScrollView containing two nested ConstraintLayouts, cant fill screen horizontally

I am having an issue with the following XML:
<?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">
<ScrollView
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="0dp">
<View
android:id="#+id/block"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_marginTop="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="250dp"
android:background="#419E9E9E"
android:orientation="horizontal"
android:paddingTop="8dp"
android:paddingBottom="8dp"
app:layout_constraintTop_toBottomOf="#id/block"></LinearLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/holder"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#+id/linearLayout">
<TextView
android:id="#+id/holderText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="50dp"
android:layout_marginLeft="50dp"
android:layout_marginTop="12sp"
android:gravity="center_vertical"
android:maxLines="4"
android:text="Hello World"
android:textColor="#color/colorPrimaryDark"
android:textSize="24sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/holder" />
<Button
android:id="#+id/Button"
android:layout_width="wrap_content"
android:layout_height="40dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="20dp"
android:layout_marginBottom="20dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>
Vertically, the layout does what I want: it puts the last layout and fills the screen.
However, when the device is flipped horizontally, the bottom portion (the nested constraintlayout) disappears due to the constraint on itself of app:layout_constraintBottom_toBottomOf="parent"
"How do I fill the screen with a second layout while still having it scroll horizontally ?"
I have attached pics and a demo repository to isolate the problem.
Link: https://github.com/taesookim0412/StackOverflow_Question_Android_NestedConstraintLayouts_ScrollView

I've found a solution. Instead of minHeight, you can use
app:layout_constraintHeight_min="100dp"

XML constraint layout: Elements placed on top of each other, fix?

My XML code looks like this:
<?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:id="#+id/constraintLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".BottomNavActivity">
<TextView
android:id="#+id/message"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="10dp"
android:paddingTop="10dp"
android:paddingBottom="10dp"
android:background="#CCB0F0"
android:text="Map"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#id/idCardView" app:layout_constraintEnd_toEndOf="parent"/>
<android.support.v7.widget.CardView
android:id="#+id/idCardView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_marginTop="5dp"
app:cardCornerRadius="4dp" app:layout_constraintTop_toTopOf="parent"
tools:layout_editor_absoluteX="5dp" android:layout_marginBottom="332dp"
app:layout_constraintTop_toBottomOf="#+id/message"
app:layout_constraintBottom_toTopOf="#+id/container">
<fragment android:id="#+id/autocomplete_fragment"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:name="com.google.android.libraries.places.widget.AutocompleteSupportFragment"
/>
</android.support.v7.widget.CardView>
<android.support.constraint.ConstraintLayout
android:layout_width="0dp"
android:layout_height="0dp"
android:id="#+id/container"
app:layout_constraintTop_toBottomOf="#+id/idCardView"
app:layout_constraintBottom_toTopOf="#+id/navigation" app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintHorizontal_bias="0.0" app:layout_constraintVertical_bias="1.0">
</android.support.constraint.ConstraintLayout>
<android.support.design.widget.BottomNavigationView
android:id="#+id/navigation"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="0dp"
android:layout_marginStart="0dp"
android:background="?android:attr/windowBackground"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:menu="#menu/navigation_menu"/>
</android.support.constraint.ConstraintLayout>
I want the TextView on top, followed by the CardView, followed by a ConstraintLayout, followed by the bottomNavigationView. Somehow the elements are stacked on top of each other like this:
I made sure that every element are constrained to the top or bottom of the next element respectively. Still they end up on top of each other. Is there a better way or a fix to this problem?

In card view you added two constraint on top: remove app:layout_constraintTop_toTopOf="parent" and will work.

You don't need to constraint TextView to Carview, only CardView to TextView.
If TextView width is match_parent, you don't need to set right constraint. Only top and left.
remove CarView to parent top constraint
you don't need to constraint CardView to Container, only container to CardView
<TextView
android:id="#+id/message"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="10dp"
android:paddingTop="10dp"
android:paddingBottom="10dp"
android:background="#CCB0F0"
android:text="Map"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
<android.support.v7.widget.CardView
android:id="#+id/idCardView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_marginTop="5dp"
app:cardCornerRadius="4dp"
tools:layout_editor_absoluteX="5dp"
android:layout_marginBottom="332dp"
app:layout_constraintTop_toBottomOf="#+id/message"
app:layout_constraintLeft_toLeftOf="parent"
>
<fragment android:id="#+id/autocomplete_fragment"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:name="com.google.android.libraries.places.widget.AutocompleteSupportFragment"
/>

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.