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>

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.

Horizontal LinearLayout won't match parent when using it under HorizontalScrollView

I want to create an horizontal scroll view for my app
(I have six buttons needed to be distributed equally), everything
works fine when using smaller display (nexus 6 1440x 2560), but when using bigger display (pixel C 2560x1800) I got some space. I remarked
that LinearLayout width cover only the content even though I'm using
match_parent in android:layout_width
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.android.xieon_2.Home_dashboard">
<LinearLayout
android:id="#+id/main_vertical_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:ignore="MissingConstraints"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="30dp">
<HorizontalScrollView
android:layout_marginTop="10dp"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="horizontal">
<ImageButton
android:id="#+id/bedroom_but"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginLeft="10dp"
android:background="#drawable/round_shape"
android:src="#drawable/bedroom_icon" />
<ImageButton
android:id="#+id/kitchen_but"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginLeft="9dp"
android:background="#drawable/round_shape"
android:src="#drawable/kitchen_icon" />
<ImageButton
android:id="#+id/living_room_but"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginLeft="9dp"
android:background="#drawable/round_shape"
android:src="#drawable/living_room" />
<ImageButton
android:id="#+id/kids_room_but"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginLeft="9dp"
android:background="#drawable/round_shape"
android:src="#drawable/kids_room_icon" />
<ImageButton
android:id="#+id/bathroom_but"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginLeft="9dp"
android:background="#drawable/round_shape"
android:src="#drawable/bathroom_icon" />
<ImageButton
android:id="#+id/Guestroom_but"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginLeft="9dp"
android:background="#drawable/round_shape"
android:src="#drawable/guest_room" />
</LinearLayout>
</HorizontalScrollView>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="----------------------------------------------------------------"
android:textColor="#color/RoyalBlue"
android:textSize="20sp" />
<Button
android:id="#+id/control_but"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="30dp"
android:text="Control" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dp">
<ImageView
android:id="#+id/temp_icon_2"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginLeft="10dp"
android:src="#drawable/temperature_icon" />
<TextView
android:id="#+id/temp_val"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toEndOf="#+id/temp_icon_2"
android:text="26"
android:textColor="#color/RoyalBlue"
android:textSize="40sp" />
<TextView
android:id="#+id/degree_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toEndOf="#+id/temp_val"
android:text="°"
android:textColor="#color/RoyalBlue"
android:textSize="40sp" />
<TextView
android:id="#+id/pcnt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_marginRight="10dp"
android:text="%"
android:textColor="#color/RoyalBlue"
android:textSize="40sp" />
<TextView
android:id="#+id/hum_val_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toStartOf="#+id/pcnt"
android:text="85"
android:textColor="#color/RoyalBlue"
android:textSize="40sp" />
<ImageView
android:id="#+id/humidity_icon_2"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_toStartOf="#+id/hum_val_2"
android:src="#drawable/humidity_icon" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="50dp">
<ImageView
android:id="#+id/noise_icon"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_alignParentStart="true"
android:layout_alignTop="#+id/noise_unit"
android:src="#drawable/air_quality" />
<TextView
android:id="#+id/noise_val"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toEndOf="#+id/noise_icon"
android:text="15"
android:textColor="#color/RoyalBlue"
android:textSize="40sp" />
<TextView
android:id="#+id/noise_unit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="5dp"
android:layout_toEndOf="#+id/noise_val"
android:text="PPM"
android:textColor="#color/RoyalBlue"
android:textSize="28sp" />
<TextView
android:id="#+id/security_state"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/noise_val"
android:layout_alignParentEnd="true"
android:layout_marginEnd="12dp"
android:text="ON"
android:textColor="#color/RoyalBlue"
android:textSize="35sp" />
<ImageView
android:id="#+id/security_icon"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_alignBottom="#+id/noise_val"
android:layout_toStartOf="#+id/security_state"
android:src="#drawable/home_security"
android:layout_marginTop="10dp"/>
</RelativeLayout>
</LinearLayout>
</LinearLayout>
app with large display
app with small display

