We Keep Coding

Android UI broken when run

I am facing very strange problem, though I am beginner level on Android. after designed my layout file, when i run this android project by using physical device then i actually not find expected UI.
Here is the Layout UI and it's XML code:-
Design:-
XML 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"
tools:context=".activities.DetailedActivity">
<ImageView
android:id="#+id/detailed_img"
android:layout_width="match_parent"
android:layout_height="200dp"
android:scaleType="centerCrop"
android:src="#drawable/ic_launcher_background"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.appcompat.widget.Toolbar
android:id="#+id/detailed_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:title="Product Detailed" />
<androidx.cardview.widget.CardView
android:id="#+id/cardview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:elevation="10dp"
android:translationY="-50dp"
app:cardCornerRadius="10dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/detailed_img">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/detailed_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/amethysta"
android:text="Product Name"
android:textColor="#color/black"
android:textSize="25sp"
android:textStyle="bold" />
<TextView
android:id="#+id/rating"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_toStartOf="#id/my_rating"
android:fontFamily="#font/amethysta"
android:text="4.0"
android:textColor="#color/black"
android:textSize="16sp" />
<RatingBar
android:id="#+id/my_rating"
style="?android:attr/ratingBarStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginTop="10dp"
android:isIndicator="true"
android:numStars="5"
android:stepSize="0.1" />
</RelativeLayout>
<TextView
android:id="#+id/detailed_desc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:fontFamily="#font/amethysta"
android:text="am following the standard example of how to add a RatingBar. To con The problem is that the number of stars doesn't seem to do anything a" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="10dp"
android:fontFamily="#font/amethysta"
android:text="Price"
android:textColor="#color/black"
android:textSize="21sp"
android:textStyle="bold" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/amethysta"
android:text="$"
android:textColor="#color/purple_700"
android:textStyle="bold" />
<TextView
android:id="#+id/detailed_price"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/amethysta"
android:text="20"
android:textColor="#color/purple_700"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:gravity="center_horizontal"
android:orientation="horizontal">
<ImageView
android:id="#+id/add_item"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginRight="7dp"
android:src="#drawable/plusicon" />
<TextView
android:id="#+id/quantity"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1"
android:textSize="30sp"
android:textStyle="bold" />
<ImageView
android:id="#+id/remove_item"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginLeft="7dp"
android:src="#drawable/iconminus" />
</LinearLayout>
</LinearLayout>
</androidx.cardview.widget.CardView>
<Button
android:id="#+id/add_to_cart"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:backgroundTint="#color/pink"
android:drawableLeft="#drawable/mycart"
android:drawableTint="#color/white"
android:padding="14dp"
android:text="Add To Cart"
android:textAllCaps="false"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/buy_now"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/cardview"
app:layout_constraintVertical_bias="1"
app:layout_constraintWidth_percent=".8" />
<Button
android:id="#+id/buy_now"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/ic_baseline_shopping_cart_24"
android:drawableTint="#color/white"
android:padding="14dp"
android:text="Buy Now"
android:textAllCaps="false"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintWidth_percent=".8" />
</androidx.constraintlayout.widget.ConstraintLayout>
And this is my physical devices unexpected output:-
I don't understand why this output act like that and which is totally unexpected. how I resolve this issue.

