Develop Reference

in kotlin why is my recyclerview not scrolling

I am new to recycler views and beginning with Room databases. I am working on this app that lets the user enter records into Room database. The user enters the info and it gets stored. The top part of the screen is the data entry and the bottom is the recycler view where the records are displayed. Everything is fine until there are enough records to fill the available space. Then the new records just disappear below the screen. There is animation when the user tries to scroll, but the items don't move. I tried to make the items bigger by adding a padding, and strangely enough there is scrolling now, but just to the same item that displayed before.
This is the main.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"
android:padding="10dp"
tools:context=".MainActivity">
<TextView
android:id="#+id/tvNameLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Name"
app:layout_constraintBottom_toBottomOf="#id/etName"
app:layout_constraintTop_toTopOf="#+id/etName"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#+id/etName"
/>
<EditText
android:id="#+id/etName"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:hint="Enter Name"
android:layout_marginStart="16dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toEndOf="#+id/tvNameLabel"/>
<TextView
android:id="#+id/tvEmailLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Email Id"
app:layout_constraintBottom_toBottomOf="#+id/etMailId"
app:layout_constraintEnd_toStartOf="#+id/etMailId"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/etName"/>
<EditText
android:id="#+id/etMailId"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:hint="Enter Email Id"
android:layout_marginStart="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/tvEmailLabel"
app:layout_constraintTop_toBottomOf="#+id/etName"/>
<Button
android:id="#+id/btnAdd"
android:layout_width="match_parent"
android:layout_marginTop="20dp"
android:layout_marginBottom="20dp"
android:layout_height="80dp"
android:text="ADD RECORD"
app:layout_constraintTop_toBottomOf="#+id/etMailId"/>
<TextView
android:id="#+id/tvName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:gravity="center"
android:text="All The Inserted Records"
android:textColor="#color/black"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintTop_toBottomOf="#+id/btnAdd"/>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rvItemsList"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/tvName"
android:visibility="visible"
tools:visibility="visible"
/>
<TextView
android:id="#+id/tvNoRecordsAvailable"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#+id/btnAdd"
android:gravity="center"
android:textSize="18sp"
android:textColor="#997b66"
android:text="There Are No records"
tools:visibility="visible"/>
</androidx.constraintlayout.widget.ConstraintLayout>
and this is the items xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/llMain"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center_vertical"
android:padding="20dp">
<TextView
android:id="#+id/tvName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/black"
android:textSize="16sp"
android:text="Name"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:layout_marginEnd="5dp"
android:textSize="18sp"
android:textStyle="bold"
android:text=":"/>
<TextView
android:id="#+id/tvEmail"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textColor="#color/black"
android:textSize="16sp"
android:text="Email"/>
<ImageView
android:id="#+id/ivEdit"
android:layout_width="50dp"
android:layout_height="50dp"
android:contentDescription="image"
android:foreground="?attr/selectableItemBackgroundBorderless"
android:scaleType="center"
android:src="#drawable/ic_action_edit"/>
<ImageView
android:id="#+id/ivDelete"
android:layout_width="50dp"
android:layout_height="50dp"
android:contentDescription="image"
android:foreground="?attr/selectableItemBackgroundBorderless"
android:scaleType="center"
android:src="#drawable/ic_action_delete"/>
</LinearLayout>
I don't know if any of the other files could be the culprits; but I can add them.
Any help would be greatly appreciated.

Add bottom constraint to recycler, then 0dp to height

I think you need to two things.
Try making the Recycler View in the main.xml file as big vertically as possible. For example android:layout_height="0dp"
I think you should add constraints to the Recycler View. Something like app:layout_constraintStart_toStartOf="parent" and app:layout_constraintEnd_toEndOf="parent"

