How to keep the logo above the collapsing toolbar - android

I'm programming in kotlin, I have problems with the collapsing toolbar, my main view is the following
Main View
When scrolling my logo appears behind the collapsing toolbar, as it appears in the following image
When Scrolling
<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="false">
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="12dp"
android:layout_marginRight="12dp"
android:layout_marginBottom="56dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="120dp">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
style="#style/Widget.QueComer.CollapsingToolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<LinearLayout
style="#style/Widget.QueComer.CollapsingToolbarContent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.65">
</LinearLayout>
<!-- Wrap this view: -->
<android.support.v7.widget.Toolbar
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/header_logo"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:contentDescription="#string/app_name"
android:cropToPadding="false"
android:scaleType="fitCenter"
android:src="#mipmap/ic_logo"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.3"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#mipmap/ic_logo" />
</android.support.constraint.ConstraintLayout>
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#ffffff"
android:theme="#style/ThemeOverlay.QueComer.BottomNavigation"
app:menu="#menu/menu_quecomer">
</android.support.design.widget.BottomNavigationView>
</android.support.design.widget.CoordinatorLayout>
I need the logo to be in front of the bar, as the following image shows
result Image
The result image is edited with photoshop

Try to place ImageView inside your CollapsingToolbarLayout like this:
<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="false">
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="12dp"
android:layout_marginRight="12dp"
android:layout_marginBottom="56dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="120dp">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
style="#style/Widget.QueComer.CollapsingToolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<LinearLayout
style="#style/Widget.QueComer.CollapsingToolbarContent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.65">
<ImageView
android:id="#+id/header_logo"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:contentDescription="#string/app_name"
android:cropToPadding="false"
android:scaleType="fitCenter"
android:src="#mipmap/ic_logo"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.3"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#mipmap/ic_logo" />
</LinearLayout>
<!-- Wrap this view: -->
<android.support.v7.widget.Toolbar
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#ffffff"
android:theme="#style/ThemeOverlay.QueComer.BottomNavigation"
app:menu="#menu/menu_quecomer">
</android.support.design.widget.BottomNavigationView>
</android.support.design.widget.CoordinatorLayout>

Related

Coordinator view and recycler view jitter issue

I have been using this layout file like this and the view kind of jitters whenever I scroll from the recycler view. This doesnt happen for all the pages but a very few ones. it could be an issue with the lay outing style or could be because of the image being rendered. here is a video link. Thanks.
<?xml version="1.0" encoding="utf-8"?>
<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:id="#+id/f_s_s"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000"
tools:context=".ui.main.MainActivity">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
...
>
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
...
app:layout_scrollFlags="scroll|exitUntilCollapsed|enterAlwaysCollapsed"
app:toolbarId="#id/toolbar">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#000"
android:fitsSystemWindows="true">
<com.facebook.drawee.view.SimpleDraweeView
android:id="#+id/toolbar_image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:maxHeight="300dp"
app:actualImageScaleType="fitStart"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:overlayImage="#drawable/gradient_cover_image_title"
app:viewAspectRatio="1"
tools:actualImageUri="#sample/seriesbackground"
tools:foreground="#drawable/gradient_cover_image_title"
tools:scaleType="centerCrop"
tools:src="#sample/seriesbackground" />
<TextView
android:id="#+id/txt_series_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
.../>
<com.facebook.drawee.view.SimpleDraweeView
android:id="#+id/series_author_avatar"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_marginStart="#dimen/activity_horizontal_margin"
app:actualImageScaleType="centerCrop"
app:actualImageUri="#sample/banner"
app:backgroundImage="#color/white"
app:layout_constraintBottom_toBottomOf="#id/toolbar_image"
app:layout_constraintStart_toStartOf="parent"
app:roundAsCircle="true"
app:roundingBorderColor="#color/white"
app:roundingBorderWidth="1dp"
tools:src="#sample/banner" />
<TextView
android:id="#+id/series_author_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
... />
<TextView
android:id="#+id/series_parts_count"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
... />
<ImageView
android:id="#+id/series_rating_star"
android:layout_width="20dp"
android:layout_height="0dp"
.../>
<TextView
android:id="#+id/series_rating_display"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
.../>
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:menu="#menu/toolbar_share_menu"
app:navigationIcon="#drawable/ic_arrow_back_white_24dp"
app:popupTheme="#style/AppTheme.AppBarOverlay"
app:titleTextAppearance="#style/PC.TextView.SeriesTitle" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rv_series_parts_list_exp"
android:layout_width="match_parent"
android:fitsSystemWindows="true"
android:layout_height="wrap_content"
android:paddingBottom="#dimen/margin_xllarge"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#id/lyt_info"
tools:itemCount="6"
android:nestedScrollingEnabled="true"
tools:listitem="#layout/item_series_part" />
<ProgressBar
android:id="#+id/progress_series_parts_exp"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:indeterminate="true" />
</FrameLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

