Develop Reference

How to configure XML file so RecyclerView doesn't overlap the rest of the content?

What my layout file currently does:
My layout file after building an app looks like on the picture and before building
What I want it to do:
I want this info icon and "Basic calisthenics progression" to be on top on all devices without overlapping.
What I've tried:
I've tried to add CardView, moving from constraint layout to frame layout, etc, but nothing seems to work and recyclerView still overlaps the header.
fragment_home.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/homeFrameLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#1D1D1B"
tools:context="com.cuyer.calitracker.View.HomeFragment">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView14"
style="#style/fill_box_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:shadowDx="-4"
android:shadowDy="-4"
android:shadowRadius="2"
android:text="BASIC CALISTHENICS PROGRESSION"
app:layout_constraintBottom_toTopOf="#+id/recyclerView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.497"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="640dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent" />
<ImageView
android:id="#+id/infoImageView"
android:layout_width="41dp"
android:layout_height="43dp"
android:src="#drawable/ic_outline_info_24"
app:layout_constraintBottom_toTopOf="#+id/recyclerView"
app:layout_constraintEnd_toStartOf="#+id/textView14"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</FrameLayout>

Modifying your layout like this might fix the problem
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/homeFrameLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#1D1D1B"
tools:context="com.cuyer.calitracker.View.HomeFragment">
<androidx.constraintlayout.widget.ConstraintLayout
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="center_vertical"
android:orientation="horizontal"
android:padding="20dp"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="#+id/infoImageView"
android:layout_width="41dp"
android:layout_height="43dp"
android:layout_marginEnd="20dp"
android:src="#drawable/ic_outline_info_24"
app:layout_constraintBottom_toTopOf="#+id/recyclerView"
app:layout_constraintEnd_toStartOf="#+id/textView14"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView14"
style="#style/fill_box_textview"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_weight="1"
android:shadowDx="-4"
android:shadowDy="-4"
android:shadowRadius="2"
android:text="BASIC CALISTHENICS PROGRESSION"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.497"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</LinearLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/linearLayout" />
</androidx.constraintlayout.widget.ConstraintLayout>
</FrameLayout>

I want to reduce the space between the cardview in grid adapter

This is xml code. actually while running this code the output or the layout which I am expecting is not coming instead some different output is displaying. I have also attached the screenshot of the output which I am getting below.
<?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">
<androidx.cardview.widget.CardView
android:layout_width="191dp"
android:layout_height="170dp"
app:cardElevation="10dp"
app:contentPadding="10dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.247"
tools:ignore="MissingConstraints"
tools:layout_editor_absoluteX="35dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="166dp"
android:layout_height="146dp">
<ImageView
android:id="#+id/imageView4"
android:layout_width="151dp"
android:layout_height="108dp"
tools:layout_editor_absoluteX="6dp"
tools:layout_editor_absoluteY="7dp"
tools:srcCompat="#tools:sample/avatars" />
<TextView
android:id="#+id/textView15"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="first"
android:textSize="20dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.503"
app:layout_constraintStart_toStartOf="parent"
tools:layout_editor_absoluteY="122dp" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>
These are the snap of my outputs.

Try to android:layout_height="wrap_content" of the root view instead of match_parent
Also it's not right to use tools:ignore="MissingConstraints" in production, that will miss out your Views; instead hardcode the missing constraints.
I've fixed this in below
<?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="wrap_content"
android:layout_height="wrap_content">
<androidx.cardview.widget.CardView
android:layout_width="191dp"
android:layout_height="170dp"
app:cardElevation="10dp"
app:contentPadding="10dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="166dp"
android:layout_height="146dp">
<ImageView
android:id="#+id/imageView4"
android:layout_width="151dp"
android:layout_height="108dp"
app:layout_constraintBottom_toTopOf="#id/textView15"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:srcCompat="#tools:sample/avatars" />
<TextView
android:id="#+id/textView15"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="first"
android:textSize="20dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/imageView4" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>

Android Material CardView with ConstraintLayout clip child not working

