how to hide/show widget.AppBarLayout on click in android app - android

I have developed an application and my requirement is to show setting button at the top on click.
Below is the code for my Activity_main.xml,
Any shortcut way to auto hide and show the app bar layout?
<android.support.design.widget.AppBarLayout
android:id="#+id/appbarlayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:animateLayoutChanges="true"
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:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_main" />
<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"
android:src="#android:drawable/ic_dialog_email" />
Following is the code at main_activity.java for onclick logic:
final AppBarLayout appbar = (AppBarLayout) findViewById(R.id.appbarlayout);
appbar.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
appbar.setVisibility(View.GONE);
}
});
Thanks
in the screen shot you can see the setting button, I want to hide this whole blue color appbar.

Just use View's setVisibility() to hide and show the AppBarLayout.
If you want it to animate then add android:animateLayoutChanges="true" to the AppBarLayout's xml.

You can set the Scrolling Behavior of a child View.
<android.support.v7.widget.RecyclerView
android:id="#+id/rvToDoList"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
Then add the scrollFlags of your Toolbar.
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"/>
And finally, simulate a scroll every N seconds so the Toolbar gets hidden.
//After 5 secs, scroll screen to N item in a list or something.

I have tried these, still not working. better solution is show and hide the CollapsingToolbar and set the AppBarLayout params dynamically.
Do this when ever you show/hide the CollapsingToolbarLayout
mAppBar.setLayoutParams(new CoordinatorLayout.LayoutParams(
ViewGroup.LayoutParams.MATCH_PARENT,
ViewGroup.LayoutParams.WRAP_CONTENT));

Related

Android: Layout for dynamic buttons + FAB + Appbar

I'm new to Android (and Java) and have difficulties with the layouts.
When I click on the FAB, a button should be created. As I learned, I must use LinearLayout when I want to add buttons programmatically. This is generally working, but when I try to combine the LinearLayout with the FAB and the appbar, either the newly created button is not shown or the FAB or the appbar.
One of the layouts hides always some of the other elements. It should look that way:
Appbar
LinearLayout - Buttons with scroll bar
FAB on the bottom right
I tried with RelativeLayout, FrameLayout, CoordinatorLayout etc., no luck.
activity_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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="xyz.mypackage.MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:id="#+id/main_layout">
<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:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
</LinearLayout>
<!--include layout="#layout/content_main" /-->
<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"
android:visibility="visible"
app:srcCompat="#android:drawable/ic_input_add" />
</android.support.design.widget.CoordinatorLayout>
Create the button in the xml and set visibility to gone. Fab click triggers dialogfragment, to take input you can include EditText.
EditText editText = (EditText) getDialog().findViewById(R.id.project_name);
if (editText != null) {
Log.e("Value", editText.getText().toString());
button.setText(editText.getText().toString());
button.setVisibility(View.VISIBLE);
} else {
Log.e("", "EditText not found!");
}
How to get Text from a EditText in a DialogFragment?
getText from a EditText in a DialogFragment
After reading the documentation (yes, I should have done that before posting a question), I found out a way to do it:
As root, use a RelativeLayout, then for the appbar and buttons use a LinearLayout as child (I also added a ScrollView with another LinearLayout). The FAB should be within the root (RelativeLayout) with the following attributes:
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"

SearchView shifting AppBar permanently upwards?