using floating action button in CoordinatorLayout with behavior_overlapTop

I'm trying to add a floating action button in a CoordinatorLayout with a NestedScrollView which has 56dp of app:behavior_overlapTop.
my fab's layout_anchor is set on Appbar and it hides fine when CollapsingToolbarLayout collapsed, But because of overlapTop set on NestedScrollView, it is in a bad position.. see image below:
Here is my XML:
<com.google.android.material.appbar.AppBarLayout
android:paddingTop="#dimen/status_margin_top"
android:id="#+id/app_bar"
android:clipToPadding="false"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!--app:contentScrim="#color/red"-->
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapsingToolBar"
android:layout_width="match_parent"
android:layout_marginTop="#dimen/behind_status_margin_top"
android:clipToPadding="false"
android:layout_height="match_parent"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:expandedTitleGravity="right|bottom"
app:expandedTitleMargin="16dp"
app:expandedTitleMarginBottom="112dp"
app:collapsedTitleGravity="center_vertical|right"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<androidx.constraintlayout.widget.ConstraintLayout
app:layout_collapseMode="parallax"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.AppCompatImageView
app:layout_constraintDimensionRatio="H,11:8"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:background="#drawable/appbar_gradient"
android:id="#+id/profile_pic"
app:srcCompat="#drawable/profile_image"
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="fitStart"
android:adjustViewBounds="true" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.appcompat.widget.Toolbar
app:contentInsetRight="56dp"
android:id="#+id/toolbar"
app:titleMarginTop="#dimen/status_margin_top"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:minHeight="?actionBarSize"
app:layout_collapseMode="pin"/>
<ImageView
android:layout_marginTop="#dimen/status_margin_top"
app:layout_collapseMode="pin"
android:layout_gravity="right"
app:srcCompat="#drawable/back"
android:scaleType="center"
android:layout_width="56dp"
android:layout_height="56dp" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:id="#+id/nestedscrollview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipToPadding="false"
android:elevation="16dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
app:behavior_overlapTop="56dp">
<LinearLayout
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:background="#color/light_white">
<!-- Content-->
</androidx.cardview.widget.CardView>
</LinearLayout>
</androidx.core.widget.NestedScrollView>
<com.google.android.material.floatingactionbutton.FloatingActionButton
app:layout_anchor="#id/nestedscrollview"
app:srcCompat="#drawable/camera"
app:elevation="24dp"
app:fabSize="normal"
android:layout_marginStart="24dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
try to trigger Appbar Collapse event using this and hide() fab when it Collapsed!

How to use RecyclerView with CollapsingToolbarLayout. RecyclerView need load more data when bottom reached

My problem is, i want use RecyclerView with CollapsingToolbarLayout. But the issue is CollapsingToolbarLayout not scrolling when RecyclerView scrolling. I cant use Nested Scroll to put RecyclerView, because i want load more data to RecyclerView
<android.support.design.widget.AppBarLayout
android:id="#+id/collapsing_toolbar_appbarlayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?themeColorBack">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:contentScrim="?themeColorBack"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<RelativeLayout
android:id="#+id/image_contain_relative"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="invisible">
<android.support.constraint.ConstraintLayout
android:id="#+id/first_image_container"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/first_post"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="10dp"
android:adjustViewBounds="true"
android:contentDescription="#string/latest_post"
android:scaleType="fitXY"
app:layout_constraintDimensionRatio="H,16:9"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/first_image_container"
android:background="#bb000000"
android:orientation="vertical">
<TextView
android:id="#+id/first_image_category"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:paddingLeft="8dp"
android:paddingStart="8dp"
android:textColor="#color/white"
android:textSize="14sp"
tools:ignore="RtlSymmetry" />
<TextView
android:id="#+id/first_image_date"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="4dp"
android:paddingLeft="8dp"
android:paddingStart="8dp"
android:textColor="#color/white"
android:textSize="14sp"
tools:ignore="RtlSymmetry" />
</LinearLayout>
</RelativeLayout>
<TextView
android:id="#+id/first_post_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="8dp"
android:textColor="?themeHeadColorText"
android:textSize="16sp"
android:textStyle="bold" />
</LinearLayout>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<!-- app:layout_behavior attribute value settings make app tool bar appear while RecyclerView scroll. -->
<android.support.v7.widget.RecyclerView
android:id="#+id/post_recycle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="60dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
Try like this I hope this will be full fill your requirements.
<?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/main_content"
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="250dp"
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="#android:color/transparent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:statusBarScrim="#android:color/transparent">
<ImageView
android:id="#+id/ivFeature"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/transparent"
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/nestedScrollView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:overScrollMode="never"
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.RecyclerView
android:id="#+id/card_recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:nestedScrollingEnabled="false" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
You can use like this.
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/myCoordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include layout="#layout/layout_toolbar" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="4dp" />
</LinearLayout>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="18dp"
android:src="#drawable/ic_add" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