I want to overlap (take half the image outside) of the card view. The ShapeableImageView is a child of the card view.
I have tried adding clipChilder="false" on card view as well as on the child constraint layout but no luck. I also tried the same in runtime again no luck.
Layout
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".fragments.ProfileFragment">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.codepaints.velvet.views.HeaderView
android:id="#+id/v_profile_header"
android:layout_width="match_parent"
android:layout_height="235dp"
android:src="#drawable/img_profile_bg"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:overlay_color="#color/colorNavHeaderOverlay" />
<com.google.android.material.card.MaterialCardView
android:id="#+id/v_profile_card"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/app_space"
android:layout_marginEnd="#dimen/app_space"
android:clickable="false"
android:focusable="false"
android:translationY="-24dp"
app:cardCornerRadius="#dimen/app_space_h"
app:cardElevation="#dimen/app_shadow_two"
app:layout_constraintTop_toBottomOf="#+id/v_profile_header"
app:layout_constraintBottom_toBottomOf="#id/v_profile_header"
app:layout_constraintEnd_toEndOf="#+id/v_profile_header"
app:layout_constraintStart_toStartOf="#id/v_profile_header"
app:rippleColor="#android:color/transparent">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/v_profile_card_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipChildren="false">
<com.google.android.material.imageview.ShapeableImageView
android:id="#+id/v_profile_avatar"
android:layout_width="#dimen/profile_avatar_size"
android:layout_height="#dimen/profile_avatar_size"
android:background="#drawable/shape_circle_border"
android:src="#drawable/img_profile_avatar"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="parent"/>
<View
android:id="#+id/v_profile_online_status_holder"
android:layout_width="#dimen/app_space"
android:layout_height="#dimen/app_space"
app:layout_constraintEnd_toEndOf="#id/v_profile_avatar"
app:layout_constraintStart_toStartOf="#id/v_profile_avatar"
app:layout_constraintTop_toBottomOf="#+id/v_profile_avatar" />
<View
android:id="#+id/v_profile_online_status"
android:layout_width="#dimen/app_space"
android:layout_height="#dimen/app_space"
android:layout_marginBottom="#dimen/app_space_h"
android:background="#drawable/shape_circle"
android:backgroundTint="#color/colorOnline"
app:layout_constraintBottom_toBottomOf="#id/v_profile_online_status_holder"
app:layout_constraintEnd_toEndOf="#id/v_profile_avatar"
app:layout_constraintStart_toStartOf="#id/v_profile_avatar" />
<TextView
android:id="#+id/v_profile_username"
style="#style/TextAppearance.MaterialComponents.Headline6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/profile_username"
android:textAlignment="center"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/v_profile_avatar" />
<TextView
android:id="#+id/v_profile_qualification"
style="#style/TextAppearance.MaterialComponents.Body2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableStart="#drawable/ic_university"
android:drawablePadding="#dimen/app_space_q"
android:text="#string/profile_qualification"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/v_profile_username" />
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.card.MaterialCardView>
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
Screenshot
Another Test
I have tried out without MaterialCardView but the result is the same.
I have no idea why it is not working.
<?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=".fragments.ProfileFragment">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/v_profile_card"
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="#color/colorAccent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:clipChildren="false"
app:elevation="1dp"
android:clipToPadding="false">
<ImageView
app:elevation="16dp"
android:id="#+id/v_image"
android:layout_width="128dp"
android:layout_height="128dp"
android:src="#drawable/img_profile_avatar"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="parent"/>
<TextView
android:id="#+id/v_user"
style="#style/TextAppearance.MaterialComponents.Headline4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/profile_username"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/v_image"
android:background="#color/colorNutritionKcal"
android:translationY="60dp"
android:elevation="100dp"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Screenshot
Test 3
It won't work with LinearLayout too :(
<LinearLayout
android:orientation="vertical"
android:id="#+id/v_profile_card"
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="#color/colorAccent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:clipChildren="false"
android:elevation="1dp"
android:clipToPadding="false">
<ImageView
android:elevation="#dimen/app_space"
android:id="#+id/v_image"
android:layout_width="128dp"
android:layout_height="128dp"
android:translationY="-60dp"
android:src="#drawable/img_profile_avatar"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="parent"/>
<TextView
android:id="#+id/v_user"
style="#style/TextAppearance.MaterialComponents.Headline4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/profile_username"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/v_image"
android:background="#color/colorNutritionKcal"
android:translationY="60dp"
android:elevation="100dp"/>
</LinearLayout>