I am adding a SearchView to the current view at Runtime, like so:
View searchpage = inflater.inflate(R.layout.search_ui, (ViewGroup) view.getParent(), false);
SearchView searchbar = (SearchView) searchpage.findViewById(R.id.searchbar);
//ViewGroup of current layout
parent.addView(searchbar);
This code is executed when a button is pressed.
This code works, however if the SearchView is entered and exited, the animation that shifts the AppBar upwards works however upon exiting the AppBar is not reset. The SearchView is not embedded in the AppBar, and I am not attempting to do this. I would like the SearchView to be below the AppBar as it is.
The AppBar is defined in a separate xml file. I am switching between multiple views using a ViewPager.
Here are some screenshots:
Before SearchView is Tapped
After SearchView is Tapped/Entered and Exited
The SearchBar is defined in xml like so:
<android.support.v7.widget.SearchView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/searchbar"
android:layout_below="#+id/view"
android:iconifiedByDefault="false"
android:queryHint="Search"
android:layout_centerHorizontal="true">
</android.support.v7.widget.SearchView>
The AppBar is defined like so:
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="#dimen/appbar_padding_top"
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>
Any help would be appreciated, I am at a loss as to why the AppBar won't slide back down automatically.
EDIT: I was concurrently having issues with a set of buttons not appearing at the bottom of the screen. I figured out that they were being drawn underneath the nav bar. I believe that when the SearchView was being entered, the toolbar was being pushed upwards to accommodate for the set of buttons at the absolute bottom of the screen. I added padding to the layout and I believe that was the solution to the issue.
Thanks,
-n.parker
Try something like this;
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorWhite"
android:orientation="vertical"
tools:context="Your-Activity-name-like-com.xyz.MainActivity">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar" />
<android.support.v7.widget.SearchView
android:id="#+id/action_search"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:clickable="true"
android:title="#string/action_search">
</android.support.v7.widget.SearchView>
And inside the "layout" folder, create a toolbar.xml that looks like this;
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:minHeight="?attr/actionBarSize"/>
Now you can reuse this toolbar in other activities too, id needed.

BottomNavigationView hides when scrolling up instead of down

The new BottomNavigationView from support library v25.0.0 is supposed to hide when scrolling down, in order to see all the items from a list. However, in my testing scenario, the view hides when scrolling up. Any ideas what can cause this reverse behavior?
The inner_fragment is set up as a Fragment inserted inside the activity_main_framelayout_content Framelayout. XML layouts below:
main_activity.xml:
<android.support.design.widget.CoordinatorLayout
android:id="#+id/activity_main_coordinatorlayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/activity_main_appbarlayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/activity_main_toolbar"
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"
android:background="?attr/colorPrimary"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|enterAlways">
<include layout="#layout/activity_main_spinner_layout"/>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/activity_main_framelayout_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:fitsSystemWindows="true"/>
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
android:id="#+id/activity_main_framelayout_navigation_drawer"
android:layout_width="#dimen/drawer_width"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
android:background="#color/color_black_700"/>
inner_fragment.xml:
<FrameLayout 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">
<FrameLayout
android:id="#+id/inner_fragment_framelayout"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<android.support.design.widget.BottomNavigationView
android:id="#+id/inner_fragment_bottom_navigation_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:menu="#menu/inner_fragment"
app:itemBackground="#drawable/bg_bottom_navigation"
app:itemIconTint="#color/ic_bottom_navigation"
app:itemTextColor="#color/ic_bottom_navigation"/>
</FrameLayout>
A simple solution is to just add an offset listener to appbarlayout. Works perfectly for me.
So something like this:
((AppBarLayout)toolbar.getParent()).addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
#Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
mNavigationBar.setTranslationY(verticalOffset*-1);
}
});
This release of BottomNavigationView is missing scrolling behavior to work out of the box as specified in the guidelines.
I wrote an article on what's missing and how you can fix it. This includes implementing scrolling behavior of the BottomNavigationView in CoordinatorLayout.
My solution was to replace the FrameLayout with a NestedCoordinatorLayout from here https://stackoverflow.com/a/37660246/2233621 and then add the BottomNavigationBehavior from Nikola's blog post https://medium.com/#nullthemall/bottomnavigationview-missing-pearls-eaa950f9ad4e#.p1i01wwui that way your bottom navigation behaviour can listen for nested scrolling of the fragment inside the NestedCoordinatorLayout
I believe you could use another view that implements NestedScrollParent + NestedScrollChild for the same behaviour.

CollapsingToolbarLayout and hide toolbar while scrolling

