CollapsingToolbarLayout: How to make a view disappear when collapsed [duplicate] - java

This question already has answers here:
CollapsingToolbarLayout - Hide ImageView when Expanded, show when Collapsed
(3 answers)
Closed 4 years ago.
I used this tutorial to create a collapsing toolbar to create a layout similar to this:.
I want the book thumbnail to disappear when the whole toolbar is collapsed. But somehow, this is what's happening:
Here is my XML 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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
android:fitsSystemWindows="true"
tools:context=".activities.GFSBookContentActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
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="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="#color/white"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/book_cover"
android:layout_width="match_parent"
android:layout_height="250dp"
app:layout_collapseMode="parallax"
android:scaleType="centerCrop" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_centerVertical="true"
app:layout_collapseMode="pin"
app:popupTheme="#style/AppTheme.PopupOverlay" >
<ImageView
android:id="#+id/back"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_centerVertical="true"
android:src="#drawable/ic_arrow_back"
android:textStyle="bold"
android:tint="#color/gfs_blue" />
</android.support.v7.widget.Toolbar>
</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:clipToPadding="false"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<!-- ..... -->
</android.support.v4.widget.NestedScrollView>
<ImageView
android:id="#+id/book_cover_thumb"
android:layout_width="150dp"
android:layout_height="200dp"
android:layout_gravity="center_horizontal"
android:scaleType="fitXY"
app:layout_anchor="#id/appbar"
app:layout_anchorGravity="bottom|center"
app:layout_collapseMode="parallax" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_height="50dp"
android:layout_width="50dp"
app:layout_anchor="#id/appbar"
app:layout_anchorGravity="bottom|right|end"/>
</android.support.design.widget.CoordinatorLayout>
I tried adding a FAB and it disappears. I want that behavior for my image thumbnail. Also, any idea on how to bring the thumbnail image down similar to the image I provided?

See the thing is ImageView "book_cover_thumb" cannot get scrolled automatically and get disappeared as it do not have any scrolling behavior like FloatingImageButton "fab". To make imageview "book_cover_thumb" scroll and disappear you have to make a Custom Behavior class and set it to imageview "book_cover_thumb".
You can have a reference to this link :
http://saulmm.github.io/mastering-coordinator

Related

How to use BottomAppBar with BottomNavigationView inside in a Single Activity App Architecture?

I want to add a FloatingActionButton in the middle of BottomAppBar with curve below.
So i Added tried to design the MainActivity like below. I maintained Single Activity Architecture in this app.
Now, I have faced two problems.
If I want to set Visibility:gone for bottomappbar & floatingActionButtonin any particular fragment than both are gone but created an empty view. Like the screen shot. How can I remove that empty view?
I want to make transparent the gap between FloatingActionButton & BottomAppBar. But failed to do that.
This is the code below of my MainActivity's XML.
<?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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ui.MainActivity">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:theme="#style/ThemeOverlay.MaterialComponents.Dark.ActionBar" />
</com.google.android.material.appbar.AppBarLayout>
<fragment
android:id="#+id/my_nav_host_fragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="?attr/actionBarSize"
app:defaultNavHost="true"
app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior"
app:navGraph="#navigation/navigation_graph" />
<com.google.android.material.bottomappbar.BottomAppBar
android:id="#+id/bottomAppBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:fabCradleMargin="10dp"
app:elevation="0dp"
app:fabCradleRoundedCornerRadius="10dp"
app:fabCradleVerticalOffset="10dp">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_nav_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginEnd="16dp"
android:background="#android:color/transparent"
app:menu="#menu/navigation_menu" />
</com.google.android.material.bottomappbar.BottomAppBar>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab_add"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/app_name"
android:src="#drawable/ic_dashboard_add"
app:backgroundTint="#color/colorDashboardFloatingButton"
app:tint="#color/colorWhite"
app:layout_anchor="#id/bottomAppBar" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Here are the screenshots.

How to ensure that the Android adView is always displayed after the bottom of the last item in my Android listView?

