Develop Reference

How to make ViewPager fit under tabs?

I'm programming an Android application and I have encountered an issue with the height of the ViewPager element. I have search for an answer but I haven't found one yet. My problem is that I cannot make my ViewPager fit under the tabs, it occupies the entire screen:
This is my xml code:
<?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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".frontend.Profile">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/background"
tools:context=".frontend.Profile">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/profile_image"
android:layout_width="85dp"
android:layout_height="85dp"
android:src="#drawable/ic_user"
app:civ_border_color="#FF000000"
app:civ_border_width="2dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.029999971" />
<TextView
android:id="#+id/usernameText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/sourcesanspro_regular"
android:gravity="center_horizontal"
android:letterSpacing="0.1"
android:text="John Smith"
android:textAlignment="center"
android:textColor="#color/black"
android:textSize="22sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.17000002" />
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.24000001">
<com.google.android.material.tabs.TabItem
android:id="#+id/tabRoutines"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Routines" />
<com.google.android.material.tabs.TabItem
android:id="#+id/tabStats"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Stats" />
</com.google.android.material.tabs.TabLayout>
<androidx.viewpager.widget.ViewPager
android:id="#+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
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/tabLayout"
app:layout_constraintVertical_bias="1.0">
</androidx.viewpager.widget.ViewPager>
</androidx.constraintlayout.widget.ConstraintLayout>
</FrameLayout>
I would really appreciate if someone could tell me what I'm doing wrong.
Thank you!

You need to constraints the TabLayout to:
Be at the bottom of the TextView with
app:layout_constraintTop_toBottomOf="#+id/usernameText"
And remove the app:layout_constraintTop_toTopOf="parent"
And use a 0dp for the ViewPager height to match constraints.
<?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:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/background"
tools:context=".frontend.Profile">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/profile_image"
android:layout_width="85dp"
android:layout_height="85dp"
android:src="#drawable/ic_user"
app:civ_border_color="#FF000000"
app:civ_border_width="2dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.029999971" />
<TextView
android:id="#+id/usernameText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/sourcesanspro_regular"
android:gravity="center_horizontal"
android:letterSpacing="0.1"
android:text="John Smith"
android:textAlignment="center"
android:textColor="#color/black"
android:textSize="22sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.17000002" />
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/usernameText">
<com.google.android.material.tabs.TabItem
android:id="#+id/tabRoutines"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Routines" />
<com.google.android.material.tabs.TabItem
android:id="#+id/tabStats"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Stats" />
</com.google.android.material.tabs.TabLayout>
<androidx.viewpager.widget.ViewPager
android:id="#+id/viewPager"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tabLayout"
app:layout_constraintVertical_bias="1.0" />
</androidx.constraintlayout.widget.ConstraintLayout>
</FrameLayout>

how to make whatsapp like toolbar

I am trying to make whatsapp like appbar
My Code
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.appbar.MaterialToolbar
android:id="#+id/topAppBar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:navigationIcon="#drawable/abc_vector_test"
app:logo="#drawable/ic_baseline_edit_24"
app:subtitle="Me, You"
app:title="Group Name"
app:menu="#menu/chat_room_app_bar"
style="#style/Widget.MaterialComponents.Toolbar.Primary"
>
</com.google.android.material.appbar.MaterialToolbar>
</com.google.android.material.appbar.AppBarLayout>
The problem is that I am unable to combine display picture with navigationIcon like in whatsapp appbar
and also how to add ripple effect when we click on appbar shown below

