Develop Reference

Button not visible when keyboard is shown

I am trying to implement a functionality where the button below EditText moves up when the keyboard is shown, this is a login fragment and I would like to have this functionality similiar to what Instagram has. Right now, when keyboard is pressed, the EditText moves up but the button is hidden. I am attaching the xml below for the same.
<FrameLayout 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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="150dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="120dp"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="20dp">
<ImageButton
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_gravity="center"
android:scaleType="center"
android:src="#drawable/ic_back" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_gravity="bottom"
android:layout_marginBottom="20dp"
android:orientation="vertical" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/root_constraints"
android:layout_width="130dp"
android:layout_height="130dp"
android:layout_gravity="top|center"
android:layout_marginTop="20dp"
android:elevation="20dp"
>
<ImageView
android:id="#+id/std_imageView"
android:layout_width="100dp"
android:layout_height="100dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</FrameLayout>
<androidx.appcompat.widget.AppCompatTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="30dp"
android:layout_marginTop="144dp"
android:layout_marginEnd="30dp"
android:fontFamily="#font/montserrat_bold"
android:textColor="#0B3148"
android:textSize="48sp"
android:textStyle="bold"/>
<androidx.appcompat.widget.AppCompatTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="30dp"
android:layout_marginEnd="30dp"
android:fontFamily="#font/sf_bold"
android:textColor="#0B3148"
android:textSize="14sp"
android:textStyle="bold"
/>
<androidx.appcompat.widget.AppCompatTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="30dp"
android:layout_marginEnd="30dp"
android:fontFamily="#font/sf_regular"
android:textColor="#0B3148"
android:textSize="14sp" />
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.AppCompatEditText
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginStart="30dp"
android:layout_marginTop="30dp"
android:layout_marginEnd="30dp"
android:fontFamily="#font/roboto_light"
android:hint=""
android:visibility="gone"
android:inputType="number"
android:paddingStart="16dp"
android:textSize="14sp"
android:paddingTop="11dp"
android:paddingEnd="0dp"
android:paddingBottom="10dp"
android:textColorHint="#color/color_text"
android:text=""
android:drawablePadding="8dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<androidx.appcompat.widget.AppCompatEditText
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginStart="30dp"
android:layout_marginTop="30dp"
android:layout_marginEnd="30dp"
android:backgroundTint="#E4E4E4"
android:fontFamily="#font/roboto_light"
android:inputType="number"
android:paddingStart="16dp"
android:textSize="14sp"
android:paddingTop="11dp"
android:paddingEnd="0dp"
android:paddingBottom="10dp"
android:textColorHint="#color/color_text"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#+id/et_countrycode"
android:visibility="gone"
android:textSize="12sp"
android:layout_marginTop="6dp"
app:layout_constraintStart_toStartOf="#+id/et_countrycode"
app:layout_constraintEnd_toEndOf="#+id/et_countrycode" />
</androidx.constraintlayout.widget.ConstraintLayout>
<Button
android:id="#+id/finish"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:layout_marginHorizontal="30dp"
android:background="#drawable/bg_button_1"
android:textColor="#111B21"
android:textSize="14sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</LinearLayout>
</FrameLayout>
Note: I have removed a bit of text and backgrounds but remember that all these views are essential
EDIT: I tried the following approach with adjustresize but the button is not overlapping with edittext
<FrameLayout 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">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ScrollView
android:id="#+id/scrollView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="150dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="120dp"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="20dp">
<ImageButton
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_gravity="center"
android:scaleType="center"
android:src="#drawable/back" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_gravity="bottom"
android:layout_marginBottom="20dp"
android:orientation="vertical" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/root_constraints"
android:layout_width="130dp"
android:layout_height="130dp"
android:layout_gravity="top|center"
android:layout_marginTop="20dp"
android:elevation="20dp">
<ImageView
android:id="#+id/std_imageView"
android:layout_width="100dp"
android:layout_height="100dp"
android:backgroundTint="#38A19C"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</FrameLayout>
<androidx.appcompat.widget.AppCompatTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="30dp"
android:layout_marginTop="144dp"
android:layout_marginEnd="30dp"
android:fontFamily="#font/montserrat_bold"
android:textColor="#0B3148"
android:textSize="48sp"
android:textStyle="bold"
/>
<androidx.appcompat.widget.AppCompatTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="30dp"
android:layout_marginEnd="30dp"
android:fontFamily="#font/sf_bold"
android:text="#string/welcome_to_isaac"
android:textColor="#0B3148"
android:textSize="14sp"
android:textStyle="bold" />
<androidx.appcompat.widget.AppCompatTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="30dp"
android:layout_marginEnd="30dp"
android:fontFamily="#font/sf_regular"
android:textColor="#0B3148"
android:textSize="14sp" />
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.AppCompatEditText
android:id="#+id/et_countrycode"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginStart="30dp"
android:layout_marginTop="30dp"
android:layout_marginEnd="30dp"
android:backgroundTint="#E4E4E4"
android:drawablePadding="8dp"
android:fontFamily="#font/roboto_light"
android:hint=""
android:inputType="number"
android:paddingStart="16dp"
android:paddingTop="11dp"
android:paddingEnd="0dp"
android:paddingBottom="10dp"
android:text=""
android:textColorHint="#color/color_text"
android:textSize="14sp"
android:visibility="gone"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.appcompat.widget.AppCompatEditText
android:id="#+id/et_email"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginStart="30dp"
android:layout_marginTop="30dp"
android:layout_marginEnd="30dp"
android:backgroundTint="#E4E4E4"
android:fontFamily="#font/roboto_light"
android:hint="#string/phone_number"
android:inputType="number"
android:paddingStart="16dp"
android:paddingTop="11dp"
android:paddingEnd="0dp"
android:paddingBottom="10dp"
android:textColorHint="#color/color_text"
android:textSize="14sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="6dp"
android:textSize="12sp"
android:visibility="gone"
app:layout_constraintEnd_toEndOf="#+id/et_countrycode"
app:layout_constraintStart_toStartOf="#+id/et_countrycode"
app:layout_constraintTop_toBottomOf="#+id/et_countrycode" />
</androidx.constraintlayout.widget.ConstraintLayout>
</LinearLayout>
</ScrollView>
<Button
android:id="#+id/bt_finish"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginHorizontal="30dp"
android:layout_marginTop="12dp"
android:background="#drawable/bg_button_1"
android:text="#string/continue_txt"
android:textColor="#111B21"
android:textSize="14sp"
app:layout_constraintTop_toBottomOf="#id/scrollView"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</FrameLayout>

