Develop Reference

Why my layout look like this ? Here is my XML file

Here Is my
and XML code first i use a Linear Layout then card View and other views so why my view overwrite where is the problem please watch the AVD picture and tell me where is the error.Sorry for bad english.
<?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"
android:id="#+id/item_linerLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="5dp">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardElevation="10dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp">
<TextView
android:id="#+id/item_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1"
android:textSize="36sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/item_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Title"
app:layout_constraintStart_toEndOf="#+id/item_id"
app:layout_constraintTop_toTopOf="#+id/item_id" />
<TextView
android:id="#+id/item_AuthorName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Author"
app:layout_constraintStart_toStartOf="#+id/item_title"
app:layout_constraintTop_toBottomOf="#+id/item_title" />
<TextView
android:id="#+id/item_pages"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="3dp"
android:text="100"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
</LinearLayout>

Try to use android:fitsSystemWindows="true" in your root layout(In your case LinearLayout). I recommend you to read this article to understand system overlapping. I hope it helps)

I have removed redundant LinearLayout parent and made CardView parent. Also your TextView with id item_pages is not overlapping.
<androidx.cardview.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
app:cardElevation="10dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp">
<TextView
android:id="#+id/item_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1"
android:textSize="36sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/item_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="Title"
app:layout_constraintBottom_toTopOf="#id/item_AuthorName"
app:layout_constraintStart_toEndOf="#+id/item_id" />
<TextView
android:id="#+id/item_AuthorName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="4dp"
android:text="Author"
app:layout_constraintBottom_toBottomOf="#id/item_id"
app:layout_constraintStart_toStartOf="#+id/item_title" />
<TextView
android:id="#+id/item_pages"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="3dp"
android:text="100"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>

How to set height of a view in percent using ConstraintLayout

Currently I'm learning ConstraintLayout
below is my code that i have tried so far
<?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"
android:background="#000000"
android:fitsSystemWindows="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context=".activity.PhaseListActivity">
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:weightSum="1">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.8"
android:background="#color/colorAccent">
<VideoView
android:id="#+id/myVideoView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="visible" />
<TextSwitcher
android:id="#+id/tvAnimText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_gravity="center"
android:fontFamily="#font/knowledge_bold"
android:textColor="#color/greenColor"
android:textSize="#dimen/_100ssp"
android:textStyle="bold"
tools:text="1" />
</FrameLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.2"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="10dp"
android:text="Scrollbale view below my videoView"
android:textColor="#ff00"
android:textStyle="bold" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="10dp"
android:text="Scrollbale view below my videoView"
android:textColor="#ff00"
android:textStyle="bold" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="10dp"
android:text="Scrollbale view below my videoView"
android:textColor="#ff00"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>
</androidx.core.widget.NestedScrollView>
<LinearLayout
android:id="#+id/bottomView"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_gravity="bottom"
android:background="#color/greenColor"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="Fixed Bottombar"
android:textColor="#ff00"
android:textStyle="bold" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
I want don't want use nested LinearLayout inside ConstraintLayout
Also in above layout my NestedScrollView is not scrolling
I want to create this type of screen using ConstraintLayout
My expected OUTPUT
I have tried to set Guideline but it didn't work for me, because i don't know how to use Guideline in above layout
Can anybody help me create this screen only using ConstraintLayout
If need more information please do let me know. Thanks in advance. Your efforts will be appreciated.

So, after looking at your xml file, I've come up with solution to get rid of nested LinearLayout hierarchy in below solution:
<?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"
android:background="#000000"
android:fitsSystemWindows="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<androidx.core.widget.NestedScrollView
android:layout_width="0dp"
android:layout_height="0dp"
android:fillViewport="true"
app:layout_constraintBottom_toTopOf="#id/tv_bottom_view"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<VideoView
android:id="#+id/myVideoView"
android:layout_width="0dp"
android:layout_height="0dp"
android:visibility="visible"
app:layout_constrainedHeight="true"
app:layout_constraintBottom_toTopOf="#id/tv1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_default="percent"
app:layout_constraintHeight_percent="0.85"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="packed" />
<TextSwitcher
android:id="#+id/tvAnimText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_gravity="center"
android:fontFamily="#font/knowledge_bold"
android:textColor="#color/greenColor"
android:textSize="#dimen/_100ssp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="#id/myVideoView"
app:layout_constraintEnd_toEndOf="#id/myVideoView"
app:layout_constraintStart_toStartOf="#id/myVideoView"
app:layout_constraintTop_toTopOf="#id/myVideoView"
tools:text="1" />
<TextView
android:id="#+id/tv1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="10dp"
android:text="Scrollbale view below my videoView"
android:textColor="#ff00"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#id/tv2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/myVideoView" />
<TextView
android:id="#+id/tv2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="10dp"
android:text="Scrollbale view below my videoView"
android:textColor="#ff00"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#id/tv3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/tv1" />
<TextView
android:id="#+id/tv3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="10dp"
android:text="Scrollbale view below my videoView"
android:textColor="#ff00"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/tv2" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
<TextView
android:id="#+id/tv_bottom_view"
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
android:text="Fixed Bottombar"
android:textColor="#ff00"
android:textStyle="bold"
app:layout_constrainedHeight="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_default="percent"
app:layout_constraintHeight_percent="0.08"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Let me know if there's any query in comments. For your fixed bottombar TextView, now you can change height percent to whatever you want to change it's height dynamically.