This worked for me.
I have made the custom toolbar with imageView in it.
<androidx.coordinatorlayout.widget.CoordinatorLayout 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=".ui.chatroom.ChatRoomActivity">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.appbar.MaterialToolbar
android:id="#+id/topAppBar"
style="#style/Widget.MaterialComponents.Toolbar.Primary"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:orientation="vertical"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp"
app:menu="#menu/chat_room_app_bar"
app:title="#null">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/navigationBackButtonChatRoom"
style="#style/Widget.AppCompat.Toolbar.Button.Navigation"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/bg_dp"
android:clickable="true">
<ImageView
android:id="#+id/chatRoomDisplayImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/abc_vector_test"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.google.android.material.imageview.ShapeableImageView
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_marginTop="4dp"
android:layout_marginEnd="4dp"
android:layout_marginBottom="4dp"
android:background="#null"
android:scaleType="fitXY"
android:src="#drawable/p_p"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/chatRoomDisplayImageView"
app:layout_constraintTop_toTopOf="parent"
app:shapeAppearanceOverlay="#style/roundedImageViewRounded" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/chatInfoConstraintLayout"
style="#style/Widget.MaterialComponents.Toolbar.Primary"
android:layout_width="wrap_content"
android:layout_height="?attr/actionBarSize"
android:layout_margin="0dp"
android:background="?attr/selectableItemBackground"
android:clickable="true"
android:minWidth="540dp">
<TextView
android:id="#+id/titleTextViewChatRoom"
style="#style/TextAppearance.Widget.AppCompat.Toolbar.Title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="2dp"
android:text="Group Name"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/subtitleTextViewChatRoom"
style="#style/TextAppearance.Widget.AppCompat.Toolbar.Subtitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Me, You"
android:visibility="gone"
app:layout_constraintStart_toStartOf="#+id/titleTextViewChatRoom"
app:layout_constraintTop_toBottomOf="#+id/titleTextViewChatRoom" />
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.appbar.MaterialToolbar>
</com.google.android.material.appbar.AppBarLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/messageRecyclerView"
android:layout_width="match_parent"
android:layout_height="0dp"
android:scrollbars="vertical"
app:layout_constraintBottom_toTopOf="#+id/footerConstraintLayout"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:itemCount="100"
tools:listitem="#layout/chat_row_left_head" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/footerConstraintLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="6dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<ImageButton
android:id="#+id/sendButtonMain"
android:layout_width="47dp"
android:layout_height="47dp"
android:layout_marginEnd="4dp"
android:background="#drawable/input_circle"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/input_send" />
<LinearLayout
android:id="#+id/input_layout"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#drawable/ib_new_round"
android:gravity="bottom"
android:minHeight="47dp"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/sendButtonMain"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="4dp">
<ImageButton
android:id="#+id/emojiButtonChatRoom"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:background="#android:color/transparent"
android:src="#drawable/ib_emoji"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:tint="#color/ibEmojiIconTint" />
<EditText
android:id="#+id/mainEditText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:autoText="true"
android:background="#null"
android:capitalize="sentences"
android:hint="Type a message"
android:imeOptions="actionSend"
android:maxLines="6"
android:paddingTop="4dp"
android:paddingEnd="8dp"
android:paddingBottom="4dp"
android:scrollbarAlwaysDrawVerticalTrack="true"
android:scrollbarDefaultDelayBeforeFade="200"
android:scrollbarFadeDuration="300"
android:scrollbarStyle="outsideOverlay"
android:scrollbars="vertical"
android:textColor="#color/primary_text"
android:textColorHint="#color/hint_text"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/attachButton"
app:layout_constraintStart_toEndOf="#+id/emojiButtonChatRoom"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/attachButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="14dp"
android:layout_marginEnd="24dp"
android:layout_marginBottom="14dp"
android:rotation="-45"
android:visibility="invisible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/cameraButton"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ib_attach" />
<ImageView
android:id="#+id/cameraButton"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_marginEnd="12dp"
android:visibility="invisible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_baseline_photo_camera_24" />
</androidx.constraintlayout.widget.ConstraintLayout>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/scrollToBottomFab"
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_gravity="bottom|end"
android:layout_marginEnd="12dp"
android:layout_marginBottom="72dp"
android:clickable="true"
app:fabCustomSize="32dp"
app:maxImageSize="24dp"
app:srcCompat="#drawable/ic_baseline_keyboard_arrow_down_24" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