Use ConstraintLayout to position the button to the bottom of the screen and then add.
<activity
android:name=".activity"
android:windowSoftInputMode="adjustResize"
android:exported="false" />
...in the activity that would host that Fragment's layout.
Note
The button should be layout in this manner:
<androidx.constraintlayout.widget.ConstraintLayout>
<Button
android:id="#+id/finish"
android:layout_width="match_parent"
android:layout_height="wrap_content"
... />
</androidx.constraintlayout.widget.ConstraintLayout>
... but right now in your code, I can see the button inside a LinearLayout. Change the layout to make the button be positioned at the bottom of a ConstraintLayout and make that ConstraintLayout the parent of that button. The ConstraintLayout should also fill the whole screen.
Edit:
When you use windowSoftInputMode="adjustResize the system positions the element at the bottom of the screen on top of the keyboard and makes your layout shrink in size. So you need to attach a ScrollView to make your layout scrollable.
Like this:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
...>
// Position this scrollView to fill the entire screen
<ScrollView
android:layout_width="0dp"
android:layout_height="0dp"
...>
// This scroll view layout would contain all your other layout views
</ScrollView>
<Button
android:id="#+id/finish"
android:layout_width="match_parent"
android:layout_height="wrap_content"
... />
</androidx.constraintlayout.widget.ConstraintLayout>
Working principle
The button should not be a child view of the ScrollView, it should be a child view of the root view, which is a ConstraintLayout that fills the screen, then the button is positioned to the bottom of the root view. The bottom of the ScrollView should be positioned to the top of the Button. That way, the child views of the ScrollView is scrollable and the button stays on top of the keyboard.

