Develop Reference

I am having trouble positioning views in a full screen android app

Hey thank you very much for that help and the code looks great but now I am just running into all sorts of problems... First I can not make a circle with the 2nd stacked ImageView, also I can not position the first 3 ImageViews to the top of the screen with 8dp of padding, it will literally not let me do anything without the whole thing becoming one big cluster. I have an image of what I am trying to achieve and will attach it. If you have any ideas all are welcome. Thank you very much by the way! enter image description here

XML code
<?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"
android:background="?attr/fullscreenBackgroundColor"
android:theme="#style/ThemeOverlay.Experiment.FullscreenContainer"
tools:context=".FullscreenActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="8dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="4dp"
android:layout_weight="1"
android:src="#mipmap/ic_launcher"
android:textAllCaps="false"
android:textColor="#color/white" />
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="4dp"
android:layout_weight="1"
android:src="#mipmap/ic_launcher"
android:textAllCaps="false"
android:textColor="#color/white" />
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="4dp"
android:layout_weight="1"
android:src="#mipmap/ic_launcher"
android:textAllCaps="false"
android:textColor="#color/white" />
</LinearLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_margin="12dp"
android:background="#color/white"
android:src="#drawable/ic_launcher_background"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/profile_image"
android:layout_width="120dp"
android:layout_height="120dp"
android:src="#drawable/cybersecurity_1134x638"
app:civ_border_color="#FF000000"
app:civ_border_width="2dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.526"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="4dp"
android:backgroundTint="#color/white"
android:text="Inner Button"
android:textAllCaps="false"
android:textColor="#color/black"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.762"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.795" />
</androidx.constraintlayout.widget.ConstraintLayout>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="4dp"
android:backgroundTint="#color/black"
android:text="Button1"
android:textAllCaps="false"
android:textColor="#color/white" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="4dp"
android:backgroundTint="#color/black"
android:text="Button2"
android:textAllCaps="false"
android:textColor="#color/white" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="4dp"
android:backgroundTint="#color/black"
android:text="Button3"
android:textAllCaps="false"
android:textColor="#color/white" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="4dp"
android:backgroundTint="#color/black"
android:text="Button4"
android:textAllCaps="false"
android:textColor="#color/white" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="4dp"
android:backgroundTint="#color/black"
android:text="Button5"
android:textAllCaps="false"
android:textColor="#color/white" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="4dp"
android:backgroundTint="#color/white"
android:text="Button"
android:textAllCaps="false"
android:textColor="#color/black" />
<ImageView
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_margin="12dp"
android:background="#color/black"
android:src="#drawable/ic_launcher_background" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
Design-Output
Use https://github.com/hdodenhof/CircleImageView for Circle ImageView.
Add dependency in your app Level gradle file.
implementation 'de.hdodenhof:circleimageview:3.1.0'
Add or replace ImageView to your XML file.
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/profile_image"
android:layout_width="120dp"
android:layout_height="120dp"
android:src="#drawable/cybersecurity_1134x638"
app:civ_border_color="#FF000000"
app:civ_border_width="2dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.526"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
For Top Images I think you should check the height of the imageview Instead of wrap_content you can change with static value.

Android: The bottom navigation view is blocking out part of my content in my ScrollView