how can i remove space between constraintlayout and include layers?

I want to remove white space that I show in picture
Picure
I draw red circle around white space on picture
and I want remove it
I search in stackoverflow but in that case i can not find any anwswer.
My main layout is -->
toolbar_normal.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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<include layout="#layout/city_detail_act"
android:id="#+id/content"/>
<android.support.v7.widget.Toolbar
android:id="#+id/tolbar_storyButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#66cc66"
android:minHeight="?attr/actionBarSize"
android:theme="?attr/actionBarTheme"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
>
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:gravity="center"
android:orientation="horizontal"
tools:layout_editor_absoluteX="16dp">
<ImageView
android:id="#+id/imgSetting"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/setting" />
<ImageView
android:id="#+id/imgChoiceCity"
android:layout_width="80dp"
android:layout_height="50dp"
android:layout_marginStart="181dp"
android:layout_marginLeft="181dp"
android:layout_marginTop="3dp"
android:layout_marginEnd="180dp"
android:layout_marginRight="180dp"
android:layout_marginBottom="3dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/choicecity" />
<ImageView
android:id="#+id/imageViewButton"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:layout_marginBottom="8dp"
android:adjustViewBounds="false"
android:scaleType="centerInside"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/home" />
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.Toolbar>
</android.support.constraint.ConstraintLayout>
My second layout is -->
city_detail_act.xml:
<?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:orientation="vertical"
android:gravity="top"
android:paddingBottom="65dp"
>
<android.support.v7.widget.Toolbar
android:id="#+id/tolbar_story"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#66cc66"
android:minHeight="?attr/actionBarSize"
android:theme="?attr/actionBarTheme"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:gravity="center"
android:orientation="horizontal"
tools:layout_editor_absoluteX="16dp">
<ImageView
android:id="#+id/imgTooTitlelbarMainActf"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/adamak" />
<ImageView
android:id="#+id/imgTooTitlelbarMainAct"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="180dp"
android:layout_marginLeft="180dp"
android:layout_marginTop="3dp"
android:layout_marginEnd="181dp"
android:layout_marginRight="181dp"
android:layout_marginBottom="3dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/title" />
<ImageView
android:id="#+id/imgNavigationView"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:layout_marginBottom="8dp"
android:adjustViewBounds="false"
android:scaleType="centerInside"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/dot" />
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.Toolbar>
<android.support.v4.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" >
<TextView
android:id="#+id/tx_state6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" "
android:textSize="15sp"
android:fontFamily="#font/adobearabicregular"
/>
<ImageView
android:id="#+id/imv_refresh2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/tx_state6"
android:layout_centerHorizontal="true"
android:layout_gravity="center"
android:layout_marginTop="40dp"
android:padding="10px"
android:src="#drawable/refresh"
/>
<WebView
android:id="#+id/web2"
android:layout_width="76dp"
android:layout_height="76dp"
android:layout_below="#+id/imv_refresh2"
android:layout_centerHorizontal="true"
android:layout_gravity="center"
>
</WebView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="26dp"
android:layout_marginLeft="13dp"
android:layout_marginRight="13dp"
android:layout_marginBottom="12dp"
android:gravity="right"
android:orientation="horizontal">
<TextView
android:id="#+id/txMore"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/adobearabicbold"
android:text="مشاهده همه..."
android:textSize="12sp"
/>
<TextView
android:id="#+id/txYHinCityDetail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="3dp"
android:fontFamily="#font/adobearabicbold"
android:text="هر آنچه درمورد قم باید بدانید"
android:textSize="24sp" />
</LinearLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/rvListYH"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<android.support.v7.widget.RecyclerView
android:id="#+id/rvListBazar"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<ProgressBar
android:id="#+id/progressBar66"
style="#android:style/Widget.Holo.ProgressBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/rv_listcity"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:indeterminate="true"
android:visibility="gone" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</LinearLayout>
How can i do it work?
Thank you