Go to your AndroidMenifest File, Inside you <activity> tag put android:windowSoftInputMode = "adjustpan" it would handle the view after showing up keyboard. if adjustpan doesn't work, there are more property, use one respect to your need.
example:
<activity
android:name=".YourActivityName"
android:windowSoftInputMode="adjustPan"
android:exported="false" />

ListView under constraint layout disappears in preview

Output png
So below is my xml for the activity:
I have migrated to androidx from support libraries.
Is there a way to achieve this?
<?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">
<AutoCompleteTextView
android:id="#+id/partyname"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#drawable/rounded_edittext"
android:layout_marginBottom="8dp"
android:layout_marginEnd="5dp"
android:layout_marginStart="5dp"
android:hint="#string/firm_name"
android:padding="5dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<LinearLayout
android:id="#+id/billform"
android:layout_marginTop="5dp"
android:layout_marginRight="5dp"
android:layout_marginEnd="5dp"
android:layout_marginStart="5dp"
android:layout_marginLeft="5dp"
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="vertical"
android:background="#drawable/rounded_buttons"
app:layout_constraintTop_toBottomOf="#id/partyname">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<AutoCompleteTextView
android:id="#+id/identifier"
android:layout_height="50dp"
android:layout_width="0dp"
android:padding="5dp"
android:layout_marginEnd="8dp"
android:textSize="16sp"
android:textAllCaps="true"
android:hint="#string/code_article"
android:background="#drawable/rounded_edittext"
android:layout_marginRight="8dp"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_toLeftOf="#+id/add"
android:layout_toStartOf="#+id/add" />
<Button
android:id="#+id/add"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/rounded_buttons"
android:text="#string/add"
android:textAllCaps="true"
android:textSize="18sp"
android:layout_centerVertical="true"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true" />
</RelativeLayout>
</LinearLayout>
<ListView
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintTop_toBottomOf="#id/billform"
app:layout_constraintBottom_toBottomOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
For god knows why, the listView is not available in the preview.
It works when the root is linear layout. I tried creating a linear layout within the constraint layout, it didn't work

android:layout_height="0dp"
That might be your problem or if you are talking about not seeing items then it might be a bug in android studio because I tried adding another ConstraintLayout without getting any luck.
This answer might help
I wanted to add my answer as a comment but StackOverflow won't let me.

Try to remove the nested layouts.
Try 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="match_parent">
<AutoCompleteTextView
android:id="#+id/partyname"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginTop="24dp"
android:padding="5dp"
app:layout_constraintTop_toTopOf="parent"
tools:layout_editor_absoluteX="0dp" />
<AutoCompleteTextView
android:id="#+id/identifier"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_toStartOf="#+id/add"
android:layout_toLeftOf="#+id/add"
android:padding="5dp"
android:textAllCaps="true"
android:textSize="16sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/partyname" />
<Button
android:id="#+id/add"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:text="ADD"
android:textAllCaps="true"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/identifier" />
<ListView
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#+id/add" />