Since your CardView is not constrained by the buttons at the bottom the CardView will take space beyond those buttons. In the screenshot provided from a real device, it is clear that there is not much space to completely accommodate the contents in the CardView hence it will be pushed beyond the button. You need to add constraints to CardView to align it with the bottom button also you need to add a ScrollView if there is more content that the screen can't fully accommodate. Using this layout may improve the UI
<?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=".activities.DetailedActivity">
<ImageView
android:id="#+id/detailed_img"
android:layout_width="match_parent"
android:layout_height="200dp"
android:scaleType="centerCrop"
android:src="#drawable/ic_launcher_background"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.appcompat.widget.Toolbar
android:id="#+id/detailed_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:title="Product Detailed" />
<androidx.cardview.widget.CardView
android:id="#+id/cardview"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:elevation="10dp"
android:translationY="-50dp"
app:cardCornerRadius="10dp"
app:layout_constraintBottom_toTopOf="#+id/add_to_cart"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/detailed_img">
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/detailed_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/amethysta"
android:text="Product Name"
android:textColor="#color/black"
android:textSize="25sp"
android:textStyle="bold" />
<TextView
android:id="#+id/rating"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_toStartOf="#id/my_rating"
android:fontFamily="#font/amethysta"
android:text="4.0"
android:textColor="#color/black"
android:textSize="16sp" />
<RatingBar
android:id="#+id/my_rating"
style="?android:attr/ratingBarStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginTop="10dp"
android:isIndicator="true"
android:numStars="5"
android:stepSize="0.1" />
</RelativeLayout>
<TextView
android:id="#+id/detailed_desc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:fontFamily="#font/amethysta"
android:text="am following the standard example of how to add a RatingBar. To con The problem is that the number of stars doesn't seem to do anything a" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="10dp"
android:fontFamily="#font/amethysta"
android:text="Price"
android:textColor="#color/black"
android:textSize="21sp"
android:textStyle="bold" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/amethysta"
android:text="$"
android:textColor="#color/purple_700"
android:textStyle="bold" />
<TextView
android:id="#+id/detailed_price"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/amethysta"
android:text="20"
android:textColor="#color/purple_700"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:gravity="center_horizontal"
android:orientation="horizontal">
<ImageView
android:id="#+id/add_item"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginRight="7dp"
android:src="#drawable/plusicon" />
<TextView
android:id="#+id/quantity"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1"
android:textSize="30sp"
android:textStyle="bold" />
<ImageView
android:id="#+id/remove_item"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginLeft="7dp"
android:src="#drawable/iconminus" />
</LinearLayout>
</LinearLayout>
</androidx.core.widget.NestedScrollView>
</androidx.cardview.widget.CardView>
<Button
android:id="#+id/add_to_cart"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:backgroundTint="#color/pink"
android:drawableLeft="#drawable/mycart"
android:drawableTint="#color/white"
android:padding="14dp"
android:text="Add To Cart"
android:textAllCaps="false"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/buy_now"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintWidth_percent=".8" />
<Button
android:id="#+id/buy_now"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/ic_baseline_shopping_cart_24"
android:drawableTint="#color/white"
android:padding="14dp"
android:text="Buy Now"
android:textAllCaps="false"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintWidth_percent=".8" />
</androidx.constraintlayout.widget.ConstraintLayout>

How to display a custom clickable menu from XML under clicked button in Android?