You can use below code for bottom View which remove your Nested LinearLayout :
<TextView
android:id="#+id/bottomView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Fixed Bottombar"
android:textColor="#ff00"
android:background="#00ff00"
android:padding="15dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:textStyle="bold" />

Can I put a Button to bottom of a ConstraintLayout inside ScrollView?

I have a ScrollView contains a ConstraintLayout. Inside the ConstraintLayout, I put many views with an attribute layout_constraintTop_toBottomOf to make a relation between the view and the view top of it, and I used layout_marginTop to put spaces between the views.
In my design, I have a Button that should be in the bottom of the layout and it cannot happen with the layout_marginTop because it should have a relation with the bottom of the ConstraintLayout.
Here's my code:
<ScrollView 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">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="10dp"
android:paddingBottom="10dp">
<TextView
android:id="#+id/logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_margin="120dp"
android:text="Logo"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="#+id/un_et"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginLeft="28dp"
android:layout_marginTop="25dp"
android:layout_marginRight="28dp"
android:gravity="center"
android:hint="User name"
android:textColor="#bebebe"
android:textCursorDrawable="#null"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/logo" />
<EditText
android:id="#+id/pw_et"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginLeft="28dp"
android:layout_marginTop="13dp"
android:layout_marginRight="28dp"
android:gravity="center"
android:hint="Password"
android:inputType="textPassword"
android:textColor="#bebebe"
android:textCursorDrawable="#null"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/un_et" />
<RelativeLayout
android:id="#+id/save_pw"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:paddingLeft="28dp"
android:paddingRight="28dp"
app:layout_constraintTop_toBottomOf="#id/pw_et">
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:buttonTint="#bebebe"
android:text="Save account"
android:textColor="#bebebe" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:text="Forget password?"
android:textColor="#a40000" />
</RelativeLayout>
<Button
android:id="#+id/btn"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginLeft="28dp"
android:layout_marginTop="17dp"
android:layout_marginRight="28dp"
android:text="Login"
android:textAllCaps="false"
android:textColor="#FFFFFF"
app:layout_constraintTop_toBottomOf="#id/save_pw" />
<Button
android:id="#+id/btn2"
android:layout_width="match_parent"
android:layout_height="50dp"
android:text="Sign up"
android:textAllCaps="false"
android:textColor="#FFFFFF"
app:layout_constraintTop_toBottomOf="#id/btn" />
</android.support.constraint.ConstraintLayout>
</ScrollView>

Replace ScrollView with NestedScrollView & also add android:fillViewport="true" like this
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
// rest of code
<Button
android:id="#+id/btn2"
android:layout_width="match_parent"
android:layout_height="50dp"
android:text="Sign up"
android:textAllCaps="false"
android:textColor="#FFFFFF"
app:layout_constraintVertical_bias="1"
app:layout_constraintTop_toBottomOf="#id/btn"
app:layout_constraintBottom_toBottomOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>

Just set this property to your button:
app:layout_constraintBottom_toBottomOf="parent"
Then add this to your last view this property:
app:layout_constraintBottom_toTopOf="#+id/button"
Also, add to your last view:
android:layout_marginBottom="height_of_button"
However, if you are adding a lot of views it would be better to populate them inside a RecyclerView using an Adapter. Decide what you want to do. Also, tell me if I understood your question correctly, it was a bit confusing.

I found one solution to keep the button at the bottom, doesn't matter is your text is dynamic, read about app:layout_constraintVertical_bias https://developer.android.com/reference/androidx/constraintlayout/widget/ConstraintLayout#Bias
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/text_gallery"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:textAlignment="center"
android:textSize="20sp"
android:text="Title"
app:layout_constraintTop_toTopOf="parent"/>
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
android:fillViewport="true"
app:layout_constraintTop_toBottomOf="#id/text_gallery"
app:layout_constraintBottom_toBottomOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:isScrollContainer="true">
<androidx.appcompat.widget.AppCompatTextView
app:layout_constraintTop_toTopOf="parent"
android:id="#+id/texto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="30sp"
android:text=" Text \n Text" />
<androidx.appcompat.widget.AppCompatButton
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Buton1"
app:layout_constraintVertical_bias="1"
app:layout_constraintTop_toBottomOf="#+id/texto"
app:layout_constraintBottom_toBottomOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>