change the width from match_parent to 0dp and you can create left and right constraint.The following will work for you.
<ListView
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/billform"
app:layout_constraintBottom_toBottomOf="parent"/>
Update
<?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"
xmlns:tools="http://schemas.android.com/tools">
<AutoCompleteTextView
android:id="#+id/partyname"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#drawable/rounded_edittext"
android:layout_marginBottom="8dp"
android:layout_marginEnd="5dp"
android:layout_marginStart="5dp"
android:hint="#string/firm_name"
android:padding="5dp"
app:layout_constraintTop_toTopOf="parent"/>
<AutoCompleteTextView
android:id="#+id/identifier"
android:layout_height="50dp"
android:layout_width="0dp"
android:padding="5dp"
android:textSize="16sp"
android:textAllCaps="true"
android:hint="#string/code_article"
android:background="#drawable/rounded_edittext"
android:layout_toStartOf="#+id/add"
app:layout_constraintEnd_toStartOf="#+id/add"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/partyname"/>
<Button
android:id="#+id/add"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#drawable/rounded_buttons"
android:text="#string/add"
android:textAllCaps="true"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/partyname"/>
<ListView
android:layout_width="0dp"
android:layout_height="0dp"
tools:listitem="Add items here"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/add"
app:layout_constraintBottom_toBottomOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>

CardView in RecyclerView no gap and textview out of layout

I have a CardView that I put inside a recycler view. The card view that I make doesn't have any gap between each other even though I already add margin and padding. also the text is out of the card view.
This is the result of my code, the text is out of the screen and there is no gap between the card view:
This is the list 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="120dp"
android:layout_margin="5dp">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/tv_sales_invoice"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="invoice"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tv_sales_date"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="date"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_sales_invoice" />
<View
android:id="#+id/top_line"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginTop="5dp"
android:background="#color/colorBlack"
app:layout_constraintTop_toBottomOf="#+id/tv_sales_date" />
<TextView
android:id="#+id/sales_itemname_header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:text="#string/item_name"
android:textSize="16sp"
android:textStyle="bold"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#+id/top_line" />
<TextView
android:id="#+id/sales_itemqty_header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/item_qty"
android:textSize="16sp"
android:textStyle="bold"
app:layout_constraintLeft_toRightOf="#+id/sales_itemname_header"
app:layout_constraintRight_toRightOf="#+id/sales_itemprice_header"
app:layout_constraintTop_toTopOf="#+id/sales_itemname_header" />
<TextView
android:id="#+id/sales_itemprice_header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/item_price"
android:textSize="16sp"
android:textStyle="bold"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#+id/sales_itemname_header" />
<View
android:id="#+id/mid_line"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#color/colorBlack"
app:layout_constraintTop_toBottomOf="#+id/sales_itemname_header" />
<TextView
android:textAlignment="textStart"
android:id="#+id/tv_sales_type"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="item"
android:textSize="18sp"
app:layout_constraintLeft_toLeftOf="#+id/sales_itemname_header"
app:layout_constraintRight_toRightOf="#+id/sales_itemname_header"
app:layout_constraintTop_toBottomOf="#+id/sales_itemname_header" />
<TextView
android:id="#+id/tv_sales_qty"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="qty"
android:textSize="18sp"
app:layout_constraintLeft_toLeftOf="#+id/sales_itemqty_header"
app:layout_constraintRight_toRightOf="#+id/sales_itemqty_header"
app:layout_constraintTop_toBottomOf="#+id/sales_itemqty_header" />
<TextView
android:textAlignment="viewEnd"
android:id="#+id/tv_sales_price"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/price"
android:textSize="18sp"
app:layout_constraintLeft_toLeftOf="#+id/sales_itemprice_header"
app:layout_constraintRight_toRightOf="#+id/sales_itemprice_header"
app:layout_constraintTop_toBottomOf="#+id/sales_itemprice_header" />
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>
this is the recycler view layout:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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=".SalesHistoryActivity">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/tv_sales_history"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/sales_history"
android:textSize="25dp"
android:textStyle="bold"
app:layout_constraintTop_toTopOf="parent" />
<android.support.v7.widget.RecyclerView
android:id="#+id/sales_recycler"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:padding="10dp"
android:nestedScrollingEnabled="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_sales_history"></android.support.v7.widget.RecyclerView>
</android.support.constraint.ConstraintLayout>
</ScrollView>