In my case you can add this to MaterialCardView xml file
android:outlineProvider="none"

Alright, so after trying so many different ways, finally found the solution.
In my case, I have an image wrapped by a card view, and the card view is inside a constraint layout. So here I have to set android:clipChildren="false" for both views, ConstraintLayout the parent and the CardView a child. See the final code below.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".fragments.ProfileFragment">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipChildren="false">
<com.codepaints.velvet.views.HeaderView
android:id="#+id/v_profile_header"
android:layout_width="match_parent"
android:layout_height="235dp"
android:src="#drawable/img_profile_bg"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:overlay_color="#color/colorNavHeaderOverlay" />
<com.google.android.material.card.MaterialCardView
android:id="#+id/v_profile_card"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/app_space"
android:layout_marginEnd="#dimen/app_space"
android:clickable="false"
android:focusable="false"
android:translationY="-24dp"
android:clipChildren="false"
app:cardCornerRadius="#dimen/app_space_h"
app:cardElevation="#dimen/app_shadow_two"
app:layout_constraintTop_toBottomOf="#+id/v_profile_header"
app:layout_constraintBottom_toBottomOf="#id/v_profile_header"
app:layout_constraintEnd_toEndOf="#+id/v_profile_header"
app:layout_constraintStart_toStartOf="#id/v_profile_header"
app:rippleColor="#android:color/transparent">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/v_profile_card_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.imageview.ShapeableImageView
android:id="#+id/v_profile_avatar"
android:layout_width="#dimen/profile_avatar_size"
android:layout_height="#dimen/profile_avatar_size"
android:background="#drawable/shape_circle_border"
android:src="#drawable/img_profile_avatar"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="parent"/>
<View
android:id="#+id/v_profile_online_status_holder"
android:layout_width="#dimen/app_space"
android:layout_height="#dimen/app_space"
app:layout_constraintEnd_toEndOf="#id/v_profile_avatar"
app:layout_constraintStart_toStartOf="#id/v_profile_avatar"
app:layout_constraintTop_toBottomOf="#+id/v_profile_avatar" />
<View
android:id="#+id/v_profile_online_status"
android:layout_width="#dimen/app_space"
android:layout_height="#dimen/app_space"
android:layout_marginBottom="#dimen/app_space_h"
android:background="#drawable/shape_circle"
android:backgroundTint="#color/colorOnline"
app:layout_constraintBottom_toBottomOf="#id/v_profile_online_status_holder"
app:layout_constraintEnd_toEndOf="#id/v_profile_avatar"
app:layout_constraintStart_toStartOf="#id/v_profile_avatar" />
<TextView
android:id="#+id/v_profile_username"
style="#style/TextAppearance.MaterialComponents.Headline6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/profile_username"
android:textAlignment="center"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/v_profile_avatar" />
<TextView
android:id="#+id/v_profile_qualification"
style="#style/TextAppearance.MaterialComponents.Body2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableStart="#drawable/ic_university"
android:drawablePadding="#dimen/app_space_q"
android:text="#string/profile_qualification"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/v_profile_username" />
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.card.MaterialCardView>
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>

Items in Recyclerview adapter jumps to right after i click a button