This bounty has ended. Answers to this question are eligible for a +50 reputation bounty. Bounty grace period ends in 21 minutes.
Zac1 is looking for a canonical answer:
Please provide working XML layout code to fix this issue. If I resize my listView in the Android Studio Design editor such that listView is above the adView, the adView still seems to overlap the last item of the listView.
Here's the activity_results XML layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:ads="http://schemas.android.com/apk/res-auto"
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="com.test.test.ResultsActivity">
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:titleTextAppearance="#style/ToolbarTitle" />
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_gravity="center_horizontal"
app:tabMaxWidth="0dp">
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/tab_text_1" />
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/tab_text_2" />
</com.google.android.material.tabs.TabLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.viewpager.widget.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<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"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.test.test.ResultsActivity">
<ListView
android:id="#+id/listView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toTopOf="#+id/adView"></ListView>
<com.google.android.gms.ads.AdView xmlns:ads="http://schemas.android.com/apk/res-auto"
android:id="#+id/adView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_gravity="center|bottom"
ads:adSize="SMART_BANNER"
ads:adUnitId="#string/banner_ad_unit_id"
app:layout_constraintBottom_toBottomOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</RelativeLayout>
And, here's the content_results.xml layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:ads="http://schemas.android.com/apk/res-auto"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="#dimen/activity_horizontal_margin">
<TextView
android:id="#+id/abc"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingBottom="10dip"
android:textColor="#color/colorAccent"
android:textSize="14sp"
android:textStyle="bold" />
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/def"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:textColor="#color/colorPrimary"
android:textSize="14sp"
android:textStyle="bold" />
</RelativeLayout>
<TextView
android:id="#+id/ghi"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:textColor="#color/colorPrimary"
android:textSize="14sp"
android:textStyle="bold" />
</LinearLayout>
I want to have the adView item at the bottom of the last element of the listView. Is this possible with the layouts I currently have? Because it looks like the adView in the activity_results has no relation to the list items in the content_results file?
I've also tried app:layout_constraintBottom_toTopOf attribute to position the adView below the ListView, but there seems to be no change.
Please let me know if you can catch any other basic errors in these layouts?
How about wrapping up co-ordinator view group with constraintLayout and putting adview outside of this co-ordinator viewgroup and constrain adview to bottom to the activity layout so that ad view is independent of list view's data.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:ads="http://schemas.android.com/apk/res-auto"
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="com.test.test.ResultsActivity">
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
app:layout_constraintBottom_toTopOf="#+id/adView"
android:layout_height="wrap_content">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:titleTextAppearance="#style/ToolbarTitle" />
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_gravity="center_horizontal"
app:tabMaxWidth="0dp">
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/tab_text_1" />
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/tab_text_2" />
</com.google.android.material.tabs.TabLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.viewpager.widget.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<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"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.test.test.ResultsActivity">
<ListView
android:id="#+id/listView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toTopOf="#+id/adView"></ListView>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
<com.google.android.gms.ads.AdView
android:id="#+id/adView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
ads:adSize="SMART_BANNER"
ads:adUnitId="#string/banner_ad_unit_id"
app:layout_constraintBottom_toBottomOf="parent" />
</ConstraintLayout>
I have two pieces of advice for you:
Avoid using ListView (unless you have a fixed amount and few items). Prefer RecyclerView which is so much more performative. Basically, if you have so many items, with RecyclerView, just a certain amount of items will have the layout rendered. With ListView, even the hundredth item will have the layout rendered (even if you can see just the first four items on your screen at a certain moment).
Take care about using several nested view groups. It impacts the performance to render the layout on the device. In general, just a root ConstraintLayout solves all the problems you can face to align the elements.
For the first layout, because the AppBarLayout needs the CoordinatorLayout to work properly, you can keep the CoordinatorLayout as root and use ConstraintLayout after the AppBarLayout. For the second layout, the same thing. Here is an example:
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:padding="10dp">
<TextView
android:id="#+id/abc"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
android:paddingBottom="10dp"
android:textColor="#color/design_default_color_primary"
android:textSize="14sp"
android:textStyle="bold" />
<TextView
android:id="#+id/def"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/abc"
android:textColor="#color/design_default_color_primary"
android:textSize="14sp"
android:textStyle="bold" />
<TextView
android:id="#+id/ghi"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/def"
android:text=""
android:textColor="#color/design_default_color_primary"
android:textSize="14sp"
android:textStyle="bold" />
</androidx.constraintlayout.widget.ConstraintLayout>
About your problem with the AdView position, try something like this:
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:padding="10dp">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
tools:itemCount="#integer/material_motion_duration_long_2"
tools:layout_editor_absoluteX="3dp" />
<com.google.android.gms.ads.AdView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#+id/recyclerview"/>
</androidx.constraintlayout.widget.ConstraintLayout>
Let me know if it worked. If you need some more help, contact me.

OneUi styled navigation in android java