RecyclerView Last Element Not Showing or getting cut off

For those who believe this is a duplicate question I have already consulted the current solutions available on stack overflow Such as:
Last Item in recyclerview is cut off
RecyclerView cutting off last item
However, no matter what I try I am unable to completely see, on in some cases see at all the last element. I have already checked my adapter to make sure the last item is being rendered.
Here are the screenshots and xml. Thanks
// This is the card view that I render using the adapter
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:background="#drawable/card_border_background">
<ImageView
android:layout_width="100dp"
android:layout_height="90dp"
tools:srcCompat="#tools:sample/avatars"
android:id="#+id/collectionImage"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
<TextView
android:text="collectionName"
android:layout_width="142dp"
android:layout_height="49dp"
android:id="#+id/collectionName"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toEndOf="#+id/collectionImage"
/>
<TextView
android:text="productName"
android:layout_width="141dp"
android:layout_height="35dp"
android:id="#+id/productName"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toEndOf="#+id/collectionImage" android:layout_marginTop="56dp"
/>
<TextView
android:layout_width="107dp"
android:layout_height="25dp"
android:id="#+id/productName2"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toEndOf="#+id/productName"
android:text="# available :"
/>
<TextView
android:layout_width="32dp"
android:layout_height="24dp"
android:id="#+id/numberOfInventoryItems"
android:text="123"
app:layout_constraintTop_toBottomOf="#+id/productName2" app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="16dp"/>
</android.support.constraint.ConstraintLayout>
This is the main layout that contains the recylerview that is inside a
nested scrollview. Like I said I tried this solution by reading other threads.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/main_constraint"
tools:context=".CollectionDetailsPage">
<android.support.constraint.ConstraintLayout
android:id="#+id/top_card"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
android:background="#drawable/card_border_background"
android:layout_marginTop="8dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="#+id/collection_image_card"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:srcCompat="#tools:sample/avatars"
app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="2dp"
android:layout_marginTop="2dp"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="ContentDescription"/>
<TextView
android:id="#+id/collection_title_card"
android:text="Collection Title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAlignment="center"
app:layout_constraintStart_toEndOf="#+id/collection_image_card"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginStart="8dp"
android:textStyle="bold" android:textSize="18sp" android:textColor="#android:color/black"
tools:ignore="HardcodedText"/>
<TextView
android:id="#+id/collection_html_card"
android:text="sample body html"
android:layout_width="200dp"
android:layout_height="wrap_content"
app:layout_constraintStart_toEndOf="#+id/collection_image_card"
android:layout_marginStart="8dp"
android:layout_marginTop="12dp"
app:layout_constraintTop_toBottomOf="#+id/collection_title_card"
tools:ignore="HardcodedText"/>
</android.support.constraint.ConstraintLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fillViewport="true"
app:layout_constraintTop_toBottomOf="#+id/top_card"
android:id="#+id/nestedScrollView"
android:scrollbars="vertical" app:layout_constraintStart_toStartOf="parent"
>
<android.support.v7.widget.RecyclerView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/recyclerView_Collections_Data"
tools:ignore="MissingConstraints"/>
</android.support.v4.widget.NestedScrollView>
<TextView
android:text="Loading..."
android:layout_width="125dp"
android:layout_height="40dp"
android:id="#+id/loading_title"
android:textStyle="bold"
android:textColor="#color/colorPrimaryDark"
android:textSize="24sp"
android:layout_marginStart="16dp"
app:layout_constraintStart_toStartOf="parent"
android:layout_marginTop="12dp"
app:layout_constraintTop_toBottomOf="#+id/top_card"
tools:ignore="HardcodedText"/>
<View
android:layout_width="match_parent"
android:layout_height="25dp"
android:background="#color/colorPrimary"
android:id="#+id/view"
tools:ignore="MissingConstraints"
app:layout_constraintBottom_toBottomOf="parent"/>
</android.support.constraint.ConstraintLayout>

this obviously is because of:
<View
android:layout_width="match_parent"
android:layout_height="25dp"
android:background="#color/colorPrimary"
android:id="#+id/view"
tools:ignore="MissingConstraints"
app:layout_constraintBottom_toBottomOf="parent"/>
have you ever had a closer look at the first one CardView ??
android:fillViewport="true" and tools:ignore="MissingConstraints" look suspicious;
replace these ConstraintLayout with LinearLayoutCompat, because these are linear layouts.
that NestedScrollView just would need weight 1.00 and height 0dp, to fill the space.

Round corners of MapFragment and ConstraintLayout in CardView