I am trying to create some combined layout using CoordinatorLayout and also CollapsingToolbarLayout.
In the first state, when we on the most top page, and didn't scrolled yet, I want the toolbar to expend as shown below (yes, i did it):
In the second state, when starting to scroll down, the image and toolbar should disappear, as shown below (only tab will show):
And in the last state once I am at some point in the list (but not the top of the list) I want to start scrolling up, once I start scrolling up I want the toolbar (and not the expended one with the image) to start whowing, as shown below (if didn't reaches the top of the list, the image will not show, only the toolbar):
I was able to achive the the first state, but the other 2 state are problematic,
once toolbar is implemented inside CollapsingToolbarLayout, the flexability of what I can do with it outside of CollapsingToolbarLayout component is not clear.
I can't make the toolbar hide, if I do so, then it will only be shown once I reaches the top.
Anyways, my current XML (showing below) is in state where the first picture is implemented, but once I start scrolling down, the toolbar stay at the top and do not hide. Note: I must tell the toolbar to stay "pin" because if I didn't then the information inside the toolbar disappear, and only an empty toolbar will show (that's for another post, but it still interesting to know why this happen?).
here is my current xml:
<android.support.design.widget.CoordinatorLayout
android:id="#+id/benefit_coordinator_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_material_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/main.collapsing"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
>
<include
android:id="#+id/toolbar_search_container"
layout="#layout/search_box"
android:layout_height="192dp"
android:layout_width="match_parent"
app:layout_collapseMode="parallax"
/>
<include
android:id="#+id/toolbar_benefit"
layout="#layout/toolbar_main"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:contentScrim="?attr/colorPrimary"
/>
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="#+id/benefit_tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/primaryColor"
app:tabIndicatorColor="#color/accentColor"
app:tabSelectedTextColor="#android:color/white"
app:tabTextColor="#android:color/black"
app:tabIndicatorHeight="4dp" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/benefit_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<include
layout="#layout/floating_btn_benefits"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_margin="16dp"
/>
</android.support.design.widget.CoordinatorLayou
I have fixed the issue, just to clerify, I wanted my Toolbar to be able to expand with a paralex image once it reaches the top, but I also wanted the toolbar to disappear if scrolling down, and show itself again (without the paralex image) once I scroll up. the paralex image effect should only displayed if I reaches the top.
So basically the solution is, change the component CollapsingToolbarLayout with the following attribute:
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
and also change toolbar component with the following attribute
android:minHeight="?attr/actionBarSize"
regarding my paralex effect image (which is my toolbar_search_container) I shouldn't add any layout_scrollFlags to it.
So why is it working?
To understand it, you need to know what is enterAlwaysCollapsed,
The enterAlwaysCollapsed effects views that added the minHeight attribute. this means, every child of CollapsingToolbarLayout which have minHeight will be effected by this attribute.
So my toolbar will be effected.
enterAlwaysCollapsed attribute definition in simple words:
Assuming enterAlways is declared and you have specified a minHeight, you can also specify enterAlwaysCollapsed. When this setting is used, your view will only appear at this minimum height. Only when scrolling reaches to the top will the view expand to its full height..."
Well, isn't this exactly what we want? (do not answer this retorical question ;) )
One more thing to add, the parallax component (toolbar_search_container) is depends on the toolbar to expand, and because the toolbar will expand only when it reaches the top, then this is all just working great!
The new code is :
<android.support.design.widget.CoordinatorLayout
android:id="#+id/benefit_coordinator_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_material_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/main.collapsing"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
>
<include
android:id="#+id/toolbar_search_container"
layout="#layout/search_box"
android:layout_height="192dp"
android:layout_width="match_parent"
app:layout_collapseMode="parallax"
/>
<include
android:id="#+id/toolbar_benefit"
layout="#layout/toolbar_main"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:minHeight="?attr/actionBarSize"
app:contentScrim="?attr/colorPrimary"
app:layout_collapseMode="pin"
android:fitsSystemWindows="true"
/>
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="#+id/benefit_tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/primaryColor"
app:tabIndicatorColor="#color/accentColor"
app:tabSelectedTextColor="#android:color/white"
app:tabTextColor="#android:color/black"
app:tabIndicatorHeight="4dp" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/benefit_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<include
layout="#layout/floating_btn_benefits"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_margin="16dp"
/>
</android.support.design.widget.CoordinatorLayout>
Add this line of code to your CollapsingToolbarLayout
app:layout_scrollFlags="scroll|snap|enterAlways|enterAlwaysCollapsed"

Android CoordinatorLayout + AppbarLayout + Viewpager always scrolling