I'm beginner in android programming and I want to know how to make an OneUi styled navigation like in this picture.
This is what I made so far. Unfortunately, when I scroll it, it will totally collapse and I cannot get it back.
I used CoordinatorLayout with AppBarLayout and I follow some code from material.io guidelines but it did'nt work as I expected. I want the app bar to be short when scrolled and tall when it is on the top.
Here is my XML Layout Code:
<androidx.coordinatorlayout.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#F0F0F0"
tools:context=".MainActivity">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="256dp">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:expandedTitleMarginStart="72dp"
app:expandedTitleMarginBottom="28dp"
app:layout_scrollFlags="scroll|snap">
<com.google.android.material.appbar.MaterialToolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_collapseMode="pin"
app:contentInsetStart="0dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="This is a text"
android:textSize="50dp"
/>
</RelativeLayout>
</com.google.android.material.appbar.MaterialToolbar>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false">
</androidx.cardview.widget.CardView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
For your use case. There are few things you need to change.
Put the content below AppBarLayout in NestedScrollView to have scrolling layout_behavior.
Put some content to mimic scrolling effect. Like textview with huge height for example.
Put the content you want to collapse into one CollapsingToolbarLayout basically things to show when it's tall or not collapsed.
Put your MaterialToolbar as a direct child of AppBarLayout
Example code:
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#F0F0F0"
tools:context=".MainActivity">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:expandedTitleMarginBottom="28dp"
app:expandedTitleMarginStart="72dp"
app:layout_scrollFlags="scroll|snap">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="This is collapsing content"
android:textSize="32sp" />
</RelativeLayout>
</com.google.android.material.appbar.CollapsingToolbarLayout>
<com.google.android.material.appbar.MaterialToolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentInsetStart="0dp"
app:layout_collapseMode="pin"
app:title="This is MaterialToolbar" />
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false">
<TextView
android:layout_width="match_parent"
android:layout_height="800dp"
android:text="Hello Test" />
</androidx.cardview.widget.CardView>
</androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Output:
Not collapsed:
Collapsed:

How to animate an image above a listview when scrolling?

I have an image above my listview that is currently doing nothing.But I want my image to be animated when the user scrolls in the listview just like
this.
This is an example of an old library called StikkyHeader ,but it doesn't seem to work now.
Is there any other libraries for the same reason or even a way I can do it without libraries?
Try this one
<?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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="300dp"
android:minHeight="200dp"
>
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapsingToolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:minHeight="150dp"
app:expandedTitleMarginBottom="25dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
>
<ImageView
android:layout_width="match_parent"
android:src="#drawable/magic_bg"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.5"
android:layout_height="match_parent"/>
<TextView
android:layout_width="match_parent"
android:text="#KeepMakingMagic"
android:textSize="25dp"
android:gravity="center"
android:textColor="#color/white"
android:textStyle="bold"
app:layout_collapseMode="parallax"
android:layout_marginBottom="50dp"
android:layout_gravity="bottom"
app:layout_collapseParallaxMultiplier="-0.1"
android:layout_height="wrap_content"/>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<!-- You can have list view here Instead of scrollview But you need to make sure layout behaviour is same-->
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorAccent"
app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior">
<LinearLayout
android:layout_width="match_parent"
android:orientation="vertical"
android:background="#color/colorAccent"
android:layout_height="1000dp">
</LinearLayout>
</androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Demo :
Don't forget to play with things

While scrolling RecyclerView CoordinatorLayout is shown

I have implemented an activity with two slides, the slides content is a fragment with RecyclerView that loads data from my server and creates a GridLayout with images (like in image gallery).
I have added the behavior of scrolling so when you scroll you don't see the toolbar.
My problem is that when the activity starts with the fragment the toolbar is half hidden and when i continue to scroll down and the toolbar is completely hidden the CoordinatorLayout from under is exposed so i get this thing:
as you can see the light green is the CoordinatorLayout and the red is the ViewPager and what i want to achieve is that when you scroll more you will only see the red background and never the green one.
My activity_main.xml
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/backgroundGray"
android:fitsSystemWindows="true">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="56dp"
android:background="#color/appGreen"
app:layout_scrollFlags="scroll|enterAlways">
<com.apps.haver.getout.libs.view.CustomTextView
android:id="#+id/actionBarTitleText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:ellipsize="end"
android:maxLines="1"
android:text="Get Out"
android:textColor="#color/white"
android:textSize="50sp"
app:fontName="Peterbuilt.ttf" />
</android.support.v7.widget.Toolbar>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#565654"
android:orientation="vertical"
android:scrollbars="none">
<com.apps.haver.getout.libs.slider.SlidingTabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="#dimen/normal_row"
android:background="#color/appGreen"
android:elevation="2dp" />
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:background="#e90f0f" />
</LinearLayout>
</android.support.design.widget.AppBarLayout>
And my fragment.xml
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.apps.haver.getout.FriendsFragment">
<com.apps.haver.getout.libs.view.AutofitRecyclerView
android:id="#+id/rvPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
android:columnWidth="102dp"
android:fitsSystemWindows="true"
android:scrollbars="vertical" />
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/pressToRetryPanel"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:visibility="gone">
<TextView
android:id="#+id/textPressToRetry"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="#string/press_to_retry"
android:textColor="#color/black"
android:textSize="16sp" />
</RelativeLayout>
<include
android:id="#+id/loadingPanel"
layout="#layout/loading_template"
android:layout_width="match_parent"
android:layout_height="match_parent" />
How can I make the toolbar to hide when I am scrolling but still see the RecyclerView content on my entire screen?
Thanks...

Categories

Resources