Please first watch the video down the link below:
As you see there is no problem as i scroll up (makes the toolbar collapse) But as i try to expand the toolbar it is not coming down smoothly but in parts ! this thing is not happening if i use layout_scrollFlags="scroll|enterAlways also i do want the toolbar to collapse and pin to its original position.
i want this to scroll smoothly.
As i scroll to expand i want it to continuous and not to stop at collapse mode i dont want it to expand manually It should expand will just one scroll and smoothly.
Another question Is it necessary to use recycler view in NestedScrollBar tag because i have seen lots of example doing this thing But it is working right even without NestedScrollBar.
please do give all the tags suggestions which i should use.Also Is there any way to increase scroll speed of toolbar?
here is what i am trying to say https://drive.google.com/open?id=0B7ua27EMIDVfb3VMS1IxNU9XUGM
This is my activity_main.xml containing the collapsing toolbar 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:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="apackage.akash.newapp.MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_height="200dp"
android:layout_width="match_parent"
android:fitsSystemWindows="true">
<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:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="true"
>
<include layout="#layout/app_bar"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/cardview_dark_background"
android:id="#+id/recycler"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
/>
</android.support.design.widget.CoordinatorLayout>
this is my app_bar.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:orientation="vertical"
android:id="#+id/toolbar"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:layout_scrollFlags="exitUntilCollapsed">
</android.support.v7.widget.Toolbar>
Related
I made a layout using CoordinatorLayout as a container and NestedScrollView to display my contents.
I used NestedScrollView to hide my toolbar when scrolling down, but the usual wave effect which should be shown below toolbar whenever I try to scroll and reach the limit of the layout is not working.
Here is the
.
How to make this effect? If I use normal ScrollView, this effect will be shown but I can not hide my toolbar.
Here is my layout:
<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:id="#+id/layout_detail"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.dicoding.paul.moviecatalog.DetailActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar_detail"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ToolbarTheme">
<android.support.v7.widget.Toolbar
android:id="#+id/tb_my_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary"
android:elevation="4dp"
android:theme="#style/ToolbarTheme"
app:popupTheme="#style/ToolbarTheme"
app:layout_scrollFlags="scroll|enterAlways"
app:title="Detail"
app:titleTextAppearance="#style/ToolbarTheme.TitleText"/>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/activity_detail_content"/>
</android.support.design.widget.CoordinatorLayout>
And here is my detail content:
<android.support.v4.widget.NestedScrollView
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="wrap_content"
android:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
//contents
//contents
</android.support.v4.widget.NestedScrollView>
Try this:
android:clipToPadding="false"
In your NestedScollView.
I have a viewpager with fragments, each fragment should include a Collapsing toolbar + image header.
The layout is fine but i have this strange behaviour of the toolbar, which sometimes ignores the top margin and ends under the system bar. This happens:
on the first Tab
after scrolling to tab 3 or more, to any "first
previus tab"
it only happens on 1 tab at a time (as far i can see)
Also on the first tab the menu is not inflated, despite OnCreateOptionsMenu being run and not throwing any error.
I reviewed the code several times and made lots of adjustments but, for the sake of me, i cannot find what i am doing wrong!
Adding screenshots and some code. Here is a Github repository if you want to run it and see this in action. Thanks for any help!
and this happens when scrolling left:
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.view.ViewPager
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/container"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
fragment_main.xml
<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:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.manzo.tabbednavigation.MainActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="#dimen/appbar_height"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:title="Title"
app:contentScrim="?attr/colorPrimary"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/iv_scroll_header"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
android:fitsSystemWindows="true"
android:src="#drawable/bg"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorAccentWarning"
app:layout_collapseMode="pin"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<TextView
android:id="#+id/section_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
I didn't found a solution so i ended up using a workaround.
I removed fitsSystemWindows="true" from the toolbar and added a marginTop of 24dp, which is System bar height as per material guidelines, I also included an height of 25dp for previous sdks.
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_marginTop="#dimen/status_bar_height"
app:layout_collapseMode="pin"
app:popupTheme="#style/AppTheme.PopupOverlay" />
I am open to any suggestion for a "real" solution
I'm making application which mix ViewPager with Navigation bar and Scrolling activity. I won't provide you with code because, I use only merged Android Studio templates code for both.
This is how application looks like.
When it comes to scrolling, problem arise.
It doesn't reach the end of page, because title bar is visible.
And in order to scroll to bottom of page you need to move your finger to top of screen and scroll title in order to hide it.
I found out several tricky solution for this problem:
Make space at end of page.
Make title constant
But these solution doesn't appeal to me.
I need that scrolling works in following steps.
When you start scrolling, title is moving up and disappearing.
Then, fragment is scrolling until end of the page.
Thanks in advance.
Maybe you can use a CoordinatorLayout and put on the toolbar :
app:layout_scrollFlags="scroll|enterAlways"
And put behaviour in your view pager :
app:layout_behavior="android.support.design.widget.AppBarLayout$ScrollingViewBehavior"
The complete xml is something like this :
in your activiy xml :
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
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/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true" tools:openDrawer="start">
<include layout="#layout/content_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start" android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header_main"
app:menu="#menu/menu_main_drawer" />
</android.support.v4.widget.DrawerLayout>
in your included xml, for example content_main.xml :
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/vp_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="android.support.design.widget.AppBarLayout$ScrollingViewBehavior" />
</android.support.design.widget.CoordinatorLayout>
I have a layout (as generated by android studio) where i added a RelativeLayout to the AppBarLayout. The code is below and it looks like this:
Where i am stuck: What i want to achieve is when scrolling the Recyclerview down i want that the green relative layout (which has the id 'controlContainer') scrolls out with it, and when i scroll up it should scroll in (not just on the top but at any place i scroll up in the list)
The Toolbar on top should stay where it is.
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".MainActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/AppTheme.PopupOverlay"
/>
<RelativeLayout
android:id="#+id/controlContainer"
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="#android:color/holo_green_dark"
app:layout_scrollFlags="scroll|enterAlways"></RelativeLayout>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/frameLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<include layout="#layout/venue_list" />
</FrameLayout>
I thought that using app:layout_scrollFlags="scroll|enterAlways" in the view that should scroll away combined with app:layout_behavior="#string/appbar_scrolling_view_behavior"should achieve that, but it does not do anything. alternatively, when i add those fields to the toolbar itself both layouts scroll away - which is not what i want, i want the toolbar to stay always fixed.
would be nice if anyone could point me in the right direction here? (i hoped it would be possible with using coordinator layout and not hacking some layout manipulation with onscroll listeners?)
Try this in your toolbar code:
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways"
I found this link helpful: Scrolling Toolbar
I have the following layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:context="br.com.myproject.view.fragment.ProductActivityFragment"
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/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:layout_scrollFlags="scroll|exitUntilCollapsed"
tools:contentScrim="?attr/colorPrimary"
tools:expandedTitleMarginStart="48dp"
tools:expandedTitleMarginEnd="64dp"
android:fitsSystemWindows="true">
<ImageView
android:id="#+id/ivImgProduct"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
tools:layout_collapseMode="parallax"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
tools:layout_scrollFlags="scroll|enterAlways"
tools:popupTheme="#style/ThemeOverlay.AppCompat.Light"
tools:layout_collapseMode="pin">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/rvProductActions"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:layout_behavior="android.support.design.widget.AppBarLayout$ScrollingViewBehavior">
</android.support.v7.widget.RecyclerView>
</android.support.design.widget.CoordinatorLayout>
The RecyclerView is getting on the Toolbar are staying with an appearance "overlapped". The scroll both RecyclerView as the CollapsingToolbarLayout not working.
I'm trying to leave my layout with the behavior as this example link, but using RecyclerView.
After many attempts I used a library called Android-ObservableScrollView and it worked. It is simpler to use, provides several examples and a single component already has the desired effect. Scroll content has to be greater than the empty screen space for the scroll to take effect because it does not have the bounce effect of iOS.
You have to add app:layout_behavior="#string/appbar_scrolling_view_behavior" to your recyclerview