I have a classic layout with a ToolBar on the top, a TabLayout below it, and a ViewPager switching tabs from the TabLayout. When content in the ViewPager is scrollable, the ToolBar should scroll out of sight, and the TabLayout should follow and stick when it reaches the top.
All this is good in my current code, except, the ToolBar is always scrollable, regardless of the size of the ViewPager's content. See my code below. Any brilliant ideas on how to fix this?
<?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:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/primary"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.ToolBar"
app:layout_scrollFlags="scroll|enterAlways" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:scrollbars="horizontal"
app:tabIndicatorColor="#color/black_text" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/tabs_activity_view_pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
EDIT:
I can see that the viewPager's height is the same as the height for the entire root view. This might be intentded, as the appbar_scrolling_view_behavior does seem to add a top and bottom offset. It does however seem weird, since it will result in always scrolling the toolbar and tabbar.
I have solved the issue, tried over the example Google template and find out that
app:layout_behavior="#string/appbar_scrolling_view_behavior"
line must be added into view pager properties xml. It solved my problem.
I suggested you try this sample.
this is a layout like your layout in the sample.
<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.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<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_scrollFlags="scroll|enterAlways" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</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="end|bottom"
android:layout_margin="#dimen/fab_margin"
android:src="#drawable/ic_done" />
</android.support.design.widget.CoordinatorLayout>
using ListView as the data for ViewPager? If so, you need listView.setNestedScrollingEnabled(true);
Try adding these attributes on TabLayout:
app:layout_collapseMode="pin"
app:tabMode="fixed"
And this on AppBarLayout:
android:fitsSystemWindows="true"
* UPDATE *
I tried and this is not enough, since toolbar is still scrollable.
The solution is to make some logic about ViewPager (and its content).
Remove from xml layout file the toolbar scroll_flag attribute.
You have to implement some java code to check if ViewPager content height is > then screenHeight - (toolbar + tabBar). If true, set programmatically the scroll_flags as this:
LayoutParams params;
params = // get layout params from your toolbar
params.setScrollFlags(AppBarLayout.LayoutParams.SCROLL_FLAG_SCROLL
| AppBarLayout.LayoutParams.SCROLL_FLAG_ENTER_ALWAYS);
// set params
toolbar.setLayoutParams(params);
Based on other samples, my own code, and the (somewhat messy) source code of the appbar_scrolling_view_behavior:
public boolean onDependentViewChanged(CoordinatorLayout parent, View child,
View dependency) {
final CoordinatorLayout.Behavior behavior =
((CoordinatorLayout.LayoutParams) dependency.getLayoutParams()).getBehavior();
if (behavior instanceof Behavior) {
// Offset the child so that it is below the app-bar (with any overlap)
final int appBarOffset = ((Behavior) behavior)
.getTopBottomOffsetForScrollingSibling();
final int expandedMax = dependency.getHeight() - mOverlayTop;
final int collapsedMin = parent.getHeight() - child.getHeight();
if (mOverlayTop != 0 && dependency instanceof AppBarLayout) {
// If we have an overlap top, and the dependency is an AppBarLayout, we control
// the offset ourselves based on the appbar's scroll progress. This is so that
// the scroll happens sequentially rather than linearly
final int scrollRange = ((AppBarLayout) dependency).getTotalScrollRange();
setTopAndBottomOffset(AnimationUtils.lerp(expandedMax, collapsedMin,
Math.abs(appBarOffset) / (float) scrollRange));
} else {
setTopAndBottomOffset(dependency.getHeight() - mOverlayTop + appBarOffset);
}
}
return false;
}
I'm reading this in a way explaining the problem, as this is expected behavior with this code.
I think we need to write our own scroll behavior, specially for the RecyclerView,
The ViewPager height should be match_parent and not wrap_content.
i've just had the same problem.
The solution is very simple, just set your viewpager height
android:layout_height="wrap_content"
Simple solution is
- wrap your appbar layour and page viewer with a relative layout.
- give your appbar layout some id
- in page view set android:layout_below="Your_appbar_layout"
Eg:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/your_appBar_ID"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/primary"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.ToolBar"
app:layout_scrollFlags="scroll|enterAlways" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:scrollbars="horizontal"
app:tabIndicatorColor="#color/black_text" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/tabs_activity_view_pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/your_appBar_ID"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</RelativeLayout>

Categories

Resources