Removing the following line parent tag in file city_detail_act.xml should fix it
android:paddingBottom="65dp"
And add these to your include tag
android:layout_width="match_parent"
android:layout_height="match_parent"
Also, consider using Bottom Nav layout for UI like this.

First remove this:
android:paddingBottom="65dp"
Then your include should be like this:
<include
android:id="#+id/content"
layout="#layout/city_detail_act"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#id/tolbar_storyButton"
app:layout_constraintTop_toTopOf="parent" />

How do I overlap the Cardview on Image view?

My run time view is not matching with my design view.
my targeted is design .
but when I run on an android device. I got this
How do I overlap the Cardview on Image view?
Does it possible to accomplish. at first, I use FrameLayout then use Relative Layout Now I am out of my option.
Here is my design Code
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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:fitsSystemWindows="true"
android:background="#color/grey_10"
android:clipChildren="false"
tools:context="com.kurtihouse.nirzonpop.detailspage.view.ProductDetailsActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="256dp"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleTextAppearance="#style/TextAppearance.AppCompat.Title"
app:layout_scrollFlags="scroll"
app:titleEnabled="false">
<ImageView
android:id="#+id/ivProductImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="fitXY"
android:src="#drawable/image_8"
app:layout_collapseMode="pin" />
<!--<android.support.v7.widget.RecyclerView
android:id="#+id/rvProductImage"
android:layout_width="match_parent"
android:layout_height="#dimen/product_image_height"
android:layout_marginEnd="1dp"
android:contentDescription="#string/image_description"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.4"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#mipmap/ic_launcher" />-->
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/overlay_dark_40" />
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:contentInsetStartWithNavigation="0dp"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</FrameLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:tint="#android:color/white"
app:srcCompat="#drawable/img_wizard_1" />
<!-- <View
android:layout_width="#dimen/spacing_middle"
android:layout_height="0dp" />
<TextView
android:id="#+id/textView9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Nature Park"
android:textAppearance="#style/Base.TextAppearance.AppCompat.Title"
android:textColor="#android:color/white" />-->
</LinearLayout>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="#+id/nested_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="-50dp"
android:clipToPadding="false"
android:scrollbars="vertical"
android:scrollingCache="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.v7.widget.CardView
android:id="#+id/cardView"
style="#style/CardViewTheme"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_anchorGravity=""
app:layout_constraintTop_toBottomOf="#+id/rvProductImage">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="10dp"
android:paddingBottom="10dp">
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_share_gray" />
<ImageView
android:id="#+id/ivFavorite"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
app:layout_constraintEnd_toStartOf="#+id/imageView2"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_favorite_off" />
<LinearLayout
android:id="#+id/llDirectContract"
android:layout_width="wrap_content"
android:layout_height="36dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:background="#color/colorBgSuccess"
android:orientation="horizontal"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvProductCode">
<ImageView
android:id="#+id/ivCall111"
android:layout_width="#dimen/iv_call_width"
android:layout_height="#dimen/iv_call_height"
android:paddingTop="5dp"
app:srcCompat="#drawable/ic_phone" />
<TextView
android:id="#+id/tvDirectContractNot"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="#dimen/padding_10"
android:text="#string/direct_buy"
android:textColor="#color/colorWhite"
android:textStyle="bold"
app:layout_constraintVertical_bias="0.0" />
</LinearLayout>
<TextView
android:id="#+id/tvPrice"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:text=""
android:textColor="#color/colorBlack"
android:textSize="24sp"
android:textStyle="bold"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/imageView2" />
<TextView
android:id="#+id/tvProductName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:text=""
android:textColor="#color/colorBlack"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvPrice" />
<TextView
android:id="#+id/tvProductCode"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:text="swewewe"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvProductName" />
<TextView
android:id="#+id/tvAvailability"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:background="#drawable/border_toast_success"
android:paddingStart="10dp"
android:paddingTop="3dp"
android:paddingEnd="10dp"
android:paddingBottom="3dp"
android:text="TextView"
android:textColor="#color/colorWhite"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="#+id/llDirectContract"
app:layout_constraintStart_toEndOf="#+id/llDirectContract"
app:layout_constraintTop_toTopOf="#+id/llDirectContract" />
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>
<View
android:layout_width="match_parent"
android:layout_height="#dimen/spacing_large" />
<android.support.v7.widget.CardView
android:id="#+id/sizeCardView"
style="#style/CardViewTheme"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/cardView">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingBottom="10dp">
<TextView
android:id="#+id/tvSize"
style="#style/Text.SizeSection"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:text="#string/lbl_size" />
<TextView
android:id="#+id/tv_sizeList"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:text="dlkfjldsfjkldsjf" />
</LinearLayout>
</android.support.v7.widget.CardView>
<View
android:layout_width="match_parent"
android:layout_height="#dimen/spacing_large" />
<android.support.v7.widget.CardView
android:id="#+id/detailsCardView"
style="#style/CardViewTheme"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:paddingBottom="150dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/sizeCardView">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/descriptionLabel"
style="#style/Text.Description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="Description"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tvDescription"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
android:text="deesadefdsfdasfdsaf"
android:textSize="13sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/descriptionLabel" />
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>
<View
android:layout_width="match_parent"
android:layout_height="#dimen/spacing_large" />
<Button
android:id="#+id/btnAddCart"
android:layout_width="#dimen/btn_add_cart_width"
android:layout_height="40dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:background="#drawable/round_button"
android:drawableStart="#drawable/ic_shopping_cart_white"
android:paddingStart="16dp"
android:text="#string/add_to_cart_label"
android:textAllCaps="false"
android:textColor="#color/colorWhite"
android:textSize="22sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