Your RecyclerView is set with a height of wrap_content - that makes the size of the widget enough to display all its contents. It won't need to scroll, because it's big enough to display everything!
The problem there is you can't see the whole widget, because it's so tall the bottom is off the screen at this point. For scrollable containers, you usually want to constrain their height (or width if it's a horizontal scroll) to give you a "window" into the contents. If the contents are too big to fit in that window, the container will scroll behind that window.
In your case, you probably want to constrain the bottom of your RecyclerView to the bottom of the screen, or maybe the top of that TextView that sits below it:
android:layout_height="0dp"
app:layout_constraintTop_toBottomOf="#id/tvName"
app:layout_constraintBottom_toBottomOf="parent"
That defines the area that the list takes up, as the available space between tvName and the bottom of the layout. 0dp means it has no absolute height, and it'll just size to fit those vertical constraints. You can be a bit more clever with it, but that's the basic idea - define an area for your list to use, and if it's not big enough for the contents, the list will scroll

Fragment constraint layout stretching on top of tabs of the main activity

I've built a Fragment with constraint layout with a ListView, empty view and a total count view. The bottom constraint is working (with an artificial adjustment though), but the top is overlapping the tabs from my MainActivity:
My code is here and it's my first time using constraint 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">
<ListView
android:id="#+id/listView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toTopOf="#id/total_items_view"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.98"
tools:layout_editor_absoluteX="8dp" />
<TextView
android:id="#+id/total_items_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:backgroundTint="#color/colorOrange"
android:padding="4dp"
android:text="Items in this category: "
android:textSize="28sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintRight_toLeftOf="#id/items_number_view"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/items_number_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:backgroundTint="#color/colorOrange"
android:padding="4dp"
android:text="44"
android:textSize="28sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintLeft_toRightOf="#id/total_items_view" />
<RelativeLayout
android:id="#+id/empty_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:visibility="gone">
<ImageView
android:id="#+id/empty_book_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:src="#drawable/orange_orange_book" />
<TextView
android:id="#+id/empty_title_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/empty_book_image"
android:layout_centerHorizontal="true"
android:fontFamily="sans-serif-medium"
android:paddingTop="16dp"
android:text="This category is still empty..."
android:textAppearance="?android:textAppearanceMedium" />
<TextView
android:id="#+id/empty_subtitle_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/empty_title_text"
android:layout_centerHorizontal="true"
android:fontFamily="sans-serif"
android:paddingTop="8dp"
android:text="Let's start with adding books!"
android:textAppearance="?android:textAppearanceSmall"
android:textColor="#A2AAB0" />
</RelativeLayout>
</android.support.constraint.ConstraintLayout>
}
Is there any way to set a constraint to a view in a separate (main) activity? How can I fix this?
I have tried the wrap_content, and the only thing I can think of is manually setting it a little bit off the top, which kind of ruins the concept of constraint layout.
Thanks.

You cannot apply constraint outside constraint layout. The problem is with parent layout, it seems like your view pager is overlapping tab layout.

First of all, do not use match_parent in ConstraintLayout, just eg. if you want to make view match screen width use
android:layout_width="0dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
The thing why it overlapping is that you probably do not limit top of your list (or list container) to bottom of this top view like
app:layout_constraintTop_toBottomOf="#+id/top_view"

Your ListView's height is set to wrap_content in which case it will expand as much as it needs to and overlap other views. If you want to use wrap_content and enforce the constraints of the view at the same time, you need to add app:layout_constrainedHeight="true" attribute to to your ListView.

LinearLayout child weight not working properly