The problem I have is that the bottom navigation bar is blocking the bottom part of my content in the ScrollView. I have tried to change the android:layout_height of the ScrollView to wrap_content instead of match_parent and it did resolve that issue, but it presented me with another. Now, the top part of my ScrollView is cut off from the display. Is there anyway to resolve both? I am using constraint layout as my parent layout of the activity.
Below is my xml code of the activity.
<?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=".MainActivity"
android:orientation="vertical"
android:background="#color/colorBackground">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/dash_bottomNavigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:backgroundTint="#color/colorWhite"
app:menu="#menu/menu_bottom_navigation"/>
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toTopOf="#+id/dash_bottomNavigation"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="1.0"
tools:layout_editor_absoluteX="2dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="#+id/dash_headerImg"
android:layout_width="match_parent"
android:layout_height="260dp"
android:contentDescription="#string/app_name"
android:scaleType="centerCrop"
android:src="#drawable/header_background"
app:layout_constraintTop_toTopOf="parent"/>
<View
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#40000000"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="#id/dash_headerImg"/>
<ImageView
android:id="#+id/dash_ic_menu"
android:layout_width="35dp"
android:layout_height="35dp"
android:layout_marginTop="16dp"
android:layout_marginStart="18dp"
android:contentDescription="#string/app_name"
android:src="#drawable/dashboard_ic_menu"
android:background="#drawable/dashboard_menu_background"
android:padding="7dp"
android:tint="#color/colorWhite"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="#+id/dash_welcomeText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Welcome back!"
android:layout_marginStart="20dp"
android:layout_marginTop="10dp"
android:textColor="#color/colorWhite"
android:textSize="23sp"
android:textStyle="bold"
app:layout_constraintTop_toBottomOf="#+id/dash_ic_menu"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="20dp"
android:background="#drawable/searchbar_background"
android:gravity="center_vertical"
android:padding="4dp"
app:layout_constraintTop_toBottomOf="#+id/dash_welcomeText">
<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_marginStart="10dp"
android:layout_marginTop="6dp"
android:layout_marginEnd="10dp"
android:layout_marginBottom="6dp"
android:contentDescription="#string/app_name"
android:src="#drawable/ic_search_black_24dp"/>
<EditText
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginEnd="10dp"
android:background="#null"
android:gravity="center_vertical"
android:imeOptions="actionSearch"
android:inputType="text"
tools:ignore="Autofill"
android:textColor="#color/colorPrimaryText"
android:textSize="18sp"
android:hint="Search"/>
</LinearLayout>
<View
android:id="#+id/dash_viewSupporter"
android:layout_width="1dp"
android:layout_height="1dp"
android:layout_marginBottom="50dp"
app:layout_constraintBottom_toBottomOf="#+id/dash_headerImg"
app:layout_constraintStart_toStartOf="parent"/>
<androidx.cardview.widget.CardView
android:id="#+id/dash_runTrackerCard"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="25dp"
android:layout_marginEnd="10dp"
app:cardBackgroundColor="#color/colorWhite"
app:cardCornerRadius="8dp"
app:layout_constraintEnd_toStartOf="#+id/dash_calorieTrackerCard"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/dash_viewSupporter">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical"
android:padding="15dp">
<ImageView
android:layout_width="120dp"
android:layout_height="120dp"
android:scaleX="0.7"
android:scaleY="0.7"
android:contentDescription="#string/app_name"
android:src="#drawable/run"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Run tracker"
android:textColor="#color/colorPrimaryText"
android:textSize="16sp"
android:textStyle="bold"/>
</LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:id="#+id/dash_calorieTrackerCard"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="25dp"
android:layout_marginStart="10dp"
app:cardBackgroundColor="#color/colorWhite"
app:cardCornerRadius="8dp"
app:layout_constraintStart_toEndOf="#+id/dash_runTrackerCard"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/dash_viewSupporter">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical"
android:padding="15dp">
<ImageView
android:layout_width="120dp"
android:layout_height="120dp"
android:scaleX="0.7"
android:scaleY="0.7"
android:contentDescription="#string/app_name"
android:src="#drawable/calorie_tracker"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Calorie tracker"
android:textColor="#color/colorPrimaryText"
android:textSize="16sp"
android:textStyle="bold"/>
</LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:id="#+id/dash_meditationCard"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="25dp"
android:layout_marginTop="25dp"
android:layout_marginBottom="25dp"
android:layout_marginEnd="10dp"
app:cardBackgroundColor="#color/colorWhite"
app:cardCornerRadius="8dp"
app:layout_constraintVertical_bias="0"
app:layout_constraintEnd_toStartOf="#+id/dash_dietCard"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/dash_runTrackerCard">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical"
android:padding="15dp">
<ImageView
android:layout_width="120dp"
android:layout_height="120dp"
android:contentDescription="#string/app_name"
android:scaleX="0.7"
android:scaleY="0.7"
android:src="#drawable/yoga" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Meditation"
android:textColor="#color/colorPrimaryText"
android:textSize="16sp"
android:textStyle="bold" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:id="#+id/dash_dietCard"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="25dp"
android:layout_marginEnd="25dp"
android:layout_marginStart="10dp"
app:cardBackgroundColor="#color/colorWhite"
app:cardCornerRadius="8dp"
app:layout_constraintVertical_bias="0"
app:layout_constraintStart_toEndOf="#+id/dash_meditationCard"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/dash_calorieTrackerCard">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical"
android:padding="15dp">
<ImageView
android:layout_width="120dp"
android:layout_height="120dp"
android:scaleX="0.7"
android:scaleY="0.7"
android:contentDescription="#string/app_name"
android:src="#drawable/diet"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Diet"
android:textColor="#color/colorPrimaryText"
android:textSize="16sp"
android:textStyle="bold"/>
</LinearLayout>
</androidx.cardview.widget.CardView>
<RelativeLayout
android:id="#+id/dash_fitnessView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_marginTop="20dp"
app:layout_constraintTop_toBottomOf="#+id/dash_meditationCard"
app:layout_constraintBottom_toBottomOf="parent"
android:background="#color/banner_background_light">
<LinearLayout
android:id="#+id/dash_fitnessBannerLayout"
android:layout_width="170dp"
android:layout_height="280dp"
android:layout_margin="10dp"
android:background="#color/banner_background"
android:orientation="vertical">
<TextView
android:id="#+id/dash_fitnessViewAllText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="10dp"
android:paddingTop="5dp"
android:text="View all" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="50dp"
android:text="Fitness LifeStyle"
android:textAllCaps="true"
android:textColor="#011a27"
android:textSize="25sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:text="Embark on your fitness journey now" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="80dp"
android:paddingLeft="10dp"
android:text="From: bornfitness.com" />
</LinearLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/dash_fitnessRecycler"
android:layout_width="match_parent"
android:layout_height="280dp"
android:layout_toEndOf="#+id/dash_fitnessBannerLayout"
android:background="#fcfdfe" />
<ProgressBar
android:id="#+id/dash_fitnessProgressBar"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_margin="10dp"
android:layout_toEndOf="#+id/dash_fitnessBannerLayout"
android:indeterminate="true"
android:visibility="gone" />
</RelativeLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>
Screenshot of my design view of the activity:

Just make android:layout_height="0dp" in Scrollview.
And Please use NestedScrollView if you have Recyclerview inside Scoll
your Scrollview like this :
<ScrollView
android:visibility="visible"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/dash_bottomNavigation"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="1.0"
tools:layout_editor_absoluteX="2dp">
</ScrollView>

How to show image in the place of creating message in androidX..?

I am creating an offlline SMS app.In that I have to place the option of selecting an image button and after selecting image I want to place it at the position of sending image.But do not understand how to adjust the imageView button to get desired layout.Someone can help me..?
I have searched a lot but found nothing.
XML FILE
<?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">
<LinearLayout
android:layout_width="match_parent"
android:padding="5dp"
android:layout_height="wrap_content"
android:gravity="left"
android:orientation="horizontal" tools:ignore="MissingConstraints" android:id="#+id/linearLayout">
<ImageView
android:id="#+id/inbox_thumb"
android:layout_width="60dp"
android:layout_height="60dp"
android:src="#drawable/circle"/>
<TextView
android:hint="Phone Number"
android:layout_width="5dp"
android:layout_marginTop="6dp"
android:padding="10dp"
android:textStyle="bold"
android:textSize="15dp"
android:gravity="left"
android:layout_height="wrap_content" android:id="#+id/phone" android:layout_weight="1"/>
</LinearLayout>
<androidx.recyclerview.widget.RecyclerView android:layout_width="384dp"
android:layout_height="661dp"
android:scrollbarAlwaysDrawVerticalTrack="true"
android:id="#+id/reyclerview_message_list"
android:layout_marginLeft="16dp"
android:layout_marginStart="16dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/linearLayout">
</androidx.recyclerview.widget.RecyclerView>
<View android:layout_width="0dp"
android:layout_height="2dp"
tools:ignore="MissingConstraints"
android:background="#color/colorPrimaryDark"
android:layout_marginBottom="0dp"
app:layout_constraintBottom_toTopOf="#+id/message_area"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent">
</View>
<LinearLayout android:layout_width="0dp" android:layout_height="wrap_content"
android:id="#+id/message_area"
android:orientation="horizontal"
android:minHeight="48dp"
android:background="#ffffff"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
tools:ignore="MissingConstraints">
<Button
android:text="attach img"
android:layout_width="wrap_content"
android:layout_height="wrap_content" android:id="#+id/btn1"
/>
<EditText
android:id="#+id/txtMessage"
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"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content" app:srcCompat="#mipmap/ic_launcher" android:id="#+id/imageView2"
android:layout_weight="1"/>
<Button
android:id="#+id/btnSend"
android:text="SEND"
android:textSize="14dp"
android:clickable="true"
android:layout_width="64dp"
android:layout_height="48dp"
android:gravity="center"
android:layout_gravity="bottom" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Expected
Actual