This is happening because your appbarLayout have some elevation above the card view ! So use :-
app:elevation="0dp"
to your appBarLayout

Scrollable fragment in ConstraintLayout - Android

I would like to create an app with a layout like this
There are three fragments with some of views. Unfortunately, I can't scroll up or down in the fragments of the viewpager. For example, I can't scroll the text in this fragment
Here is the code of my layout:
<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/iv_1"
android:layout_width="0dp"
android:layout_height="250dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#color/colorPrimary" />
<ImageView
android:id="#+id/iv_2"
android:layout_width="0dp"
android:layout_height="62dp"
android:background="#drawable/scrim_gradient"
app:layout_constraintBottom_toBottomOf="#+id/1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
<EditText
android:id="#+id/et_1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:ems="10"
android:hint="Name"
android:inputType="textCapWords"
android:maxLines="1"
android:textAppearance="#style/TextAppearance.AppCompat.Display1"
android:textColor="#color/white"
android:textColorHint="#color/whiteGreyish"
app:layout_constraintBottom_toBottomOf="#+id/iv_challenge_cover_image"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="#+id/iv_2"
app:layout_constraintRight_toRightOf="#+id/iv_2" />
<ImageView
android:id="#+id/btn_add_cover"
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_marginRight="8dp"
app:layout_constraintBottom_toTopOf="#+id/iv_2"
app:layout_constraintRight_toRightOf="#+id/iv_1"
app:srcCompat="#drawable/ic_add_a_photo" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="0dp"
android:layout_height="56dp"
android:layout_marginTop="0dp"
android:elevation="2dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/iv_1"
app:tabGravity="fill"
app:tabMode="fixed"
app:tabSelectedTextColor="#color/whiteGreyish"
app:tabTextColor="#color/white" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/action_upload"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:layout_marginRight="16dp"
app:fabSize="normal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:srcCompat="#drawable/ic_cloud_upload" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tabs"
app:layout_constraintVertical_bias="1.0">
<ScrollView
android:id="#+id/scrollView2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
android:isScrollContainer="false">
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</ScrollView>
</LinearLayout>