I have a custom XML file for the options menu which I want to display underneath an ImageButton when it is clicked. I want to be able to get the id (or a name, index...) of the item from the menu when the item is selected.
Here's the XML file of recycler_view_item.xml which is the layout with the ImageButton that's supposed to show the menu on click:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="12dp"
android:layout_marginBottom="55dp"
android:gravity="center_horizontal"
android:orientation="vertical"
app:layout_anchorGravity="center_horizontal">
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_margin="0dp"
app:cardBackgroundColor="#182A3E"
app:cardElevation="8dp">
<LinearLayout
android:layout_width="382dp"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_margin="0dp"
android:gravity="center_horizontal"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="43dp"
android:background="#drawable/recycler_item_background"
android:orientation="horizontal">
<TextView
android:id="#+id/tv_item_title"
android:layout_width="200dp"
android:layout_height="43dp"
android:layout_gravity="center_horizontal"
android:layout_marginStart="90dp"
android:layout_marginEnd="0dp"
android:gravity="center|center_horizontal"
android:text="Placeholder"
android:textColor="#F9F9F9"
android:textSize="20sp" />
<ImageButton
android:id="#+id/optionsMenuButton"
android:layout_width="wrap_content"
android:layout_height="20dp"
android:layout_gravity="center_vertical"
android:layout_marginStart="20dp"
android:layout_marginEnd="10dp"
android:layout_weight="1"
android:background="#android:color/transparent"
android:paddingLeft="20dp"
android:paddingTop="3dp"
android:paddingRight="20dp"
app:srcCompat="#drawable/ic_options_menu_icon" />
</LinearLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/subRecyclerView"
android:layout_width="356dp"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="5dp" />
</LinearLayout>
</androidx.cardview.widget.CardView>
</LinearLayout>
Here's the XML file of options_menu_view.xml, which is the menu I want to display on click of the optionsMenuButton from the code above:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/optionsMenu"
android:layout_width="190dp"
android:layout_height="118dp"
android:layout_gravity="center_horizontal"
android:background="#drawable/ic_options_menu_background"
android:orientation="vertical">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/addSubitem"
android:layout_width="match_parent"
android:layout_height="39dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginBottom="10dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:srcCompat="#drawable/ic_add_subitem_icon" />
<TextView
android:id="#+id/addItemText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="46dp"
android:layout_marginTop="11dp"
android:fontFamily="#font/segoe_regular"
android:text="Add Item"
android:textColor="#EBEBEB"
android:textSize="18sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<View
android:layout_width="172dp"
android:layout_height="1dp"
android:layout_gravity="center_horizontal"
android:background="#drawable/options_menu_divider" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/editGroup"
android:layout_width="match_parent"
android:layout_height="39dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginBottom="10dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:srcCompat="#drawable/ic_edit_group_icon" />
<TextView
android:id="#+id/editGroupText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="46dp"
android:layout_marginTop="11dp"
android:fontFamily="#font/segoe_regular"
android:text="Edit Group"
android:textColor="#EBEBEB"
android:textSize="17sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<View
android:layout_width="172dp"
android:layout_height="1dp"
android:layout_gravity="center_horizontal"
android:background="#drawable/options_menu_divider" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/deleteGroup"
android:layout_width="match_parent"
android:layout_height="39dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="10dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_delete_group_icon" />
<TextView
android:id="#+id/deleteGroupText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="46dp"
android:layout_marginTop="9dp"
android:fontFamily="#font/segoe_regular"
android:text="Delete Group"
android:textColor="#C93434"
android:textSize="17sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</LinearLayout>
What I would like it to look like when displayed:
Option Menu Example
I've been trying to find the solution for quite some time, but I'm quite new and to be honest, I don't even know what exactly I'm supposed to be searching for. Your help is greatly appreciated and sorry if this was posted in the past.
Thank you in advance.

Scrollview not scrolling the entire screen