I have created a basic template using your Layout in AndroidX. You can beautify it using your style, icons and colors accordingly. Please copy it and look at it in your Android Studio.
<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">
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="left"
android:orientation="horizontal"
android:padding="5dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/inbox_thumb"
android:layout_width="60dp"
android:layout_height="60dp"
android:src="#drawable/ic_launcher" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/phone"
android:layout_width="5dp"
android:layout_height="wrap_content"
android:layout_marginTop="6dp"
android:layout_weight="1"
android:gravity="left"
android:hint="Phone Number"
android:padding="10dp"
android:textSize="15dp"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:id="#+id/message_area"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp"
android:background="#drawable/rounded_rect_shape"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent">
<androidx.appcompat.widget.AppCompatImageButton
android:id="#+id/btn1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:src="#drawable/ic_launcher" />
<androidx.cardview.widget.CardView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
app:cardBackgroundColor="#android:color/darker_gray"
app:cardCornerRadius="6dp"
app:cardElevation="2dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#mipmap/ic_launcher" />
<androidx.appcompat.widget.AppCompatEditText
android:id="#+id/txtMessage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:background="#android:color/transparent"
android:hint="Enter message"
android:maxLines="6" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.appcompat.widget.AppCompatButton
android:id="#+id/btnSend"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:gravity="center"
android:text="SEND"
android:textSize="14dp" />
</LinearLayout>
<View
android:layout_width="0dp"
android:layout_height="2dp"
android:layout_marginBottom="0dp"
android:background="#color/colorPrimaryDark"
app:layout_constraintBottom_toTopOf="#+id/message_area"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"/>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/reyclerview_message_list"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginStart="16dp"
android:scrollbarAlwaysDrawVerticalTrack="true"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toTopOf="#id/message_area"
app:layout_constraintTop_toBottomOf="#+id/linearLayout"/>

If I understand correctly, you're trying to place the "imageView2" ImageView on top of the "txtMessage" EditText, is that right?
If that's how it is, what you need to do is wrap both of them in a vertical LinearLayout, like so:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<EditText
android:id="#+id/txtMessage"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_weight="1"
android:background="#android:color/transparent"
android:hint="Enter message"
android:maxLines="6" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
app:srcCompat="#mipmap/ic_launcher" />
</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="bottom"
android:orientation="horizontal"
android:padding="8dp">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/circle_drawable"
android:backgroundTint="#android:color/black"
android:padding="8dp"
android:layout_margin="8dp"
android:src="#drawable/ic_add_black_24dp"
android:tint="#android:color/white" />
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardBackgroundColor="#android:color/darker_gray"
app:cardCornerRadius="6dp"
app:cardElevation="2dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:src="#mipmap/ic_launcher" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="bottom"
android:weightSum="1">
<EditText
android:id="#+id/et1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toStartOf="#+id/ib2"
android:layout_margin="8dp"
android:text="Hello" />
<ImageButton
android:id="#+id/ib2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/circle_drawable"
android:backgroundTint="#android:color/black"
android:padding="8dp"
android:layout_margin="8dp"
android:layout_alignParentEnd="true"
android:src="#drawable/ic_send_black_24dp"
android:tint="#android:color/white" />
</RelativeLayout>
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
I have used background drawable, you can replace with your add and send image.
Hope it solves your problem.

Why does my RecyclerView Layout width looks like its wrap content even though i put it match parent