I have a scrollview as the root layout for my fragment and in that scrollview there is a linearlayout which inside has a constraintlayout and a recyclerview, and there are 2 columns in my recyclerview. When my fragment launches , The UI is fine but when i click on a button a column jumps towards the right side of the screen. im not adding any marginlayout to right or left so I don't know why this is happening. Didn't have this issue before, I am facing this issue after using scrollview. I have pasted the code below. Any ideas as to why the columns change after clicking on a button.
As far as I think, this is an issue with the linear layout because it was fine before I used that.
Fragment xml:
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<data>
<variable
name="scoutingFragmentViewModel"
type="com.resatech.android.navigationtest.viewModels.ScoutingFragmentViewModel">
</variable>
</data>
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
android:fadeScrollbars="false"
>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:focusableInTouchMode="true">
<android.support.constraint.ConstraintLayout
android:id="#+id/constraint_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/image_bg"
android:layout_width="385dp"
android:layout_height="285dp"
android:src="#color/cpb_grey"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="1.0" />
<TextView
android:id="#+id/text_scout_timer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="Scouting Timer"
android:textColor="#color/color_text_dark"
android:textSize="20sp"
android:visibility="#{scoutingFragmentViewModel.mScoutingTimerTextVisibility}"
app:layout_constraintBottom_toBottomOf="#+id/image_bg"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.474"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.335" />
<Button
android:id="#+id/button_ready"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="92dp"
android:layout_marginEnd="30dp"
android:background="#drawable/connect_button"
android:text="Ready"
android:visibility="#{scoutingFragmentViewModel.mReadyButtonVisibility}"
app:layout_constraintEnd_toEndOf="#+id/image_bg"
app:layout_constraintHorizontal_bias="0.484"
app:layout_constraintStart_toStartOf="#+id/image_bg"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button_stop_scouting"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:background="#drawable/connect_button"
android:text="Stop Scouting"
android:visibility="#{scoutingFragmentViewModel.mStopScoutingButtonVisibility}"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.31" />
<Button
android:id="#+id/button_connect"
android:layout_width="120dp"
android:layout_height="40dp"
android:layout_marginStart="8dp"
android:layout_marginTop="88dp"
android:layout_marginEnd="8dp"
android:background="#drawable/connect_button"
android:shadowColor="#A84F4F"
android:shadowDx="0"
android:shadowDy="0"
android:shadowRadius="0"
android:text="Connect"
android:textColor="#140533"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.443"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="500dp"
>
</android.support.v7.widget.RecyclerView>
</LinearLayout>
</ScrollView>
</layout>
Itemlist xml:
<?xml version="1.0" encoding="utf-8"?>
<layout>
<data>
<variable
name="itemGridViewModel"
type="com.resatech.android.navigationtest.viewModels.ItemGridViewAdapterViewModel" />
</data>
<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="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/layout_border"
android:maxWidth="150dp"
android:maxHeight="150dp"
android:layout_marginTop="20dp"
android:paddingVertical="10dp"
app:cardBackgroundColor="#ffffff">
<android.support.constraint.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="#+id/big_text"
android:layout_width="60dp"
android:layout_height="69dp"
android:layout_marginStart="20dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="21dp"
android:layout_marginBottom="16dp"
android:text="#{itemGridViewModel.values}"
android:textSize="50sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.51"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.526" />
<TextView
android:id="#+id/small_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="21dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="1dp"
android:text="#{itemGridViewModel.description}"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.468"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/big_text" />
<ImageView
android:id="#+id/image"
android:layout_width="23dp"
android:layout_height="22dp"
android:layout_marginEnd="50dp"
android:layout_marginBottom="50dp"
app:imageResource="#{itemGridViewModel.imageNames}"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.05"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.077" />
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>
</layout>
Display:

try add android:clickable="true" this line into ScrollView
android:clickable="true"
Try to used Recyclerview and set GridLayoutManger and define columns like this way..
recyclerview.setLayoutManager(new GridLayoutManager(this,2,LinearLayoutManager.VERTICAL,false));

Progress bar show under Button