I am trying to build a CardView based layout which contains both a MapFragment and a ConstraintLayout. The problem is that the cardview has rounded edges but this is not getting applied to the MapFragment and the ConstraintView inside the Card.
I have tried using Drawables with rounded corners as described here but it doesn't seem to work, and the Card's rounded corners either get drawn over by pointy edges or leave a border (depending on whether I use the drawable or leave it out).
What am I doing wrong, or missing?
The Layout XML is as follows:
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:background="?android:attr/selectableItemBackground"
android:clickable="true"
android:focusable="true"
app:cardCornerRadius="20dp">
<android.support.constraint.ConstraintLayout
android:id="#+id/view_card"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp">
<android.support.constraint.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintGuide_end="167dp"
app:layout_constraintStart_toStartOf="parent" />
<fragment
android:id="#+id/map"
android:name="com.google.android.gms.maps.MapFragment"
android:layout_width="0dp"
android:layout_height="0dp"
app:cameraZoom="13"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/guideline"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:liteMode="true"
app:mapType="normal" />
<android.support.constraint.ConstraintLayout
android:id="#+id/linearLayout"
android:layout_width="0dp"
android:layout_height="match_parent"
android:background="#drawable/drawable_rounded_right"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/map"
app:layout_constraintTop_toTopOf="parent">
<android.support.constraint.ConstraintLayout
android:id="#+id/view_foreground"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#drawable/drawable_rounded_right_upper"
android:visibility="visible"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
tools:layout_conversion_absoluteHeight="105dp"
tools:layout_conversion_absoluteWidth="162dp"
tools:layout_editor_absoluteY="5dp">
<TextView
android:id="#+id/txtFname"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="Name"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:layout_conversion_absoluteHeight="30dp"
tools:layout_conversion_absoluteWidth="59dp" />
<TextView
android:id="#+id/textView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hours"
android:textAppearance="#style/TextAppearance.AppCompat.Small"
app:layout_constraintEnd_toEndOf="#+id/txtHours"
app:layout_constraintStart_toStartOf="#+id/txtHours"
app:layout_constraintTop_toBottomOf="#+id/txtHours"
tools:layout_conversion_absoluteHeight="19dp"
tools:layout_conversion_absoluteWidth="38dp"
tools:layout_editor_absoluteX="293dp"
tools:layout_editor_absoluteY="80dp" />
<TextView
android:id="#+id/txtHours"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:text="10"
android:textAppearance="#style/TextAppearance.AppCompat.Display1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:layout_conversion_absoluteHeight="46dp"
tools:layout_conversion_absoluteWidth="38dp" />
<TextView
android:id="#+id/txtGender"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Male"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"
app:layout_constraintStart_toStartOf="#+id/txtFname"
app:layout_constraintTop_toBottomOf="#+id/txtFname"
tools:layout_conversion_absoluteHeight="19dp"
tools:layout_conversion_absoluteWidth="31dp"
tools:layout_editor_absoluteX="185dp"
tools:layout_editor_absoluteY="64dp" />
<TextView
android:id="#+id/textView24"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Age"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="#+id/txtGender"
app:layout_constraintTop_toBottomOf="#+id/txtGender"
tools:layout_conversion_absoluteHeight="19dp"
tools:layout_conversion_absoluteWidth="24dp"
tools:layout_editor_absoluteX="185dp"
tools:layout_editor_absoluteY="83dp" />
<TextView
android:id="#+id/txtAge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0"
app:layout_constraintBaseline_toBaselineOf="#+id/textView24"
app:layout_constraintStart_toEndOf="#+id/textView24"
tools:layout_conversion_absoluteHeight="19dp"
tools:layout_conversion_absoluteWidth="8dp"
tools:layout_editor_absoluteX="217dp"
tools:layout_editor_absoluteY="83dp" />
</android.support.constraint.ConstraintLayout>
<Button
android:id="#+id/btnAction1"
style="#style/Widget.AppCompat.Button.Borderless.Colored"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/drawable_rounded_right_lower"
android:text="Action"
android:textColor="#color/brightblue"
android:textColorLink="#color/brightblue"
android:textSize="12dp"
android:textStyle="italic"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/view_foreground"
tools:layout_conversion_absoluteHeight="30dp"
tools:layout_conversion_absoluteWidth="88dp" />
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>

Enclosing the mapview in a cardview and changing the radius of the cardview can be a nice shot.
<android.support.v7.widget.CardView
android:layout_width="300dp"
android:layout_height="350dp"
app:cardCornerRadius="12dp">
<fragment
android:id="#+id/map"
android:name="com.google.android.gms.maps.MapFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:cameraZoom="13"
app:liteMode="true"
app:mapType="normal" />
</android.support.v7.widget.CardView>
I really think your view hierarchy is quite nested and will amount to redundancy...(Good use of one Constraint layout can yield same interface, you have about 3). I guess you have to work on that.
Besides, you can add some margin to the map..., shift it from the edges. ( I hope that is what you want to achieve )