Custom toolbar in CoordinatorLayout

I am trying to get this design, but the content is not collapsing. I need tabs to be under the toolbar when scrolling, currently, I set two buttons for collapsing layout for testing when, but the content is not scrolling now. What am I doing wrong? Maybe I should add toolbar outside the CoordinatorLayout?
<?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"
tools:context=".ui.fragments.MainFragment">
<android.support.design.widget.AppBarLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/appBar"
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"
android:layout_marginTop="#dimen/appBarTopMargin"
android:elevation="#dimen/toolbarElevation"
app:contentInsetStart="0dp"
tools:ignore="UnusedAttribute">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/img_overflow"
android:layout_width="?attr/actionBarSize"
android:layout_height="?attr/actionBarSize"
android:layout_alignParentEnd="true"
android:scaleType="center"
android:src="#drawable/icon_menu_border"
tools:ignore="ContentDescription" />
<ImageView
android:id="#+id/img_message"
android:layout_width="?attr/actionBarSize"
android:layout_height="?attr/actionBarSize"
android:scaleType="center"
android:src="#drawable/icon_message"
tools:ignore="ContentDescription" />
<ImageView
android:id="#+id/img_search"
android:layout_width="?attr/actionBarSize"
android:layout_height="?attr/actionBarSize"
android:layout_toStartOf="#id/img_overflow"
android:scaleType="center"
android:src="#drawable/icon_search"
tools:ignore="ContentDescription" />
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_toEndOf="#id/img_message"
android:layout_toStartOf="#id/img_overflow"
android:fontFamily="sans-serif-medium"
android:gravity="center_vertical"
android:text="#string/vouch"
android:textColor="#color/action_bar_color"
android:textSize="18sp" />
</RelativeLayout>
</android.support.v7.widget.Toolbar>
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:titleEnabled="false"
app:toolbarId="#+id/toolbar">
<android.support.constraint.ConstraintLayout
android:id="#+id/profile_relative"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:layout_collapseMode="none">
<Button
android:id="#+id/btn_view_contacts"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="View Contacts"
android:textAllCaps="false"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/btn_edit_profile"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="Edit Profile"
android:textAllCaps="false"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.9"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:layout_gravity="bottom"
android:background="#android:color/transparent"
app:tabGravity="fill"
app:tabIndicatorColor="#android:color/holo_orange_dark"
app:tabMaxWidth="0dp"
app:tabMode="fixed"
app:tabSelectedTextColor="#android:color/black"
app:tabTextAppearance="#android:style/TextAppearance.Widget.TabWidget"
app:tabTextColor="#android:color/black" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
</android.support.v4.view.ViewPager>
</android.support.design.widget.CoordinatorLayout>
Try This if you does not want to make Toolbar sticky means it will collapse with CollapsingToolbar.
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_marginTop="#dimen/appBarTopMargin"
android:elevation="#dimen/toolbarElevation"
app:layout_scrollFlags="scroll|exitUntilCollapsed" <== Add this line
app:contentInsetStart="0dp"
tools:ignore="UnusedAttribute">
if you want Toolbar to be sticky. then, move your Toolbarout of the main CoordinateLayout.
<?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"
tools:context=".ui.fragments.MainFragment">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_marginTop="#dimen/appBarTopMargin"
android:elevation="#dimen/toolbarElevation"
app:contentInsetStart="0dp"
tools:ignore="UnusedAttribute">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/img_overflow"
android:layout_width="?attr/actionBarSize"
android:layout_height="?attr/actionBarSize"
android:layout_alignParentEnd="true"
android:scaleType="center"
android:src="#drawable/icon_menu_border"
tools:ignore="ContentDescription" />
<ImageView
android:id="#+id/img_message"
android:layout_width="?attr/actionBarSize"
android:layout_height="?attr/actionBarSize"
android:scaleType="center"
android:src="#drawable/icon_message"
tools:ignore="ContentDescription" />
<ImageView
android:id="#+id/img_search"
android:layout_width="?attr/actionBarSize"
android:layout_height="?attr/actionBarSize"
android:layout_toStartOf="#id/img_overflow"
android:scaleType="center"
android:src="#drawable/icon_search"
tools:ignore="ContentDescription" />
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_toEndOf="#id/img_message"
android:layout_toStartOf="#id/img_overflow"
android:fontFamily="sans-serif-medium"
android:gravity="center_vertical"
android:text="#string/vouch"
android:textColor="#color/action_bar_color"
android:textSize="18sp" />
</RelativeLayout>
</android.support.v7.widget.Toolbar>
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/appBar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:titleEnabled="false"
app:toolbarId="#+id/toolbar">
<android.support.constraint.ConstraintLayout
android:id="#+id/profile_relative"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:layout_collapseMode="none">
<Button
android:id="#+id/btn_view_contacts"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="View Contacts"
android:textAllCaps="false"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/btn_edit_profile"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="Edit Profile"
android:textAllCaps="false"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.9"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:layout_gravity="bottom"
android:background="#android:color/transparent"
app:tabGravity="fill"
app:tabIndicatorColor="#android:color/holo_orange_dark"
app:tabMaxWidth="0dp"
app:tabMode="fixed"
app:tabSelectedTextColor="#android:color/black"
app:tabTextAppearance="#android:style/TextAppearance.Widget.TabWidget"
app:tabTextColor="#android:color/black" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
</android.support.v4.view.ViewPager>
</android.support.design.widget.CoordinatorLayout>
</LinearLayout>