Spacing between Child Items when Expand parent item

I have just created an expandable RecyclerView with different views as every parent item have a child My case is when expanding parent item it view it's child with a vertical spacing between each child Item like this
as this is my main XML File
<?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="match_parent"
android:background="#dedede"
tools:context="abtech.waiteriano.com.waitrer.MainPaymentActivity">
<RelativeLayout
android:id="#+id/relativeLayout2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginTop="19dp"
android:background="#ffffff">
<EditText
android:id="#+id/checkNoET"
android:layout_width="140dp"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_toEndOf="#+id/imageView7"
android:editable="false"
android:ems="10"
android:gravity="right"
android:text="505050505050"
android:textSize="12dp">
<requestFocus />
</EditText>
<TextView
android:id="#+id/checkNo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/checkNoET"
android:layout_alignBottom="#+id/checkNoET"
android:layout_marginStart="10dp"
android:layout_toEndOf="#+id/imageView7"
android:text="Check#"
android:textColor="#color/colorPrimary"
android:textSize="12dp"
android:textStyle="bold" />
<ImageView
android:id="#+id/imageView7"
android:layout_width="25dp"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/checkNoET"
android:layout_alignParentStart="true"
android:layout_alignTop="#+id/checkNoET"
app:srcCompat="#drawable/check" />
<EditText
android:id="#+id/editText"
android:layout_width="130dp"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/checkNoET"
android:layout_alignBottom="#+id/checkNoET"
android:layout_alignParentEnd="true"
android:editable="false"
android:ems="10"
android:gravity="end"
android:text="5"
android:textSize="12dp">
<requestFocus />
</EditText>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/editText"
android:layout_alignBottom="#+id/editText"
android:layout_alignStart="#+id/editText"
android:layout_marginStart="13dp"
android:text="Coves"
android:textColor="#color/colorPrimary"
android:textSize="12dp"
android:textStyle="bold" />
<ImageView
android:id="#+id/imageView8"
android:layout_width="25dp"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/editText"
android:layout_toStartOf="#+id/editText"
app:srcCompat="#drawable/covers" />
<EditText
android:id="#+id/tableNo"
android:layout_width="130dp"
android:layout_height="wrap_content"
android:layout_below="#+id/checkNoET"
android:layout_toEndOf="#+id/imageView7"
android:editable="false"
android:ems="10"
android:gravity="end"
android:text="25"
android:textSize="12dp">
<requestFocus />
</EditText>
<TextView
android:id="#+id/textView13"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/tableNo"
android:layout_alignBottom="#+id/tableNo"
android:layout_alignStart="#+id/checkNo"
android:text="Table"
android:textColor="#color/colorPrimary"
android:textSize="12dp"
android:textStyle="bold" />
<ImageView
android:id="#+id/imageView9"
android:layout_width="25dp"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_below="#+id/checkNoET"
app:srcCompat="#drawable/tablepay" />
<EditText
android:id="#+id/editText14"
android:layout_width="130dp"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/tableNo"
android:layout_alignBottom="#+id/tableNo"
android:layout_alignParentEnd="true"
android:editable="false"
android:text="15/10/2017 03:15PM"
android:textColor="#000000"
android:textSize="10dp"
android:textStyle="bold" />
<ImageView
android:id="#+id/imageView10"
android:layout_width="25dp"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/editText14"
android:layout_toStartOf="#+id/editText14"
app:srcCompat="#drawable/calendar" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/relativeLayout3"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_below="#+id/relativeLayout2"
android:layout_marginTop="14dp"
android:background="#ffffff">
<android.support.v7.widget.RecyclerView
android:id="#+id/parentList"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="220dp"
android:layout_below="#+id/relativeLayout3"
android:layout_marginTop="10dp"
android:background="#ffffff">
<GridView
android:id="#+id/paymentsTypeGV"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:columnWidth="80dp"
android:gravity="center"
android:horizontalSpacing="5dp"
android:numColumns="4"
android:stretchMode="columnWidth"
android:verticalSpacing="5dp"></GridView>
</RelativeLayout>
</RelativeLayout>
my problem is from my xml design and if i is from xml design the problem is in the parent list item ot the child list item or from the main XML File sorry if any thing is not clear enough