I'm trying to build the screen from picture on a tablet.
Inside fragment i have a RecyclerView with items. Each item has as root a LinearLayout. and has exactly 8 children spread horizontally with weight 1 (as in below code). The first cell on each row is a TextView and the other cells are a CustomView (a vertical LinearLayout with 2 TextViews).
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:layout_marginTop="5dp"
android:orientation="horizontal" />
<TextView
android:id="#+id/item_id"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_margin="2dp"
android:layout_weight="1"
android:background="#drawable/item_border"
android:drawableTop="#drawable/ic_id"
android:fontFamily="#font/cabin_bold"
android:gravity="center"
android:padding="5dp"
android:text="#string/mock"
android:textColor="#android:color/black"
android:textSize="17sp" />
<CustomView X 7 times
android:id="#+id/item_attr1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_margin="2dp"
android:layout_weight="1"
app:titleText="Mock" />
</LinearLayout>
Given that, the row's children are not spread correctly on width, as you can see in the image. I've tried with weightSum attribute to row's root LinearLayout, but no luck. I've noticed that this issue appears (especially) when the first child of the row (which is a TextView) has a many characters.
Here is fragment's layout:
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/rootLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#F1F1F1">
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="8dp"
app:layoutManager="LinearLayoutManager" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/add_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="30dp"
android:src="#android:drawable/ic_input_add"
android:tint="#android:color/white"
app:backgroundTint="#android:color/holo_blue_dark"
app:fabSize="normal" />
<TextView
android:id="#+id/loading_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:fontFamily="#font/roboto_light"
android:text="#string/loading"
android:textSize="23sp"
android:visibility="gone" />
</android.support.design.widget.CoordinatorLayout>
Any ideas are appreciated

On the TextView:
<TextView
...
android:maxLines="1"
android:maxLength="8"
android:ellipsize="end"/>
This will prevent the TextViews from becoming too big. You can play about with the maxLength attribute to see which will fit your scenario better.

Your LinearLayout should encompass the rest of the code it's self closing now. Replace the closing tag /> with >
Close the LinearLayout below the custom view

Constraint Layout Getting a default top margin for imageview

I am trying to create a layout using constraint layout, with an ImageView on top, a button in the ImageView, a TextView below it and then another TextView below it. Following is the xml:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
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:layout_margin="10dp"
app:cardElevation="4dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/white">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/news_image1"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="16:9"
android:scaleType="centerCrop"
android:adjustViewBounds="true"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="0dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintBottom_toTopOf="#+id/news_title1"/>
<ImageButton
android:id="#+id/news_share_button_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:src="#drawable/share_button_big"
app:layout_constraintBottom_toBottomOf="#+id/news_image1"
app:layout_constraintRight_toRightOf="#+id/news_image1"
android:layout_marginRight="15dp"
android:layout_marginEnd="15dp"/>
<TextView
android:id="#+id/news_title1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:gravity="center_vertical|start"
android:layout_alignParentBottom="true"
android:lines="3"
android:ellipsize="end"
app:layout_constraintTop_toBottomOf="#+id/news_image1"
app:layout_constraintBottom_toTopOf="#+id/news_read_more1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:textColor="#color/colorPrimaryText"
android:layout_margin="#dimen/news_cell0_textview_margin"
android:textSize="12sp"
android:typeface="monospace" />
<TextView
android:id="#+id/news_read_more1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:gravity="center_vertical|start"
android:layout_alignParentBottom="true"
android:lines="1"
android:ellipsize="end"
app:layout_constraintTop_toBottomOf="#+id/news_title1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
android:textColor="#color/read_more_text_color"
android:text="#string/news_read_more"
android:layout_margin="#dimen/news_cell0_textview_margin"
android:textSize="10sp" />
</android.support.constraint.ConstraintLayout>
</RelativeLayout>
</android.support.v7.widget.CardView>
Everything is correct except for a small margin on top of the first ImageView. Whatever I do I cannot get rid of that margin. See the image below.
Please note the margin between the top of the ImageView and the card, that is what is troubling me.

Your news_image, news_title1, and news_read_more1 views form a chain. Apparently, though I cannot find documentation on this, all views in a vertical chain will share vertical margins. In other words, applying a layout_marginTop or layout_marginBottom attribute to one of those three views will wind up applying it to all three of them.
You will have to re-allocate your margins, keeping this in mind.
Edit
Looks like the behavior is a little more sophisticated than I thought. First of all, it looks like it only applies to views with the spread "chain style" (which is the default). Second, it looks like top margin is applied to the view it is specified on as well as all views above that one in the chain, while bottom margin is applied to the view it is specified on as well as all views below that one in the chain. Finally, it appears that margins are cumulative (so if you had 10dp top margin on your bottom view and 20dp top margin on your middle view, the final result would be 30dp on your top view, 30dp on your middle view, and 10dp on your bottom view).
As for how to solve this problem in your specific case? You should be able to use left/right margins without issue. And then probably you should use bottom margin on your top view to space the three views out.
Edit #2
Muthukrishnan's answer made me realize that you could solve this problem by simply removing the chain from your views. If you delete the app:layout_constraintBottom_toTopOf="#+id/news_title1" constraint from your ImageView, that will break the chain and now the vertical margins aren't shared.