so I have a recycler view layout that look like the image below. I set the width to match parent and in this layout it is like what I want it to be. So when I call this recycler layout to my home I want the view to be exactly like this.
Recycler Layout
but when I call the recycler view to my home layout and I try to run it why does it becomes like this? its like my width is wrap content. the width isn't full until the right side.
My recycler view when I run the app
here is my recyclerview layout xml code :
<?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="90dp"
android:layout_margin="5dp">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/imageView"
android:layout_width="72dp"
android:layout_height="72dp"
android:layout_marginLeft="5dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
android:src="#mipmap/ic_launcher"
/>
<TextView
android:id="#+id/textViewTitle"
android:layout_marginLeft="5dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toRightOf="#+id/imageView"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="20dp"
android:text="Plastik"
android:textSize="20sp"
android:textStyle="bold" />
<TextView
android:id="#+id/textViewCategory"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
app:layout_constraintTop_toBottomOf="#+id/textViewTitle"
app:layout_constraintLeft_toRightOf="#+id/imageView"
android:text="Non Organik"
android:textSize="16sp"/>
<TextView
android:id="#+id/textViewPrice"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Price"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginRight="5dp"
android:textSize="#dimen/font_medium"
android:textStyle="bold"/>
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>
And this is my Home Layout xml code
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView 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:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:orientation="vertical"
android:theme="#style/HomeTheme"
tools:context=".HomeFragment">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/logog40w"
android:layout_width="150dp"
android:layout_height="60dp"
android:src="#drawable/logog4w"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/pohong4w"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_alignParentRight="true"
android:src="#drawable/pohong4w"
app:layout_constraintRight_toRightOf="parent" />
<TextView
android:id="#+id/user_name"
android:layout_width="85dp"
android:layout_height="wrap_content"
android:layout_marginTop="100dp"
android:text="Name"
android:textSize="25sp"
android:textStyle="bold"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/pohong4w"
app:layout_constraintTop_toTopOf="#+id/logog40w" />
<TextView
android:id="#+id/jemputrutin_status"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="20dp"
android:text="Status Penjemputan Rutin:"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#+id/pohong4w" />
<TextView
android:id="#+id/fragment_home_jemputrutin_status"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:text="STATUS"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintLeft_toRightOf="#+id/jemputrutin_status"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#+id/jemputrutin_status" />
<LinearLayout
android:id="#+id/layoutmainfeature"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="10dp"
android:orientation="horizontal"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/jemputrutin_status">
<android.support.v7.widget.CardView
android:id="#+id/jemput_rutin"
android:layout_width="105dp"
android:layout_height="135dp"
android:layout_margin="5dp"
tools:layout_editor_absoluteX="51dp"
tools:layout_editor_absoluteY="51dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:orientation="vertical"
android:padding="8dp"
>
<ImageView
android:layout_width="90dp"
android:layout_height="90dp"
android:padding="4dp"
android:src="#drawable/g4w_jemputrutin" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Jemput Rutin"
android:textColor="#000000"
android:textSize="12dp" />
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="#+id/antar_sendiri"
android:layout_width="105dp"
android:layout_height="135dp"
android:layout_margin="5dp"
tools:layout_editor_absoluteX="51dp"
tools:layout_editor_absoluteY="51dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:orientation="vertical"
android:padding="8dp">
<ImageView
android:id="#+id/img_antarsendiri"
android:layout_width="90dp"
android:layout_height="90dp"
android:padding="4dp"
android:src="#drawable/g4w_antarsendiri" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Antar Sendiri"
android:textColor="#000000"
android:textSize="12dp" />
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="#+id/jemput_sekarang"
android:layout_width="105dp"
android:layout_height="135dp"
android:layout_margin="5dp"
tools:layout_editor_absoluteX="51dp"
tools:layout_editor_absoluteY="51dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:orientation="vertical"
android:padding="8dp">
<ImageView
android:layout_width="90dp"
android:layout_height="90dp"
android:padding="4dp"
android:src="#drawable/g4w_jemputsekarang" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Jemput Sekarang"
android:textColor="#000000"
android:textSize="11dp" />
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
<TextView
android:id="#+id/recyler_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:text="Harga Per Kg"
android:textAppearance="#style/TextAppearance.AppCompat.Headline"
android:textStyle="bold"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#+id/layoutmainfeature" />
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:nestedScrollingEnabled="true"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/recyler_title" />
</android.support.constraint.ConstraintLayout>
</android.support.v4.widget.NestedScrollView>

