RecyclerView LinearLayout always appearing on top of other elements

Question

I have this screen called Messages that displays a list of recent messages to the user. In my activity_messages.xml file I have this bit of code:

<View
    android:id="@+id/horizontal_line"
    android:layout_width="351dp"
    android:layout_height="1dp"
    android:layout_marginStart="8dp"
    android:layout_marginLeft="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginRight="8dp"
    android:layout_marginBottom="8dp"
    android:background="@android:color/black"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.47"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="@+id/Game_Button"
    app:layout_constraintVertical_bias="0.216" />

Basically, this block of code creates a horizontal line. Below that horizontal, I want to display the user's recent messages.

Below that horizontal line block of code, I have this code:

<android.support.v4.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:layout_editor_absoluteX="64dp"
    tools:layout_editor_absoluteY="168dp">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:scrollbars="vertical">
    </android.support.v7.widget.RecyclerView>
</android.support.v4.widget.NestedScrollView>

This takes care of displaying the user's recent messages.

Now in my Messages.java file I have this bit of code:

mMessagesLayoutManager = new LinearLayoutManager(Messages.this);
mRecyclerView.setLayoutManager(mMessagesLayoutManager);
mMessagesAdapter = new MessagesAdapter(getDataSetMessages(), Messages.this);
mRecyclerView.setAdapter(mMessagesAdapter);

for(int i = 0; i < 100; i++) {
    MessagesObject obj = new MessagesObject(Integer.toString(i));
    resultsMessages.add(obj);
}
mMessagesAdapter.notifyDataSetChanged();

This code is for testing purposes, but it works. It shows all the user's messages a linear order and I am able to scroll through them. My only problem is when I run the program, the recent messages don't start below the horizontal line. Some of the messages are above the horizontal line and on top of the other elements. I think the first message jumps to position (0,0).

How do I fix this? I would like my messages to appear the way they are right now, just below the horizontal line.

Answer 1

Change this:

<android.support.v4.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:layout_editor_absoluteX="64dp"
    tools:layout_editor_absoluteY="168dp">

to this instead:

<android.support.v4.widget.NestedScrollView
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintTop_toBottomOf="@+id/horizontal_line"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintBottom_toBottomOf="parent">

Two major changes going on here:

• ConstraintLayout doesn't fully support match_parent, so we use 0dp (which means "match constraints") instead.
• Add constraints for all four sides. The start/end constraints make the view fill the screen horizontally, and the top/bottom constraints make the view fill everything from below the line to the bottom of the screen.