Currently, my scrollview could only scroll the bottom part of the screen. However though, I want the scrollview to be able to scroll the entire screen like how you would be able to normally and smoothly scroll an entire screen within an app. But i can't figure out what went wrong where for me as only i could scroll the bottom portion of the screen.Could anyone advise me on how? Thanks
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
tools:context=".SettingsFragment">
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fillViewport="true"
android:animateLayoutChanges="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:id="#+id/rellay1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/grad"
android:paddingBottom="20dp">
<RelativeLayout
android:id="#+id/imgUser"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="20dp"
android:background="#drawable/circle_border">
<ImageView
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_margin="9dp"
android:adjustViewBounds="true"
android:background="#drawable/circle"
android:padding="3dp"
android:scaleType="centerInside"
android:src="#drawable/ic_user" />
</RelativeLayout>
<TextView
android:id="#+id/tv_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/imgUser"
android:layout_centerHorizontal="true"
android:layout_marginTop="15sp"
android:fontFamily="sans-serif-light"
android:text="Joey Tribbiani"
android:textColor="#color/white"
android:textSize="32sp" />
<TextView
android:id="#+id/tv_address"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/tv_name"
android:layout_centerHorizontal="true"
android:fontFamily="sans-serif"
android:text="new york, usa"
android:textAllCaps="true"
android:textColor="#color/address"
android:textSize="14sp" />
</RelativeLayout>
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#color/followersBg"
android:gravity="center"
android:layout_marginTop="250dp"
android:id="#+id/Rl1"
android:paddingBottom="5dp"
android:paddingTop="5dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:weightSum="80">
<TextView
android:id="#+id/tvTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="15dp"
android:layout_marginLeft="15dp"
android:layout_marginTop="15dp"
android:text="My Order"
android:textColor="#color/white"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:layout_conversion_absoluteHeight="19dp"
tools:layout_conversion_absoluteWidth="58dp" />
<ImageView
android:id="#+id/ivWallet"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="35dp"
android:layout_marginLeft="35dp"
android:layout_marginTop="45dp"
android:src="#drawable/ic_baseline_account_balance_wallet_24"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:layout_conversion_absoluteHeight="24dp"
tools:layout_conversion_absoluteWidth="24dp" />
<TextView
android:id="#+id/tvTitleToBePaid"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="17dp"
android:layout_marginLeft="17dp"
android:layout_marginTop="8dp"
android:text="To be Paid"
android:textColor="#color/white"
android:textSize="13dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/ivWallet"
tools:layout_conversion_absoluteHeight="19dp"
tools:layout_conversion_absoluteWidth="66dp" />
<ImageView
android:id="#+id/ivBox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="75dp"
android:layout_marginLeft="75dp"
android:layout_marginTop="45dp"
android:src="#drawable/ic_baseline_tobedelivered_24"
app:layout_constraintStart_toEndOf="#+id/ivWallet"
app:layout_constraintTop_toTopOf="parent"
tools:layout_conversion_absoluteHeight="24dp"
tools:layout_conversion_absoluteWidth="24dp" />
<TextView
android:id="#+id/tvTobeDelivered"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginLeft="24dp"
android:layout_marginTop="8dp"
android:text="To be Delivered"
android:textColor="#color/white"
android:textSize="13dp"
app:layout_constraintStart_toEndOf="#+id/tvTitleToBePaid"
app:layout_constraintTop_toBottomOf="#+id/ivBox" />
<ImageView
android:id="#+id/ivBox2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="76dp"
android:layout_marginLeft="76dp"
android:layout_marginTop="44dp"
android:src="#drawable/ic_baseline_tobereceived_24"
app:layout_constraintStart_toEndOf="#+id/ivBox"
app:layout_constraintTop_toTopOf="parent"
tools:layout_conversion_absoluteHeight="24dp"
tools:layout_conversion_absoluteWidth="24dp" />
<TextView
android:id="#+id/tvTobeReceived"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginLeft="20dp"
android:layout_marginTop="8dp"
android:text="To be Received"
android:textColor="#color/white"
android:textSize="13dp"
app:layout_constraintStart_toEndOf="#+id/tvTobeDelivered"
app:layout_constraintTop_toBottomOf="#+id/ivBox2" />
<ImageView
android:id="#+id/ivThumbs"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="90dp"
android:layout_marginLeft="90dp"
android:layout_marginTop="45dp"
android:layout_marginEnd="35dp"
android:layout_marginRight="35dp"
android:src="#drawable/ic_baseline_tobeevaluated_24"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/ivBox2"
app:layout_constraintTop_toTopOf="parent"
tools:layout_conversion_absoluteHeight="24dp"
tools:layout_conversion_absoluteWidth="24dp" />
<TextView
android:id="#+id/tvTobeEvaluated"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="18dp"
android:layout_marginLeft="18dp"
android:layout_marginTop="8dp"
android:textSize="13dp"
android:text="To be Evaluated"
android:textColor="#color/white"
app:layout_constraintStart_toEndOf="#+id/tvTobeReceived"
app:layout_constraintTop_toBottomOf="#+id/ivBox2" />
</androidx.constraintlayout.widget.ConstraintLayout>
</RelativeLayout>
<TextView
android:id="#+id/TvRecommendation"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Recommended"
android:layout_marginTop="25dp"
android:layout_centerHorizontal="true"
android:layout_below="#+id/Rl1"/>
<GridView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/GvRecommendations"
android:layout_below="#+id/TvRecommendation"
android:numColumns="2"
android:verticalSpacing="5dp"
/>
</RelativeLayout>
</ScrollView>
</RelativeLayout>