Thanks to the great starter by Ben P, I managed to figure out a solution. There are three(plus one weighed) chaining styles available in ConstraintLayout. According to this great tutorial the chaining styles are explained as:
Spread: The views are evenly distributed. E.g.
app:layout_constraintHorizontal_chainStyle=”spread”
app:layout_constraintVertical_chainStyle=”spread”
Spread inside: The first and last view are affixed to the constraints on each end of the chain and the rest are evenly distributed. E.g.
app:layout_constraintHorizontal_chainStyle=”spread_inside”
app:layout_constraintVertical_chainStyle=”spread_inside”
Packed: The views are packed together (after margins are accounted for). You can then adjust the whole chain’s bias (left/right or up/down) by changing the chain’s head view bias. E.g.
app:layout_constraintHorizontal_chainStyle=”packed”
app:layout_constraintVertical_chainStyle=”packed”
Weighted: When the chain is set to either spread or spread inside, you can fill the remaining space by setting one or more views to “match constraints” (0dp). By default, the space is evenly distributed between each view that's set to "match constraints," but you can assign a weight of importance to each view using thelayout_constraintHorizontal_weight and layout_constraintVertical_weight attributes. If you're familiar with layout_weight in a linear layout, this works the same way. So the view with the highest weight value gets the most amount of space; views that have the same weight get the same amount of space.
spread is the default chaining style. I changed it to spread_inside so that the first and last views are affixed to the constraints on each end of the chain(hence obeying the margins provided). The xml now looks like:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
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:layout_margin="10dp"
app:cardElevation="4dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/white">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/news_image1"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="16:9"
android:scaleType="centerCrop"
android:adjustViewBounds="true"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="0dp"
app:layout_constraintVertical_chainStyle="spread_inside"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintBottom_toTopOf="#+id/news_title1"/>
<ImageButton
android:id="#+id/news_share_button_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:src="#drawable/share_button_big"
app:layout_constraintBottom_toBottomOf="#+id/news_image1"
app:layout_constraintRight_toRightOf="#+id/news_image1"
android:layout_marginRight="15dp"
android:layout_marginEnd="15dp"/>
<TextView
android:id="#+id/news_title1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:gravity="center_vertical|start"
android:layout_alignParentBottom="true"
android:lines="3"
android:ellipsize="end"
app:layout_constraintVertical_chainStyle="spread_inside"
app:layout_constraintTop_toBottomOf="#+id/news_image1"
app:layout_constraintBottom_toTopOf="#+id/news_read_more1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:textColor="#color/colorPrimaryText"
android:layout_margin="#dimen/news_cell0_textview_margin"
android:textSize="12sp"
android:typeface="monospace" />
<TextView
android:id="#+id/news_read_more1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:gravity="center_vertical|start"
android:layout_alignParentBottom="true"
android:lines="1"
android:ellipsize="end"
app:layout_constraintVertical_chainStyle="spread_inside"
app:layout_constraintTop_toBottomOf="#+id/news_title1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
android:textColor="#color/read_more_text_color"
android:text="#string/news_read_more"
android:layout_margin="#dimen/news_cell0_textview_margin"
android:textSize="10sp" />
</android.support.constraint.ConstraintLayout>
</RelativeLayout>
</android.support.v7.widget.CardView>