Below attached code will solve your issue. Hope it will help you. Please try to approve it, if it is useful.
If you have any other question fill free to ask in below comment section. I will try my best to solve that too.
<?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:id="#+id/cardView"
android:layout_width="match_parent"
android:layout_height="120dp"
android:layout_margin="5dp">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/tv_sales_invoice"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="invoice"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tv_sales_date"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="date"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_sales_invoice" />
<View
android:id="#+id/top_line"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginTop="5dp"
android:background="#color/colorBlack"
app:layout_constraintTop_toBottomOf="#+id/tv_sales_date" />
<TextView
android:id="#+id/sales_itemname_header"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:text="item_name"
android:textSize="16sp"
android:textStyle="bold"
app:layout_constraintEnd_toStartOf="#+id/sales_itemqty_header"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#+id/top_line" />
<TextView
android:id="#+id/sales_itemqty_header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:text="item_qty"
android:textSize="16sp"
android:textStyle="bold"
app:layout_constraintEnd_toStartOf="#+id/sales_itemprice_header"
app:layout_constraintLeft_toRightOf="#+id/sales_itemname_header"
app:layout_constraintTop_toTopOf="#+id/sales_itemname_header" />
<TextView
android:id="#+id/sales_itemprice_header"
android:layout_width="90dp"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Item price"
android:textSize="16sp"
android:textStyle="bold"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toEndOf="#id/sales_itemqty_header"
app:layout_constraintTop_toTopOf="#+id/sales_itemname_header" />
<View
android:id="#+id/mid_line"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#color/colorBlack"
app:layout_constraintTop_toBottomOf="#+id/sales_itemname_header" />
<TextView
android:id="#+id/tv_sales_type"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Lorem Ipsum is simply dummy text"
android:textAlignment="textStart"
android:textSize="18sp"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="#+id/sales_itemname_header"
app:layout_constraintRight_toRightOf="#+id/sales_itemname_header"
app:layout_constraintTop_toBottomOf="#+id/mid_line" />
<TextView
android:id="#+id/tv_sales_qty"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:text="qty"
android:textSize="18sp"
app:layout_constraintLeft_toLeftOf="#+id/sales_itemqty_header"
app:layout_constraintRight_toRightOf="#+id/sales_itemqty_header"
app:layout_constraintTop_toBottomOf="#+id/sales_itemqty_header" />
<TextView
android:id="#+id/tv_sales_price"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="end"
android:text="Rp 13000.00"
android:textSize="18sp"
app:layout_constraintLeft_toLeftOf="#+id/sales_itemprice_header"
app:layout_constraintRight_toRightOf="#+id/sales_itemprice_header"
app:layout_constraintTop_toBottomOf="#+id/sales_itemprice_header" />
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>

You should use wrap_content in your card.
<?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_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp">
....

Change RecyclerView CardView background to transparent