remove these two lines from recycler view and try again
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent
which makes your recycler view part like this
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:nestedScrollingEnabled="true"
app:layout_constraintTop_toBottomOf="#+id/recyler_title" />

layout_above of Relative layout in Constraint Layout?

Here is my code and I want ViewPager to above LinearLayout and below ImageView. It is coming below ImageView but overlaps LinearLayout. I tried layout_constarintBottom_toTopOf property but it's not working. Which property use correctly to solve this issue
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorPrimary">
<ImageView
android:id="#+id/img_app_logo"
android:layout_width="75dp"
android:layout_height="0dp"
android:layout_marginTop="10dp"
android:src="#drawable/app_logo"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintDimensionRatio="4:3"/>
<LinearLayout
android:id="#+id/linear_layout_registration"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorAccent"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent">
<android.support.v7.widget.AppCompatTextView
android:id="#+id/text_get_started"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/get_started_text"
android:textSize="18sp"
android:padding="20dp"
android:layout_weight="1"
android:gravity="center"
android:textColor="#color/white" />
<View
android:layout_width="1dp"
android:layout_height="30dp"
android:background="#color/white"
android:layout_gravity="center"/>
<android.support.v7.widget.AppCompatTextView
android:id="#+id/text_sign_in"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/sign_in_text"
android:textSize="18sp"
android:padding="20dp"
android:layout_weight="1"
android:gravity="center"
android:textColor="#color/white" />
</LinearLayout>
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#+id/img_app_logo"/>
</android.support.constraint.ConstraintLayout>

Use match_constraint property for view pager height from design tab->attributes. It will adjust view pager according to its constraints.
<ImageView
android:id="#+id/img_app_logo"
android:layout_width="75dp"
android:layout_height="0dp"
android:src="#drawable/home"
app:layout_constraintDimensionRatio="4:3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" app:layout_constraintHorizontal_bias="0.501"
android:layout_marginTop="16dp" app:layout_constraintTop_toTopOf="parent"/>
<LinearLayout
android:id="#+id/linear_layout_registration"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorAccent"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent">
<android.support.v7.widget.AppCompatTextView
android:id="#+id/text_get_started"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="get started"
android:textSize="18sp"
android:padding="20dp"
android:layout_weight="1"
android:gravity="center"
android:textColor="#color/white" />
<View
android:layout_width="1dp"
android:layout_height="30dp"
android:background="#color/white"
android:layout_gravity="center"/>
<android.support.v7.widget.AppCompatTextView
android:id="#+id/text_sign_in"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Sign In"
android:textSize="18sp"
android:padding="20dp"
android:layout_weight="1"
android:gravity="center"
android:textColor="#color/white" />
</LinearLayout>
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintHorizontal_bias="0.0" android:id="#+id/viewPager"
app:layout_constraintTop_toBottomOf="#+id/img_app_logo"
app:layout_constraintBottom_toTopOf="#+id/linear_layout_registration"/>

You probably want something like this...
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/img_app_logo"
android:layout_width="75dp"
android:layout_height="0dp"
android:layout_marginTop="10dp"
android:src="#drawable/app_logo"
app:layout_constraintDimensionRatio="4:3"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<android.support.v4.view.ViewPager
android:id="#+id/viewPager2"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/linear_layout_registration"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/img_app_logo" />
<LinearLayout
android:id="#+id/linear_layout_registration"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorAccent"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<android.support.v7.widget.AppCompatTextView
android:id="#+id/text_get_started"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:padding="20dp"
android:text="#string/get_started_text"
android:textColor="#color/white"
android:textSize="18sp" />
<View
android:layout_width="1dp"
android:layout_height="30dp"
android:layout_gravity="center"
android:background="#color/white" />
<android.support.v7.widget.AppCompatTextView
android:id="#+id/text_sign_in"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:padding="20dp"
android:text="#string/sign_in_text"
android:textColor="#color/white"
android:textSize="18sp" />
</LinearLayout>