Try this, I remove app:layout_constraintTop_toTopOf="parent" in your layout it works
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
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:layout_margin="10dp"
app:cardElevation="4dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/news_image1"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="16:9"
android:scaleType="centerCrop"
android:adjustViewBounds="true"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"/>
<ImageButton
android:id="#+id/news_share_button_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:src="#drawable/ic_menu_share"
app:layout_constraintBottom_toBottomOf="#+id/news_image1"
app:layout_constraintRight_toRightOf="#+id/news_image1"
android:layout_marginRight="15dp"
android:layout_marginEnd="15dp"/>
<AliasTextView
android:id="#+id/news_title1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:gravity="center_vertical|start"
android:layout_alignParentBottom="true"
android:lines="3"
android:ellipsize="end"
app:layout_constraintTop_toBottomOf="#+id/news_image1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:textColor="#color/colorPrimaryText"
android:layout_margin="#dimen/news_cell0_textview_margin"
android:textSize="12sp"
android:typeface="monospace" />
<TextView
android:id="#+id/news_read_more1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:gravity="center_vertical|start"
android:layout_alignParentBottom="true"
android:lines="1"
android:ellipsize="end"
app:layout_constraintTop_toBottomOf="#+id/news_title1"
app:layout_constraintLeft_toLeftOf="parent"
android:textColor="#color/read_more_text_color"
android:text="#string/news_read_more"
android:layout_margin="#dimen/news_cell0_textview_margin"
android:textSize="10sp" />
</android.support.constraint.ConstraintLayout>
</RelativeLayout>
</android.support.v7.widget.CardView>

Button is behind the ListView in FrameLayout

I have a FrameLayout that consists of a list view and a button. The whole point of the FrameLayout is that elements that are after other elements will be displayed above them.
Since the button code is below the ListView code, I expected the button will always be on top, but it isn't. I can't figure it out - as soon as I get enough items in my list, the button is underneath it and it becomes obsolete.
XML:
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ListView
android:id="#+id/lvMovies"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:background="#fff"
android:elevation="3dp"
android:paddingTop="8dp" />
<Button
android:id="#+id/btnAddMovie"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_gravity="bottom|end"
android:layout_marginBottom="16dp"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:background="#drawable/raised_action_button"
android:elevation="5dp"
android:fontFamily="sans-serif-light"
android:gravity="center"
android:text="+"
android:textColor="#ffffff"
android:textSize="30sp" />
</FrameLayout>

From developer.android:
FrameLayout is designed to block out an area on the screen to display
a single item. Generally, FrameLayout should be used to hold a single
child view,
The current dimensions of the framelayout is the entire screen. If I was to use the entire screen for the above layout I would do something like the following:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="5"
android:orientation="horizontal">
<ListView
android:id="#+id/lvMovies"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:background="#fff"
android:elevation="3dp"
android:paddingTop="8dp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal">
<Button
android:id="#+id/btnAddMovie"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_gravity="bottom|end"
android:layout_marginBottom="16dp"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:background="#drawable/raised_action_button"
android:elevation="5dp"
android:fontFamily="sans-serif-light"
android:gravity="center"
android:text="+"
android:textColor="#ffffff"
android:textSize="30sp" />
</LinearLayout>
</LinearLayout>
You can say 0dp weight for either a height or a width, but not both. You then team it up with a layout_weight. In this case the first nested linear layout takes up 5/6ths of the screen, the second 1/6th. Thus your button sits in a protected space that the list view will not block out.
The outer linear layout has a vertical orientation which makes the two inner layouts stack on top of each other, the inners are horizontal to make them go across the entire screen. You will need to tweak those weights to make it work for you.

You can use RelativeLayout for this. If you want button view over the listview android:layout_above="#+id/btnAddMovie" delete this line.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ListView
android:id="#+id/lvMovies"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/btnAddMovie"
android:layout_marginBottom="8dp"
android:background="#fff"
android:elevation="3dp"
android:paddingTop="8dp" />
<Button
android:id="#+id/btnAddMovie"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom|end"
android:layout_marginBottom="16dp"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:elevation="5dp"
android:fontFamily="sans-serif-light"
android:gravity="center"
android:text="+"
android:textColor="#ffffff"
android:textSize="30sp" />
</RelativeLayout>

Remove the elevation property from the list view. That's it.
It seems like the elevation causes the element to be on top of other elements.