Problem Short Version:
I want to make my CardView and RecyclerView background transparent, so
the fragment/activity background should become visible.
Explained:
I have an activity A with background image and fragment B is replaced on its Framelayout , in Fragment B i have recyclerView which with CardView now problem is i want to make every background transparent so only CardView will be visible with actual background of activity
RecyclerView look like this(These white background should be transparent) :
Code
Activity(A)
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/fl"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent"
android:backgroundTint="#android:color/transparent"/>
Fragment(B) RecyclerView
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:backgroundTint="#android:color/transparent"
android:background="#android:color/transparent">
<android.support.v7.widget.RecyclerView
android:id="#+id/rv"
tools:listitem="#layout/layout_video_item"
android:backgroundTint="#android:color/transparent"
android:background="#android:color/transparent"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<TextView
android:id="#+id/tv_not_found"
android:text="No Media Found Yet"
android:layout_gravity="center"
android:gravity="center"
android:visibility="gone"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.CoordinatorLayout>
CardView / Item layout
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="3dp"
android:layout_marginStart="3dp"
android:layout_marginTop="3dp"
android:background="#android:color/transparent">
<android.support.v7.widget.CardView
style="#style/CardView.Light"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardUseCompatPadding="true"
android:background="#android:color/transparent"
android:backgroundTint="#android:color/transparent"
app:cardCornerRadius="5dp"
android:padding="0dp"
app:cardElevation="0dp"
tools:ignore="ContentDescription">
<android.support.constraint.ConstraintLayout xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:background="#color/colorAccent">
<ImageView
android:id="#+id/media_image"
android:layout_width="100dp"
android:layout_height="0dp"
android:scaleType="centerCrop"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#android:color/darker_gray" />
<ImageButton
android:id="#+id/ib_delete"
android:layout_width="30dp"
android:layout_height="40dp"
android:background="#00FFFFFF"
android:padding="12dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:srcCompat="#drawable/ic_delete_white_24dp" />
<ImageButton
android:id="#+id/share_button"
android:layout_width="30dp"
android:layout_height="40dp"
android:background="#00FFFFFF"
android:padding="12dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/ib_delete"
app:srcCompat="#drawable/ic_share_white_24dp" />
<TextView
android:id="#+id/tv_video_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:ellipsize="marquee"
android:singleLine="true"
android:text="Title Test"
android:textAppearance="#style/TextAppearance.AppCompat.Large.Inverse"
android:textColor="#color/colorPrimaryText"
app:layout_constraintEnd_toStartOf="#+id/tv_ribbon"
app:layout_constraintStart_toEndOf="#+id/media_image"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tv_ribbon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/holo_red_light"
android:ellipsize="marquee"
android:fontFamily="monospace"
android:padding="3dp"
android:singleLine="true"
android:text="New"
android:textColor="#color/colorIcons"
android:textSize="14sp"
android:visibility="gone"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tv_path"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="5dp"
android:ellipsize="marquee"
android:singleLine="true"
android:text="subtitle test"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/media_image"
app:layout_constraintTop_toBottomOf="#+id/tv_video_name" />
<ImageView
android:id="#+id/iv_is_audio"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_marginBottom="8dp"
android:layout_marginStart="5dp"
android:layout_marginTop="8dp"
android:visibility="invisible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#+id/media_image"
app:layout_constraintTop_toBottomOf="#+id/tv_duration"
app:srcCompat="#drawable/ic_settings_voice_black_24dp" />
<ImageView
android:id="#+id/iv_is_video"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_marginStart="5dp"
android:visibility="invisible"
app:layout_constraintBottom_toBottomOf="#+id/iv_is_audio"
app:layout_constraintStart_toEndOf="#+id/iv_is_audio"
app:layout_constraintTop_toTopOf="#+id/iv_is_audio"
app:srcCompat="#drawable/ic_theaters" />
<ImageView
android:id="#+id/iv_is_gif"
android:layout_width="35dp"
android:layout_height="30dp"
android:layout_marginStart="5dp"
android:visibility="invisible"
app:layout_constraintBottom_toBottomOf="#+id/iv_is_video"
app:layout_constraintStart_toEndOf="#+id/iv_is_video"
app:layout_constraintTop_toTopOf="#+id/iv_is_video"
app:srcCompat="#drawable/ic_gif" />
<TextView
android:id="#+id/tv_duration"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:layout_marginTop="8dp"
android:text="0:00"
app:layout_constraintStart_toEndOf="#+id/media_image"
app:layout_constraintTop_toBottomOf="#+id/tv_path" />
<TextView
android:id="#+id/tv_size"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="0 MB"
app:layout_constraintBottom_toBottomOf="#+id/tv_duration"
app:layout_constraintStart_toEndOf="#+id/tv_duration"
app:layout_constraintTop_toTopOf="#+id/tv_duration" />
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>
</RelativeLayout>
Reason for asking question:
I know there are lots of SO question out there to get this same task done but my requirements are little different and reason for asking this question is nothing is working for me.
Expectation

Set CardView Background to app:cardBackgroundColor="#00ffffff"