Here's a thought: try removing any padding on the text elements.
android:includeFontPadding="false"
If this works, then this answer will become duplicate to:
Android: TextView: Remove spacing and padding on top and bottom

Relative layout how to align to other element instead of parent

I have a relative layout where i already aligned almost all elements like i want, but there are two elements at the right bottom(textView and the icon of forbiden photo), they are aligned related to the parent, the parent is not the photo.
I want to align those elements to the bottom of the image that i have:
here is a
expected results:
the rectangle is where i want the textView and the camera forbiden icon!
and here is the xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.CardView
android:id="#+id/card_view"
android:layout_width="match_parent"
android:layout_height="142dp"
android:layout_gravity="center"
android:layout_margin="#dimen/card_margin"
android:elevation="3dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="10dp"
card_view:cardCornerRadius="#dimen/card_specie_radius">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<com.example.afcosta.inesctec.pt.android.Helpers.NexusBoldTextView
android:id="#+id/Avaliation"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/plantName"
android:layout_marginStart="92dp"
android:layout_marginTop="15dp"
android:text="Avalie a fotografia" />
<com.example.afcosta.inesctec.pt.android.Helpers.NexusBoldTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/plantPhoto"
android:textColor="#color/base"
android:layout_marginTop="4dp"
android:layout_toStartOf="#+id/cameraForbiden"
android:text="TextView" />
<ImageView
android:id="#+id/reportImg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/color_cursor_white" />
<ImageView
android:id="#+id/plantPhoto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginRight="16dp" />
<ImageView
android:id="#+id/userIcon"
android:layout_width="15dp"
android:layout_height="15dp"
android:layout_alignParentBottom="true"
android:layout_below="#id/plantPhoto"
android:src="#drawable/ic_user"
/>
<com.example.afcosta.inesctec.pt.android.Helpers.NexusBoldTextView
android:id="#+id/plantName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/plantPhoto"
android:textColor="#color/nephritis"
android:textSize="18sp" />
<ImageView
android:id="#+id/starIcon"
android:layout_width="23dp"
android:layout_height="23dp"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/plantName"
android:src="#drawable/ic_star"
android:layout_marginLeft="10dp"
/>
<ImageView
android:id="#+id/cameraForbiden"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_toRightOf="#+id/plantName"
android:layout_marginLeft="10dp"
android:src="#drawable/ic_no_photos"
android:layout_below="#id/plantPhoto"
/>
<com.example.afcosta.inesctec.pt.android.Helpers.NexusBoldTextView
android:id="#+id/username"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/plantPhoto"
android:textColor="#color/base"
android:layout_marginEnd="29dp"
android:layout_marginTop="8dp"
android:layout_toEndOf="#+id/userIcon"
android:layout_toLeftOf="#+id/userIcon"
android:paddingLeft="10px"/>
</RelativeLayout>
</android.support.v7.widget.CardView>
</LinearLayout>

Use following code:
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/plantPhoto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginRight="16dp" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentBottom="true"
android:layout_margin="5dp"
android:orientation="horizontal">
<ImageView
android:id="#+id/userIcon"
android:layout_width="15dp"
android:layout_height="15dp"
android:src="#drawable/ic_user"
/>
<com.example.afcosta.inesctec.pt.android.Helpers.NexusBoldTextView
android:id="#+id/plantName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/nephritis"
android:textSize="18sp" />
</LinearLayout>
</RelativeLayout>