I think your layout is too unnecessary complicated. The highest RelativeLayout does nothing here. Make ScrollView your root view and set it's width and height to match parent.

Try it:
<androidx.core.widget.NestedScrollView
android:layout_width="wrap_content"
android:layout_height="match_parent">
...
</androidx.core.widget.NestedScrollView>
Also You can try to set "android:layout_height="match_parent">" for ScrollView and set "android:layout_height="wrap_content">" for its child layout.

Why is my RecyclerView is invisible inside ScrollView?

I have a scrollView in my xml. There's ConstraintLayout inside of it. In the ConstraintLayout is my RecyclerView. It's invisible. When I change ScrollView to ConstraintLayout everything gets back to normal. Here is my xml:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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_height="match_parent"
android:layout_width="match_parent"
android:fillViewport="true"
tools:context=".ui.fragments.ChannelAudioFragment">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ProgressBar
android:id="#+id/allChannelAudiosProgressBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.google.android.material.textview.MaterialTextView
android:id="#+id/noAudiosTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:visibility="gone"
android:gravity="center|left"
android:text="No audios"
android:layout_marginTop="5dp"
android:textSize="15dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.swiperefreshlayout.widget.SwipeRefreshLayout
android:id="#+id/channelAudiosRefreshSwipe"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:ignore="MissingConstraints">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rvAllChannelAudios"
android:layout_width="match_parent"
android:layout_weight="1"
android:layout_height="match_parent" />
</androidx.swiperefreshlayout.widget.SwipeRefreshLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
I don't get any errors in console. Why is this happening?
UPDATE
Additional info: I'm using it in ViewPager. Here it 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"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".ui.fragments.ChannelFragment">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/channelBlock"
android:layout_width="match_parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:layout_margin="30dp"
android:background="#drawable/main_background"
android:padding="20dp"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/ivChannelImage"
android:layout_width="100dp"
android:layout_height="100dp"
android:src="#drawable/ic_person_flat"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.google.android.material.textview.MaterialTextView
android:id="#+id/channelName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Qewbite"
android:textColor="#color/whiteColor"
android:layout_marginTop="8dp"
android:textSize="26sp"
android:textStyle="bold"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/ivChannelImage" />
<LinearLayout
android:id="#+id/subscriptionBlock"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/channelName"
android:gravity="center_vertical">
<Button
android:id="#+id/subscribeButton"
android:layout_width="wrap_content"
android:textAllCaps="false"
android:layout_height="40dp"
android:textSize="12dp"
android:gravity="center"
android:background="#drawable/subscribed_background"
android:padding="0dp"
app:backgroundTint="#color/colorDark"
android:textColor="#color/whiteColor"
android:layout_marginLeft="5dp"
android:text="Unfollow" />
<ImageButton
android:id="#+id/notificationButton"
android:layout_width="40dp"
android:textAllCaps="false"
android:layout_height="40dp"
android:textSize="12dp"
android:tint="#color/whiteColor"
android:src="#drawable/ic_notification"
app:backgroundTint="#color/colorDark"
android:background="#drawable/subscribe_notification_background"
android:padding="0dp"
android:textColor="#color/whiteColor" />
</LinearLayout>
<View
android:id="#+id/headerHr"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#color/colorNavbarGray"
app:layout_constraintTop_toBottomOf="#id/subscriptionBlock"
android:layout_marginTop="10dp"
/>
<com.google.android.material.textview.MaterialTextView
android:id="#+id/channelSubscribers"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="10M"
android:textColor="#color/whiteColor"
android:layout_marginTop="8dp"
android:textSize="16sp"
android:textStyle="bold"
app:layout_constraintStart_toStartOf="#id/channelSubscribersTitle"
app:layout_constraintEnd_toEndOf="#id/channelSubscribersTitle"
app:layout_constraintTop_toBottomOf="#id/headerHr" />
<com.google.android.material.textview.MaterialTextView
android:id="#+id/channelSubscribersTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Followers"
android:textColor="#color/colorLightGray"
android:textSize="12sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/channelSubscribers" />
<com.google.android.material.textview.MaterialTextView
android:id="#+id/channelListened"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="120M"
android:textColor="#color/whiteColor"
android:layout_marginTop="8dp"
android:textSize="16sp"
android:textStyle="bold"
app:layout_constraintStart_toStartOf="#id/channelListenedTitle"
app:layout_constraintEnd_toEndOf="#id/channelListenedTitle"
app:layout_constraintTop_toBottomOf="#id/headerHr" />
<com.google.android.material.textview.MaterialTextView
android:id="#+id/channelListenedTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Auditions"
android:textColor="#color/colorLightGray"
android:textSize="12sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/channelListened" />
<com.google.android.material.textview.MaterialTextView
android:id="#+id/channelYear"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2021"
android:textColor="#color/whiteColor"
android:layout_marginTop="8dp"
android:textSize="16sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/headerHr" />
<com.google.android.material.textview.MaterialTextView
android:id="#+id/channelYearTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Year"
android:textColor="#color/colorLightGray"
android:textSize="12sp"
app:layout_constraintStart_toStartOf="#id/channelYear"
app:layout_constraintEnd_toEndOf="#id/channelYear"
app:layout_constraintTop_toBottomOf="#id/channelSubscribers" />
</androidx.constraintlayout.widget.ConstraintLayout>
<com.google.android.material.tabs.TabLayout
android:id="#+id/tab"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabSelectedTextColor="#color/colorPrimary"
app:layout_constraintTop_toBottomOf="#id/channelBlock"
app:layout_constraintStart_toStartOf="#id/channelBlock"
app:tabRippleColor="#color/colorGray"
android:layout_marginTop="8dp" />
<androidx.viewpager2.widget.ViewPager2
android:id="#+id/channelViewPager"
android:layout_height="wrap_content"
android:layout_width="match_parent"
app:layout_constraintTop_toBottomOf="#id/tab"
app:layout_constraintStart_toStartOf="#id/tab" />
</androidx.constraintlayout.widget.ConstraintLayout>