Constraint layout with wrap_content clips it's content

Recently I've bumped into a strange ConstraintLayout behavior. What I tried to do was a simple layout with ImageView, Button and a TextView. Here's the code:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:contentDescription="#null"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:paddingBottom="10dp"
android:paddingEnd="20dp"
android:paddingStart="20dp"
android:text="TEST TEXT"
android:paddingTop="20dp"
app:layout_constraintStart_toStartOf="#id/image"
app:layout_constraintTop_toBottomOf="#+id/button" />
<android.support.v4.widget.Space
android:id="#+id/marginSpacer"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="10dp"
app:layout_constraintBottom_toBottomOf="#id/image" />
<Button
android:id="#id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="20dp"
android:layout_marginStart="20dp"
android:background="#drawable/button_bg"
android:text="BUTTON"
app:layout_constraintTop_toBottomOf="#id/marginSpacer" />
</android.support.constraint.ConstraintLayout>
The ImageView content is loaded using Glide like this:
Glide.with(this).load("https://homepages.cae.wisc.edu/~ece533/images/monarch.png").into(imageView);
Here is how I wanted it to look like:
And here's what I actually got:
My intent was to make the text align relative to the button, not the image, how do I make this happen? Why did the ConstraintLayout clip itself to the ImageView? On the other hand, if I align the text relative to the image everything works great and nothing is clipped.
The full source is available here:
https://github.com/satorikomeiji/ConstraintLayoutBug

Use this for your Button:
#+id/button
instead of
android:id="#id/button"
You'll be able to design urself.
I would suggest you to add loading image:
.placeholder(R.drawable.ic_error_black_48px)
My Layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:layout_editor_absoluteY="81dp">
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:contentDescription="#null" />
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="8dp"
android:paddingBottom="10dp"
android:paddingEnd="20dp"
android:paddingStart="20dp"
android:paddingTop="20dp"
android:text="TEST TEXT"
app:layout_constraintStart_toStartOf="#+id/ButtonLayout"
app:layout_constraintTop_toBottomOf="#+id/ButtonLayout" />
<android.support.constraint.ConstraintLayout
android:id="#+id/ButtonLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="#+id/image"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/image">
<View
android:id="#+id/dummyView"
android:layout_width="match_parent"
android:layout_height="15dp" />
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="20dp"
android:layout_marginStart="20dp"
android:background="#drawable/button_bg"
android:text="BUTTON"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/dummyView" />
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>
Preview:

You need to align something to the bottom of the parent
Align TEST TEXT TextView bottom to the bottom of parent like this:
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:paddingBottom="10dp"
android:paddingEnd="20dp"
android:paddingStart="20dp"
android:text="TEST TEXT"
android:paddingTop="20dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="#id/image"
app:layout_constraintTop_toBottomOf="#+id/button" />
And add plus sign in button id
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="20dp"
android:layout_marginStart="20dp"
android:background="#drawable/button_bg"
android:text="BUTTON"
app:layout_constraintTop_toBottomOf="#id/marginSpacer" />

Try 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/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:layout_editor_absoluteY="81dp">
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:src="#drawable/ic_launcher_background"
android:adjustViewBounds="true"
android:contentDescription="#null" />
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="8dp"
android:paddingBottom="10dp"
android:paddingEnd="20dp"
android:paddingStart="20dp"
android:paddingTop="20dp"
android:text="TEST TEXT"
app:layout_constraintStart_toStartOf="#+id/ButtonLayout"
app:layout_constraintTop_toBottomOf="#+id/ButtonLayout" />
<android.support.constraint.ConstraintLayout
android:id="#+id/ButtonLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="#+id/image"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/image">
<View
android:id="#+id/dummyView"
android:layout_width="match_parent"
android:layout_height="15dp" />
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="20dp"
android:layout_marginStart="20dp"
android:text="BUTTON"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/dummyView" />
</android.support.constraint.ConstraintLayout>