Android studio 3.1
minSdkVersion 21
Here my layout xml:
<?xml version="1.0" encoding="utf-8"?>
<layout 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">
<data>
<variable
name="handler"
type="md.dotfinance.tm.android.ui.activity.AddTraderActivity" />
</data>
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/common_gray_color_bg">
<include
android:id="#+id/jsonViewToolBar"
layout="#layout/tool_bar"
android:title='#{#string/add_trader}'
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/baseTextView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="#dimen/default_margin"
android:layout_marginEnd="8dp"
android:text="#string/base"
android:textSize="13sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/jsonViewToolBar" />
<EditText
android:id="#+id/baseEditText"
style="#style/textViewOneLine"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textSize="20sp"
app:layout_constraintEnd_toEndOf="#+id/baseTextView"
app:layout_constraintStart_toStartOf="#+id/baseTextView"
app:layout_constraintTop_toBottomOf="#+id/baseTextView" />
<TextView
android:id="#+id/quoteTextView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/default_margin"
android:text="#string/quote"
android:textSize="13sp"
app:layout_constraintEnd_toEndOf="#+id/baseTextView"
app:layout_constraintStart_toStartOf="#+id/baseTextView"
app:layout_constraintTop_toBottomOf="#+id/baseEditText" />
<EditText
android:id="#+id/quoteEditText"
style="#style/textViewOneLine"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textSize="13sp"
app:layout_constraintEnd_toEndOf="#+id/baseTextView"
app:layout_constraintStart_toStartOf="#+id/baseTextView"
app:layout_constraintTop_toBottomOf="#+id/quoteTextView" />
<Button
android:id="#+id/startButton"
android:layout_width="0dp"
android:layout_height="#dimen/min_height"
android:layout_marginTop="#dimen/default_margin"
android:layout_marginBottom="#dimen/default_margin"
android:background="#color/button_gray"
android:text="#string/start"
app:layout_constraintEnd_toEndOf="#+id/baseTextView"
app:layout_constraintStart_toStartOf="#+id/baseTextView"
app:layout_constraintTop_toBottomOf="#+id/quoteEditText" />
<include
layout="#layout/progress_bar_layout"
android:visibility="gone" />
</android.support.constraint.ConstraintLayout>
</layout>
Here my progress_bar_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/containerProgressBarLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#4777"
android:clickable="true"
android:focusable="true">
<ProgressBar
android:id="#+id/progressBar"
style="?android:attr/progressBarStyle"
android:layout_width="48dp"
android:layout_height="48dp"
android:indeterminateTint="#color/colorPrimary"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
But when I start app the progress bar is UNDER button.
But I need over button.
How I can do this?

Try to use
of
android.support.constraint.ConstraintLayout
and add
android:elevation="30dp"
to the RelativeLayout tag

The best way to do this is to hide the progress bar or make it's visibility="gone". Make sure you give it an ID so you can invoke it and hide the other layout with buttons and text views. Then show the progress bar when you process a certain request. Make it invisible!!!

Try that
<?xml version="1.0" encoding="utf-8"?>
<layout 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">
<data>
<variable
name="handler"
type="md.dotfinance.tm.android.ui.activity.AddTraderActivity" />
</data>
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
layout="#layout/progress_bar_layout"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/common_gray_color_bg">
<include
android:id="#+id/jsonViewToolBar"
layout="#layout/tool_bar"
android:title='#{#string/add_trader}'
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/baseTextView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="#dimen/default_margin"
android:layout_marginEnd="8dp"
android:text="#string/base"
android:textSize="13sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/jsonViewToolBar" />
<EditText
android:id="#+id/baseEditText"
style="#style/textViewOneLine"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textSize="20sp"
app:layout_constraintEnd_toEndOf="#+id/baseTextView"
app:layout_constraintStart_toStartOf="#+id/baseTextView"
app:layout_constraintTop_toBottomOf="#+id/baseTextView" />
<TextView
android:id="#+id/quoteTextView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/default_margin"
android:text="#string/quote"
android:textSize="13sp"
app:layout_constraintEnd_toEndOf="#+id/baseTextView"
app:layout_constraintStart_toStartOf="#+id/baseTextView"
app:layout_constraintTop_toBottomOf="#+id/baseEditText" />
<EditText
android:id="#+id/quoteEditText"
style="#style/textViewOneLine"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textSize="13sp"
app:layout_constraintEnd_toEndOf="#+id/baseTextView"
app:layout_constraintStart_toStartOf="#+id/baseTextView"
app:layout_constraintTop_toBottomOf="#+id/quoteTextView" />
<Button
android:id="#+id/startButton"
android:layout_width="0dp"
android:layout_height="#dimen/min_height"
android:layout_marginTop="#dimen/default_margin"
android:layout_marginBottom="#dimen/default_margin"
android:background="#color/button_gray"
android:text="#string/start"
app:layout_constraintEnd_toEndOf="#+id/baseTextView"
app:layout_constraintStart_toStartOf="#+id/baseTextView"
app:layout_constraintTop_toBottomOf="#+id/quoteEditText" />
</android.support.constraint.ConstraintLayout>
</layout>