How to make curve corner for collapsing toolbar while scrolling
What I am Expecting is
What I am Getting is
Note the image is scrollable and inside collapsing toolbar
Code is given below
<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:padding="16dp">
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:id="#+id/parent_coordinate_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
android:outlineProvider="background">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="300dp"
android:background="#android:color/transparent"
app:elevation="0dp"
android:outlineProvider="background"
android:clipToPadding="false"
android:fitsSystemWindows="true">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
android:fitsSystemWindows="true"
app:contentScrim="#android:color/transparent"
app:collapsedTitleGravity="center"
app:title="Image"
app:collapsedTitleTextAppearance="#style/CollapseCollapsedStyle"
app:expandedTitleTextAppearance="#style/CollapseExpandedStyle"
android:clipToPadding="false"
android:outlineProvider="background">
<com.google.android.material.appbar.MaterialToolbar
android:id="#+id/material_tool_bar"
android:layout_width="match_parent"
android:layout_height="60dp"
app:layout_collapseMode="pin"
app:layout_collapseParallaxMultiplier="0.75"
app:contentInsetLeft="0dp"
android:contentInsetLeft="0dp"
app:contentInsetStartWithNavigation="0dp"
app:contentInsetStart="0dp"
android:contentInsetStart="0dp">
</com.google.android.material.appbar.MaterialToolbar>
<ImageView
android:id="#+id/coffee_img"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:src="#drawable/coffee"
app:layout_collapseMode="pin"
android:scaleType="centerCrop"/>
<TextView
android:layout_margin="12dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Image"
android:textSize="24sp"
android:layout_gravity="bottom"
android:paddingHorizontal="10dp"
android:paddingVertical="5dp"
android:gravity="center"
app:layout_collapseMode="parallax"
android:background="#drawable/light_grey_curved_bg"/>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="60dp"
android:padding="12dp">
<include
android:layout_width="40dp"
android:layout_height="40dp"
layout="#layout/common_circular_back_button"
android:layout_centerVertical="true"/>
<include
android:layout_width="40dp"
android:layout_height="40dp"
layout="#layout/like_button_with_loader"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"/>
</RelativeLayout>
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="20sp"
android:text="#string/dummy_text"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="20sp"
android:text="#string/dummy_text"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="20sp"
android:text="#string/dummy_text"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="20sp"
android:text="#string/dummy_text"/>
</LinearLayout>
</androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Everything working fine the curved corner of imageview reflect but while scrolling to the the to the curved corner apply only for the bottom corner. Top corner of the image gets rectangle shape
Is it possible to curve the corner of the collapsing toolbar android?
Related
What I need is that SwipeRefresh animation has to start at the top of the screen inside of CoordinatorLayout with CollapsingToolbar.
If I wrap the RecyclerView inside SwipeRefreshLayout then the animation will start below CollapsingToolbarLayout.
If I wrap the whole CoordinatorLayout inside SwipeRefreshLayout then the behavior won't be very precise and it won't work out of the first swipe.
Here is the layout where SwipeRefresh animation is shown below the CollapsingToolbar:
<androidx.coordinatorlayout.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
android:fitsSystemWindows="true">
<net.telekom.smartcity.custom.OscaAppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:layout_height="#dimen/services_toolbar_height"
android:theme="#style/ThemeOverlay.AppCompat.Light"
android:windowDrawsSystemBarBackgrounds="true"
android:fitsSystemWindows="true">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapsingToolbarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentScrim="#android:color/white"
android:minHeight="?attr/actionBarSize"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:toolbarId="#id/marketplaceToolbar"
android:fitsSystemWindows="true">
<ImageView
android:id="#+id/zoomableImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="matrix"
android:layout_gravity="center"
app:layout_collapseMode="parallax"
android:fitsSystemWindows="true"/>
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/black35a"
android:fitsSystemWindows="true"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/services_toolbar_title_top_margin"
android:layout_marginStart="#dimen/services_toolbar_infobox_margin_start"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/marketplace_toolbar_message1"
android:textSize="#dimen/services_toolbar_title_size"
android:paddingBottom="#dimen/services_toolbar_title_padding_bottom"
android:textColor="#color/white"
style="#style/RobotoBold"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/services_toolbar_title_description_top_margin"
android:text="#string/services_toolbar_message2"
android:textColor="#color/white"
android:textSize="#dimen/services_toolbar_description_size"
style="#style/RobotoLight"/>
</LinearLayout>
<androidx.appcompat.widget.Toolbar
android:id="#+id/marketplaceToolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
android:fitsSystemWindows="false">
<LinearLayout
android:id="#+id/toolbarCityBox"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_gravity="start">
<ImageView
android:id="#+id/toolbarCoat"
android:layout_width="#dimen/toolbar_coa_size"
android:layout_height="#dimen/toolbar_coa_size"
android:layout_gravity="center_vertical"/>
<TextView
android:id="#+id/toolbarTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="#dimen/toolbar_title_size"
android:layout_marginStart="16dp"
android:layout_gravity="center_vertical"
android:textColor="#color/black"
style="#style/RobotoMedium"
/>
</LinearLayout>
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</net.telekom.smartcity.custom.OscaAppBarLayout>
<androidx.swiperefreshlayout.widget.SwipeRefreshLayout
android:id="#+id/swipeRefreshLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</androidx.swiperefreshlayout.widget.SwipeRefreshLayout>
In my application im using CoordinatorLayout,AppBarLayout and CollapsingToolbarLayout because i want my app to have top menu bar pinned and header which hides on scroll. I have recyclerview where my items are listed, and items are made in CardView.
Problem is that when i add toolbar as CollapsingToolbarLayouts child at bottom of screen,under recyclerview, on my phone whitespace appears. Also whitespaces dimensions are same like toolbars. When i remove toolbar whitespace also disappears.
here is my main xml code:
<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:background="#color/GrayColour"
android:orientation="vertical"
tools:context=".MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_collapseMode="parallax">
<include
android:id="#+id/Header"
layout="#layout/header_content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="53dp"/>
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_collapseMode="pin"
android:contentInsetLeft="0dp"
android:contentInsetStart="0dp"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
android:contentInsetRight="0dp"
android:contentInsetEnd="0dp"
app:contentInsetRight="0dp"
app:contentInsetEnd="0dp">
<include
android:id="#+id/TopBar"
layout="#layout/top_navigation_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/Categories"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
tools:listitem="#layout/list_item"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
app:layout_constraintBottom_toBottomOf="parent"
/>
</android.support.design.widget.CoordinatorLayout>
and here is my xml code for items with who recyclerview is filled:
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/white_background_rounded_corners"
android:layout_margin="5dp">
<LinearLayout
android:layout_width="156dp"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:background="#drawable/white_background"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="#+id/ivCategory"
android:layout_width="156dp"
android:layout_height="100dp"
android:layout_marginTop="8dp"
android:background="#null"
android:clickable="true"
android:contentDescription="#string/category"
android:focusable="true"
android:scaleType="fitCenter"
android:src="#mipmap/android_icon" />
<TextView
android:id="#+id/tvCategoryName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:text="#string/text"
android:textColor="#color/mainColour"
android:textSize="20sp"
android:textStyle="bold" />
</LinearLayout>
</android.support.v7.widget.CardView
I am trying to implement a CoordinatorLayout with a GridView, how ever I'm having trouble with the xml, it doesn't look the way I want it to be. Can someone please help get it right?
The XML:
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/background_light"
android:fitsSystemWindows="true">
<FrameLayout
android:id="#+id/main_screen_frame"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/main_appbar"
android:layout_width="match_parent"
android:layout_height="200dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/main_collapsing"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginEnd="64dp">
<!--ImageView
android:id="#+id/header_image_id"
android:layout_width="100dp"
android:layout_height="90dp"
android:layout_marginBottom="0dp"
android:src="#drawable/logo"
android:layout_gravity="center_horizontal"/-->
<Button
android:id="#+id/back_to_topics_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:visibility="gone"
android:background="#color/colorBeige"
android:textColor="#color/colorWhite"
android:layout_margin="10dp"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/search_panel_id"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layoutDirection="rtl"
android:focusableInTouchMode="true">
<TextView
android:id="#+id/text_view_id"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:textAlignment="center"
android:text="#string/secondary_title"
android:layout_marginBottom="5dp"/>
<android.support.v7.widget.SearchView
android:id="#+id/search_view_id"
android:layoutDirection="rtl"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:queryHint="#string/search_view_hint"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:queryBackground="#color/colorWhite"/>
</LinearLayout>
<!-- Used to hold the GridView Fragment-->
<FrameLayout
android:id="#+id/fragment_layout_id"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/search_panel_id"
android:layout_marginTop="10dp"
android:orientation="horizontal">
</FrameLayout>
</RelativeLayout>
</android.support.v4.widget.NestedScrollView>
</FrameLayout>
</android.support.design.widget.CoordinatorLayout>
As you can see in the image below, my SearchView and the text appear at the top of the screen how ever I want them to appear beneath the blue are. The white area is where I will hold my GridView items, so when I'll scroll the Grid would expend to the top with both the SearchView and the text.
I have a CoordinatorLayout with an AppBarLayout and a CollapsingToolbarLayout. In CollapsingToolbarLayout I'm using a LinearLayout showing user info as a layout_collapseMode=parallax element, below of it, a TabLayout.
The behaviour that I expect is a smooth hiding of the user info while the TabLayout is scrolling up or down.
The problem is that the items positions are reset when I scroll down a bit, hiding entirely the user info layout.
```
<?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"
android:id="#+id/coordinator_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/home_green_gradient"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:elevation="2dp">
<!-- user info -->
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll">
<RelativeLayout
android:visibility="visible"
android:layout_width="match_parent"
android:layout_height="244dp"
android:clipChildren="false"
android:clipToPadding="false"
android:orientation="horizontal"
app:layout_collapseMode="parallax">
<LinearLayout
android:id="#+id/profile_store_index_layout"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginRight="40dp"
android:layout_marginTop="44dp"
android:layout_toLeftOf="#+id/profile_imageview"
android:background="#drawable/home_small_circle_background"
android:gravity="center_vertical"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center_vertical"
android:src="#drawable/ic_store_white_18dp"
android:tint="#color/up_green"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center_vertical"
android:text="100%"
android:textColor="#color/white_color"
android:textStyle="bold"/>
</LinearLayout>
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/profile_imageview"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_centerHorizontal="true"
android:layout_marginTop="24dp"
android:src="#drawable/dummy_worker_office"
app:border_color="#color/dark_green"
app:border_width="6dp"/>
<TextView
android:id="#+id/profile_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/profile_imageview"
android:gravity="center_horizontal"
android:text="Juan Rojas Torres"
android:textColor="#color/white_color"
android:textSize="18sp"/>
<TextView
android:id="#+id/profile_company_executions"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/profile_name"
android:gravity="center_horizontal"
android:text="User name"
android:textColor="#color/dark_green_text"
android:textSize="12sp"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/profile_company_executions"
android:src="#drawable/bottom_image"/>
</RelativeLayout>
<!-- Tabs at bottom -->
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.TabLayout
android:id="#+id/fragment_fragment_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#color/dark_green"
app:layout_collapseMode="pin"
app:tabGravity="fill"
app:tabIndicatorColor="#color/frogmi_indicator_color"
app:tabMaxWidth="0dp"
app:tabMode="fixed"
app:tabSelectedTextColor="#color/frogmi_white_color"
app:tabTextColor="#color/frogmi_non_selected_green_text"/>
</FrameLayout>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.v4.view.ViewPager
android:id="#+id/fragment_fragment_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</FrameLayout>
</android.support.design.widget.CoordinatorLayout>
```
I am trying to make a CollapsingToolbarLayout. I have successfully implemented that. I have a parallax image in the CollapsingToolbarLayout. Outside the CollapsingToolbarLayout I have a NestedScrollView with 3 cards. When I scroll the cards, the CollapsingToolbarLayout collapses to show the toolbar and the cards move to the top below the action bar. But they are not scrolling beyond the action bar. Result of which is, that I am not being able to view the contents of the third card.
Am I missing something ? Here is my code
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="325dp"
android:fitsSystemWindows="true"
android:theme="#style/Base.ThemeOverlay.AppCompat.Dark">
<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:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/artist_image_profile_page"
android:layout_width="match_parent"
android:layout_height="300dp"
android:src="#mipmap/ic_default_artist"
app:layout_collapseMode="parallax"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
android:clickable="true"
android:transitionName="selectedArtistImage"
android:scaleType="centerCrop" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="#+id/scroll_card_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.CardView
android:id="#+id/card_video"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
app:cardBackgroundColor="#color/background_light_color">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="10dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/video"
android:textSize="18sp"
android:textColor="#color/primary_text_dark_color"
android:textAppearance="#style/TextAppearance.AppCompat.Title" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="300dp"
android:layout_marginTop="10dp"
android:background="#color/background_dark_color"></RelativeLayout>
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="#+id/card_releases"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_margin="5dp"
app:cardBackgroundColor="#color/background_light_color">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="10dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/releases"
android:textSize="18sp"
android:textColor="#color/primary_text_dark_color"
android:textAppearance="#style/TextAppearance.AppCompat.Title" />
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="#+id/card_biography"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_margin="5dp"
app:cardBackgroundColor="#color/background_light_color">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="10dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/biography"
android:textSize="18sp"
android:textColor="#color/primary_text_dark_color"
android:textAppearance="#style/TextAppearance.AppCompat.Title" />
<TextView
android:id="#+id/artist_biography"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="16sp"
android:text="#string/test"
android:layout_marginTop="5dp"
android:textColor="#color/secondary_text_color"/>
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
## Heading ##</android.support.design.widget.CoordinatorLayout>
The problem is you have specified layout_height to the last two cardview (android:layout_height="100dp"). Replace it with "wrap_content" and it should work smoothly.