NestedScrollView not showing last cardView with CoordinatorLayout & CollapsingToolbarLayout

I set up a CoordinatorLayout with a AppBarLayout and a CollapsingToolbarLayout, everything works fine, in this part. Under the AppBarLayout I put a NestedScrollView but when I scroll to the end I can see only half of the last cardview.
<android.support.design.widget.AppBarLayout
android:id="#+id/MyAppbar"
android:layout_width="match_parent"
android:layout_height="256dp"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapse_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="#color/colorAccent"
android:fitsSystemWindows="true">
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
app:layout_collapseMode="pin" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
</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"
android:layout_gravity="fill_vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingTop="24dp">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="12dp"
android:layout_marginRight="12dp"
card_view:cardCornerRadius="5dp"
android:fitsSystemWindows="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/lorem_ipsum"/>
</LinearLayout>
</android.support.v7.widget.CardView>
CARDVIEW x5
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
In my activity :
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
What is wrong with my layout ? I looked at some examples but everything look good to me.
you need to get rid of nestedscrollview layout gravity. It worked for me.
<?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.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="256dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleTextAppearance="#android:color/transparent"
android:fitsSystemWindows="true">
<ImageView
android:id="#+id/appIconIV"
app:layout_collapseMode="parallax"
android:src="#drawable/special"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="260dp" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin"/>
</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"
android:fitsSystemWindows="true"
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:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="7dp"
android:layout_marginRight="10dp"
android:layout_marginBottom="16dp"
app:cardElevation="5dp"
app:cardCornerRadius="7dp"
app:cardUseCompatPadding="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<View
android:layout_width="wrap_content"
android:layout_height="1dp"
android:layout_marginTop="10dp"
android:background="#b1b1b1" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="18dp"
android:text="Ingredients"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
android:textSize="23sp" />
<View
android:layout_width="wrap_content"
android:layout_height="1dp"
android:background="#b1b1b1" />
<TextView
android:id="#+id/ingredient_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="12dp"
android:padding="10dp"
android:textSize="15sp" />
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginBottom="16dp"
app:cardElevation="5dp"
app:cardCornerRadius="7dp"
app:cardUseCompatPadding="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="20dp"
android:text="Method"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
android:textSize="23sp" />
<View
android:layout_width="wrap_content"
android:layout_height="1dp"
android:background="#b1b1b1" />
<TextView
android:id="#+id/method_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="12dp"
android:padding="10dp"
android:textSize="15sp" />
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:src="#drawable/ic_menu_camera"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:elevation="6dp"
android:layout_marginRight="12dp"
app:pressedTranslationZ="12dp"
app:layout_anchor="#id/app_bar_layout"
app:layout_anchorGravity="bottom|right|end"
android:layout_marginEnd="12dp" />

Categories

Resources