Most probably that is because you put more than 1 view inside ScrollView , ScrollView expects 1 view from you. If you want to put more than one consider using a viewGroup view and put your views inside it. For Instance , you can use a vertical LinearLayout to wrap the Views you used. Also , consider using NestedScrollView instead.

Try this one
<?xml version="1.0" encoding="utf-8"?>
<androidx.swiperefreshlayout.widget.SwipeRefreshLayout
android:id="#+id/swipe_refresh"
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.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="0dp"
>
<ProgressBar
android:id="#+id/allChannelAudiosProgressBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.google.android.material.textview.MaterialTextView
android:id="#+id/noAudiosTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:visibility="gone"
android:gravity="center|left"
android:text="No audios"
android:layout_marginTop="5dp"
android:textSize="15dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rvAllChannelAudios"
tools:listitem="#layout/event_near_items"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:itemCount="10"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
</androidx.swiperefreshlayout.widget.SwipeRefreshLayout>
swipe_refresh.setOnRefreshListener {
swipe_refresh.isRefreshing = false
// refresh the list here
}

Why not try a nested scroll view.

Android chat listview not scrolling totally

I have a ListView of a chat that is not scrolling till the end of all the messages. I can't figure out why this is happening. If I send a new message and the length of all the messages in the chat is more than a page so i nedd to scroll over to see the message i succeed to scroll but not enogh to see all the messages.
My Layout XML code here :
<android.support.constraint.ConstraintLayout xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#drawable/cool_background3">
<ListView
android:layout_width="wrap_content"
android:id="#+id/messages_view"
android:layout_weight="1"
android:divider="#fff"
android:layout_height="0dp"
tools:layout_editor_absoluteX="8dp"
app:layout_constraintTop_toBottomOf="#+id/topBar" />
<LinearLayout
android:id="#+id/layout_chatbox"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:minHeight="48dp"
android:background="#ffffff"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent">
<EditText
android:id="#+id/edittext_chatbox"
android:hint="Enter message"
android:background="#android:color/transparent"
android:layout_gravity="center"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:maxLines="6"
/>
<Button
android:id="#+id/button_chatbox_send"
android:text="send"
android:textSize="14dp"
android:background="?attr/selectableItemBackground"
android:clickable="true"
android:layout_width="64dp"
android:layout_height="48dp"
android:gravity="center"
android:textColor="#color/myColor"
android:layout_gravity="bottom"
android:onClick="sendMessage"/>
</LinearLayout>
<RelativeLayout
android:id="#+id/topBar"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:minHeight="50dp"
android:background="#color/white"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
tools:layout_editor_absoluteY="0dp">
<TextView
android:id="#+id/name_of_user"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tomnaor"
android:textColor="#color/myColor"
android:textStyle="bold"
android:textSize="20dp"
android:layout_marginStart="30dp"
android:layout_centerVertical="true"
/>
<TextView
android:id="#+id/emotion"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Happy Chat"
android:textColor="#939393"
android:textSize="14dp"
android:layout_toEndOf="#+id/name_of_user"
android:layout_marginStart="4dp"
android:layout_below="#+id/name_of_user"/>
</RelativeLayout>

