I have a main Activity with a Drawer Layout and multiple Fragments that I replace on Menu Item click.
In one of the fragment I'm using Bottom Sheet to display some info. The bottom sheet behavior is working fine : I can switch between different STATES with no problem. The problem is that in EXPANDED state the bottom sheet stays below the activity toolbar even though I set it's Height to match_parent. Here is the XMl (I also would like to implement a collapsing toolbar but I don't know how to override the current one).
<android.support.design.widget.CoordinatorLayout
android:id="#+id/coordinator"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:theme="#style/Theme.AppCompat.NoActionBar"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<RelativeLayout
android:id="#+id/search_relativeLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:theme="#style/Theme.AppCompat.NoActionBar">
<com.google.android.gms.maps.MapView
android:id="#+id/mapView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/Theme.AppCompat.NoActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_bottomSheet"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="#+id/bottom_sheet"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
android:elevation="20dp"
app:behavior_hideable="true"
app:behavior_peekHeight="0dp"
app:layout_behavior="#string/bottom_sheet_behavior">
<RelativeLayout
android:id="#+id/bottom_sheet_relative_layout"
android:layout_width="match_parent"
android:layout_height="100dp"
android:orientation="vertical">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/circle_picture"
android:src="#mipmap/login_background"
android:layout_margin="10dp"
android:layout_width="50dp"
android:layout_height="50dp" />
<TextView
android:id="#+id/name_bottom_sheet"
android:layout_toEndOf="#id/circle_picture"
android:text="Title"
android:textColor="#color/buttonLoginColor"
android:layout_margin="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/address_bottom_sheet"
android:layout_below="#id/name_bottom_sheet"
android:layout_toEndOf="#id/circle_picture"
android:layout_marginStart="10dp"
android:textColor="#color/btn_create"
android:text=""
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<LinearLayout
android:layout_below="#id/circle_picture"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clickable="true"
android:foreground="?android:attr/selectableItemBackground"
android:layout_margin="5dp"
app:cardCornerRadius="2dp">
</android.support.v7.widget.CardView>
</LinearLayout>
</RelativeLayout>
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="invisible"
android:layout_margin="15dp"
app:layout_anchor="#id/bottom_sheet"
app:layout_anchorGravity="top|end"/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/floatingButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="15dp"
android:layout_marginBottom="50dp"
android:layout_marginEnd="15dp"
app:backgroundTint="#color/buttonLoginColor"
app:borderWidth="0dp"
app:elevation="6dp"
app:layout_anchor="#id/fab2"
app:layout_anchorGravity="top"/>
Do you have any clue on how to set the bottom sheet's height so it matches the full screen ?
Related
I want to achieve the hierarchy shown in the preview picture below, I have no prior knowledge of collapsible layout and coordinator layout but what I did caused the view pager to NOT to show it's content.
I am working in a main activity that has a Coordinator layout as a root layout, a collapsing toolbar, a viewpager, a bottom navigation bar and a hidden bottom sheet
PS: I am working with AndroidX support library.
This is my XML Layout activity_main.xml
<androidx.coordinatorlayout.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:id="#+id/parent"
android:fitsSystemWindows="true">
<!-- RETRACTABLE TOOLBAR -->
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="#dimen/appbar_header_height"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="#dimen/activity_margin_content"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<ImageView
android:id="#+id/iv_banner_img"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="#drawable/banner"
android:tintMode="multiply"
app:layout_collapseMode="parallax" />
<View
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_gravity="top"
android:background="#drawable/scrim_topdown"
android:fitsSystemWindows="true"/>
<View
android:layout_width="match_parent"
android:layout_height="160dp"
android:layout_gravity="bottom"
android:background="#drawable/scrim"/>
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:layout_gravity="end">
<ImageView
android:src="#drawable/ic_user_placeholder"
android:id="#+id/iv_parent_profile_sm"
android:layout_width="32dp"
android:layout_height="32dp"/>
</LinearLayout>
<androidx.appcompat.widget.Toolbar
android:id="#+id/anim_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
<LinearLayout
android:gravity="center_vertical"
android:layout_gravity="bottom"
android:layout_marginStart="12dp"
android:layout_marginEnd="12dp"
android:layout_marginBottom="12dp"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:gravity="center_vertical"
android:layout_gravity="bottom"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:padding="4dp"
android:layout_marginEnd="6dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:id="#+id/tv_name"
android:drawableStart="#drawable/ic_person"/>
<TextView
android:layout_marginEnd="6dp"
android:padding="4dp"
android:id="#+id/tv_birth"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:drawableStart="#drawable/ic_cake"/>
<ImageView
android:padding="8dp"
android:id="#+id/iv_gender"
android:layout_width="32dp"
android:layout_height="32dp" />
</LinearLayout>
</LinearLayout>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<!-- VIEW PAGER -->
<androidx.viewpager.widget.ViewPager
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<!-- NAVIGATION BAR -->
<com.gauravk.bubblenavigation.BubbleNavigationLinearView
android:layout_alignParentBottom="true"
android:id="#+id/bottom_navigation_view_linear"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorWhite"
android:elevation="12dp"
android:padding="6dp"
android:animateLayoutChanges="true"
android:layout_gravity="bottom">
<!-- bottom navigation bar elements -->
</com.gauravk.bubblenavigation.BubbleNavigationLinearView>
<!-- BOTTOM SHEETS -->
<include layout="#layout/details_sheet" />
<include layout="#layout/add_sheet"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
This is the desired result:
You can try gravity to align inside the CoordinatorLayout.
android:layout_gravity="end"
This worked for me.
I got what I needed by wrapping everything in a RelativeLayout then I kept tweaking android:layout_above and android:layout_below until I got right
to set element in the beginning add this android:layout_gravity="start"
and to set element in the end add this android:layout_gravity="end"
and to set it in bottom add this: android:layout_gravity="bottom"
I have a collapsing toolbar in my TimelineFragment which I recently added. And there is an already existing collapsing toolbar which previously worked fine in my ProfileFragment until when I added the similar toolbar to the TimelineFragment. Both of these fragments are contained in a view pager.
I have the ff layout for the ProfileFragment
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:popupTheme="#style/AppTheme.PopupOverlay">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="#+id/ivProfileAvatar"
android:layout_width="160dp"
android:layout_height="160dp"
android:layout_gravity="center_horizontal"
android:layout_marginTop="#dimen/divider_small"
android:src="#drawable/profile_image" />
<Space
android:layout_width="match_parent"
android:layout_height="#dimen/divider_small" />
<TextView
android:id="#+id/tvUserUsername"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="JuanOne"
android:textColor="#android:color/white"
android:textSize="#dimen/text_header"
android:textStyle="bold" />
<TextView
android:id="#+id/tvUserCommunity"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="University Name"
android:textColor="#android:color/white"
android:textSize="#dimen/text_content" />
<TextView
android:id="#+id/tvUserBio"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="Still learning to face difficulty"
android:textColor="#android:color/white"
android:textSize="#dimen/text_content" />
<Space
android:layout_width="match_parent"
android:layout_height="#dimen/divider_normal" />
<Button
android:id="#+id/btnEditProfile"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:background="#drawable/btn_gradient_blue"
android:paddingStart="48dp"
android:paddingEnd="48dp"
android:text="Edit Profile"
android:textAllCaps="false"
android:textColor="#android:color/white" />
<!--
DO NOT CHANGE,
CHANGE ONLY IF TOOLBAR SIZE (FOR TAB_LAYOUT) IS ALSO CHANGED
-->
<Space
android:layout_width="match_parent"
android:layout_height="56dp" />
</LinearLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
app:layout_collapseMode="pin">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<android.support.design.widget.TabLayout
android:id="#+id/tabsProfile"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_weight="1"
app:tabBackground="#null"
app:tabGravity="center"
app:tabIndicatorColor="#android:color/white"
app:tabIndicatorHeight="2dp">
<android.support.design.widget.TabItem
android:id="#+id/tabProfileMySSSS"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<android.support.design.widget.TabItem
android:id="#+id/tabProfileMySSSSS"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</android.support.design.widget.TabLayout>
<ImageButton
android:id="#+id/ibtnProfileTimelineRefresh"
android:layout_width="128dp"
android:layout_height="match_parent"
android:layout_gravity="right"
android:layout_marginRight="#dimen/divider_normal"
android:layout_weight="1"
android:background="?attr/selectableItemBackground"
android:src="#drawable/ic_autorenew_white_24dp" />
</LinearLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
which is inside a CoordinatorLayout
and the ff layout for the TimelineFragment
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="92dp">
<android.support.design.widget.AppBarLayout
android:fitsSystemWindows="true"
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:fitsSystemWindows="true"
android:layout_height="wrap_content"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:popupTheme="#style/AppTheme.PopupOverlay">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.v7.widget.CardView
android:id="#+id/cvCreateSSSSS"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/divider_small"
android:layout_marginRight="#dimen/divider_small"
android:clickable="true"
android:focusable="true"
android:foreground="?attr/selectableItemBackground"
app:cardCornerRadius="8dp"
app:cardUseCompatPadding="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="#dimen/divider_normal">
<ImageView
android:layout_width="32dp"
android:layout_height="32dp"
android:src="#drawable/svg_nav_create_SSSSSS" />
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center_vertical"
android:paddingStart="#dimen/divider_normal"
android:text="What's on your mind?"
android:textColor="#android:color/black"
android:textSize="#dimen/text_content" />
<ImageView
android:layout_width="32dp"
android:layout_height="32dp"
android:padding="#dimen/divider_xsmall"
android:src="#drawable/svg_insert_image" />
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:visibility="gone">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<...some other layouts />
</android.support.design.widget.CoordinatorLayout>
For visuals on what my issue is
** This image is from the ProfileFragment
The extra space which I marked red has not existed before, when I still haven't added the AppBarLayout (containing the toolbar) on the TimelineFragment.
I have tried removing the whole AppBarLayout on the TimelineFragment, and it does fix the weird extra space on the ProfileFragment. Why is it that there is a relation between these fragments when they do not share anything besides being in the same ViewPager?
How do I remove the space that I marked red on the image? It might be related to the toolbar since it is same in color. The AppBarLayout uses a lighter color than the toolbar.
I have already fixed it. Apparently, the Activity that was holding all these fragments is using coordinator layout. So I removed that, and that space was gone. I believe that using a toolbar inside these fragments made the activity holding them create a toolbar on its own.
I use a viewpage to view fragment, which are switched by tabs.
This is my fragment_details_comment.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/chat_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#null"
tools:context=".activities.DetailsActivity">
<ListView
android:id="#+id/comments"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="8dp"
android:paddingBottom="4dp"
android:layout_marginBottom="4dp"
android:clipToPadding="false"
android:divider="#drawable/chat_divider"
android:scrollbarStyle="outsideOverlay"
android:layout_above="#+id/bottomlayout"
android:stackFromBottom="true"
android:transcriptMode="alwaysScroll"/>
<TextView android:id="#+id/no_comments"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="#string/no_comments"
android:textAlignment="center"
android:layout_marginTop="10dp"
android:textSize="18sp"/>
<LinearLayout
android:id="#+id/bottomlayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_alignParentBottom="true"
android:layout_marginRight="8dp"
android:layout_marginLeft="8dp"
android:layout_marginBottom="8dp">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:minHeight="50dp"
android:orientation="horizontal"
android:layout_gravity="bottom"
android:paddingBottom="15dp"
android:paddingStart="12dp"
android:paddingEnd="20dp"
android:background="#drawable/input">
<ImageView
android:id="#+id/emoji_button"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_gravity="bottom"
android:src="#drawable/ic_tag_faces_white"
android:tint="#android:color/darker_gray"/>
<EditText
android:id="#+id/comment_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_marginStart="12dp"
android:hint="#string/type_your_message"
android:inputType="textMultiLine"
android:textSize="18sp"
android:textColorHint="#c4c0bd"
android:background="#null"/>
</LinearLayout>
<ImageButton
android:id="#+id/send_comment"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="bottom"
android:background="#drawable/input_circle_normal"
android:src="#drawable/ic_send_white"/>
</LinearLayout>
</RelativeLayout>
And this the activity_details.xml file:
<?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:fab="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"
tools:context="com.mysampleapp.details">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay"
android:id="#+id/appbar"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:contentScrim="#android:color/transparent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<fragment
android:id="#+id/map"
android:layout_width="match_parent"
android:layout_height="250dp"
class="com.google.android.gms.maps.SupportMapFragment" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin">
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#android:color/white"
style="#style/TextAppearance.AppCompat.Widget.ActionBar.Title"
android:layout_gravity="start"/>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabPaddingStart="0dp"
app:tabPaddingEnd="0dp"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
app:backgroundTint="#color/colorPrimary"
android:src="#drawable/ic_save_white" />
</android.support.design.widget.CoordinatorLayout>
(The fab is hidden in the fragment_details_comment.xml and only shown in the other fragment!)
When I touch on the EditText field, my keyboard is shown and is displayed on top of my content.
So I googled, how to change that.
So I found this:
How to move the layout up when the soft keyboard is shown android
I placed this line of code into my Android Manifest file and placed it inside my activity config:
<activity
android:name=".activities.DetailsActivity"
android:parentActivityName=".activities.MainActivity"
android:theme="#style/AppTheme.NoActionBar"
android:windowSoftInputMode="adjustPan|adjustResize">
<meta-data
android:name="android.support.PARENT_ACTIVITY"
android:value=".activities.MainActivity" />
</activity>
That didn't work, nothing changed at all.
Then I tried another answer: https://stackoverflow.com/a/15063495/2977288
This does work partly: I moves up my content, but also my toolbar and my tabs I'm using. Additionally the content is not completely moved up, so something like 20dp are still covered by the keyboard
Is it maybe because of the fragment or the viewpage?
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.