Add this in your ListView xml:
android:stackFromBottom="true"
android:transcriptMode="alwaysScroll"
For reference:
stack from bottom
transcript mode

you are not given proper constraint to your ListView.
You may try this way :
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#drawable/cool_background3">
<ListView
android:id="#+id/messages_view"
android:layout_width="0dp"
android:layout_height="0dp"
android:divider="#fff"
app:layout_constraintBottom_toTopOf="#+id/layout_chatbox"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/topBar" />
<LinearLayout
android:id="#+id/layout_chatbox"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:minHeight="48dp"
android:background="#ffffff"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent">
<EditText
android:id="#+id/edittext_chatbox"
android:hint="Enter message"
android:background="#android:color/transparent"
android:layout_gravity="center"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:maxLines="6"
/>
<Button
android:id="#+id/button_chatbox_send"
android:text="send"
android:textSize="14dp"
android:background="?attr/selectableItemBackground"
android:clickable="true"
android:layout_width="64dp"
android:layout_height="48dp"
android:gravity="center"
android:textColor="#color/myColor"
android:layout_gravity="bottom"
android:onClick="sendMessage"/>
</LinearLayout>
<RelativeLayout
android:id="#+id/topBar"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:minHeight="50dp"
android:background="#color/white"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
tools:layout_editor_absoluteY="0dp">
<TextView
android:id="#+id/name_of_user"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tomnaor"
android:textColor="#color/myColor"
android:textStyle="bold"
android:textSize="20dp"
android:layout_marginStart="30dp"
android:layout_centerVertical="true"
/>
<TextView
android:id="#+id/emotion"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Happy Chat"
android:textColor="#939393"
android:textSize="14dp"
android:layout_toEndOf="#+id/name_of_user"
android:layout_marginStart="4dp"
android:layout_below="#+id/name_of_user"/>
</RelativeLayout>
</android.support.constraint.ConstraintLayout>