Like the title said, if using toolbar without setSupportActionBar in activity, when the toolbar is collapsed, the title of toolbar will have a strange top padding, and this padding is 24dp height, which is the height of the statusbar.
The screenshot:
But if I add setSupportActionBar(toolbar) to Activity's onCreate, then this problem resolved.
The layout file is as follows:
<?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"
tools:context=".ScrollingActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="#dimen/app_bar_height"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:toolbarId="#+id/toolbar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
app:title="test"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_scrolling" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/fab_margin"
app:layout_anchor="#id/app_bar"
app:layout_anchorGravity="bottom|end"
app:srcCompat="#android:drawable/ic_dialog_email" />
</android.support.design.widget.CoordinatorLayout>
I'm just using the sample ScrollActivity without big modification, just add a app:title to Toolbar, and comment out setSupportActionBar(toolbar);
the version of design library is 27.1.1
In fact, I worked out this problem but just don't get the reason why Google do this.
In the onLayout method of CollapsingToolbarLayout, it will first calculate toolbar's collapsed title's position
final int maxOffset = getMaxOffsetForPinChild(
mToolbarDirectChild != null ? mToolbarDirectChild : mToolbar);
ViewGroupUtils.getDescendantRect(this, mDummyView, mTmpRect);
mCollapsingTextHelper.setCollapsedBounds(
mTmpRect.left + (isRtl
? mToolbar.getTitleMarginEnd()
: mToolbar.getTitleMarginStart()),
mTmpRect.top + maxOffset + mToolbar.getTitleMarginTop(),
mTmpRect.right + (isRtl
? mToolbar.getTitleMarginStart()
: mToolbar.getTitleMarginEnd()),
mTmpRect.bottom + maxOffset - mToolbar.getTitleMarginBottom());
and the maxOffset is calculated at getMaxOffsetForPinChild, which is as follows:
final int getMaxOffsetForPinChild(View child) {
final ViewOffsetHelper offsetHelper = getViewOffsetHelper(child);
final LayoutParams lp = (LayoutParams) child.getLayoutParams();
return getHeight()
- offsetHelper.getLayoutTop()
- child.getHeight()
- lp.bottomMargin;
}
the problem is, offsetHelper.getLayoutTop() will first returns 0 instead of the real top 24dp, because at this time, offsetHelper's onViewLayout has not got called, it will be called after calculating collapsed title position.
// Update our child view offset helpers. This needs to be done after the title has been
// setup, so that any Toolbars are in their original position
for (int i = 0, z = getChildCount(); i < z; i++) {
getViewOffsetHelper(getChildAt(i)).onViewLayout();
}
and according to the comment, this is the intend behavior, onViewLayout must be called after the title has been setup.This is the point I don't get.
I guess setSupportActionBar did something make onLayout get called again, which will recalculate the title's position with the right LayoutTop. So I add the following code:
final CollapsingToolbarLayout v = findViewById(R.id.toolbar_layout);
v.post(new Runnable() {
#Override
public void run() {
v.requestLayout();
}
});
to the activity's onCreate method, and problem solved.
Now, I'll leave this question open since I don't think this is a elegant solution and maybe there is some offical method to solve this problem. Or is this a bug Android dev don't aware?
Related
I am making a custom Collapsing Toolbar Layout. The collapsing part is finished, the toolbar has been adjusted accordingly. The only thing that is missing is that I want to change my Toolbars background as the Collapsing Toolbar Layout is collapsing, i.e. gradually increase the opacity of my Toolbars background.
I've seen a lot of answers that seemingly do what I want in Java. Unfortunately, I have no basics (at all) in Java and the one that makes the most sense is here: here. I tried pasting said code to my Android Studio IDE and it doesn't work (it's not really overriding anything). For reference, the code of said post is here:
#Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
//measuring for alpha
int toolBarHeight = toolbar.getMeasuredHeight();
int appBarHeight = appBarLayout.getMeasuredHeight();
Float f = ((((float) appBarHeight - toolBarHeight) + verticalOffset) / ( (float) appBarHeight - toolBarHeight)) * 255;
fading_backdrop.getBackground().setAlpha(255 - Math.round(f));
}
I similarly want to do that, i.e. I want to be able to listen to the Y-offset of my AppBarLayout to gradually change my Toolbars background.
I have the following activity_xml file (just in case):
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout ...>
<com.google.android.material.appbar.AppBarLayout
... >
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapsingToolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/bg_collapsing_toolbar"
app:collapsedTitleTextAppearance="#style/CollapsedCollapsingToolbarText"
app:expandedTitleTextAppearance="#style/ExpandedCollapsingToolbarText"
app:layout_scrollFlags="exitUntilCollapsed|scroll">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/bg_collapsing_toolbar"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.75" />
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/Theme.AppCompat.Light">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
... />
<ImageView
... />
<ImageView
... />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
How do I listen to some AppBarLayout offset changes so that I can gradually change my Toolbars background as the Collapsing Toolbar Layout is collapsing in Kotlin?
Try this.
appBarLayout.addOnOffsetChangedListener(AppBarLayout.OnOffsetChangedListener { appBarLayout, verticalOffset ->
//measuring for alpha
int toolBarHeight = toolbar.getMeasuredHeight();
int appBarHeight = appBarLayout.getMeasuredHeight();
Float f = ((((float) appBarHeight - toolBarHeight) + verticalOffset) / ( (float) appBarHeight - toolBarHeight)) * 255;
fading_backdrop.getBackground().setAlpha(255 - Math.round(f));
})
I have created a Scrolling activity.
I want to hide this activity title (Banglalink Latest Offers).
But
I want to show activity title at this stage (Banglalink Latest Offers).
Is it possible to do?
If yes, how?
A bit late but I think this might help someone looking for a solution for this, you can simply set the text color to transparent.
Just add the below style to your styles.xml:
<style name="ToolBarTheme">
<item name="android:textColor">#android:color/transparent</item>
</style>
and add the following attribute to your CollapsingToolbarLayout:
app:expandedTitleTextAppearance="#style/ToolBarTheme"
Simply add this line to CollapsingToolbarLayout in your xml file:
app:titleEnabled="false"
Your best bet it to convert to a normal activity (with a scrollview as a child), start with the actionbar hidden (using the hide() call below (put it inside onCreate()).
Then put the coloured backgroiund at top of screen inside scrollview.
Finally, you can programmatically toggle between hiding your title (and actionbar), but showing your header background (or vice versa) when needed by adding a horizontal scroll listener/observer.
The listener will toggle the actionbar and header view depending on how far the user has scrolled down.
E.g:
Add observer inside onStart():
hsv.getViewTreeObserver().addOnScrollChangedListener(
new ViewTreeObserver.OnScrollChangedListener()
{ #Override public void onScrollChanged()
{
Log.i(TAG,"scroll:"+hsv.getScrollX());}});
// todo adjust scrollx value to decide on hide or show call:
if (hsv.getScrollX() > 100)
getActionBar().show();
mHeaderLayoutView.setVisibility(View.GONE);
else
getActionBar().hide();
mHeaderLayoutView.setVisibily(View.VISIBLE)
...
Note: hsv is a HorizontalScrollView works.
Note, if your are using the support libraries (E.g. you activity class extends AppCompatActivity), the code would change to:
getSupportActionBar().hide();
Im not sure if the getScrollX is in pixels or dp (job for you to research).
Hope this helps!
<resources>
<dimen name="app_bar_height">180dp</dimen>
<dimen name="fab_margin">16dp</dimen>
<dimen name="text_margin">16dp</dimen>
<!-- Default screen margins, per the Android Design guidelines. -->
<dimen name="activity_horizontal_margin">16dp</dimen>
<dimen name="activity_vertical_margin">16dp</dimen>
<dimen name="appbar_padding_top">8dp</dimen>
</resources>
This must be your dimens.xml file. If you reduce the app_bar_height to 120dp or close... the text will be invisible. I dont know how to bring it back after collapse
This is working for me:
CollapsingToolbarLayout toolbarLayout = (CollapsingToolbarLayout)
findViewById(R.id.toolbar_layout);
toolbarLayout.setTitle(" ");
You have to remove the line android:theme="#style/AppTheme.AppBarOverlay"in your XML. Once you removed the title will go to background. So you able hide title of the activity. as an example, you can place a placeholder to hide it.
<?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:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="220dp"
android:fitsSystemWindows="true"
>
<!--android:theme="#style/AppTheme.AppBarOverlay"-->
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:toolbarId="#+id/toolbar">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="pin"
app:srcCompat="#drawable/place_holder" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginLeft="6dp"
android:layout_marginStart="6dp"
android:layout_marginTop="8dp"
android:src="#mipmap/next"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/AppTheme.PopupOverlay"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_display_shop" />
</android.support.design.widget.CoordinatorLayout>
you can use supportActionBar and change title with "" (string null)
setSupportActionBar(findViewById(R.id.toolbar))
findViewById<CollapsingToolbarLayout>(R.id.toolbar_layout).title = title
supportActionBar!!.title=""
supportActionBar!!.setDisplayHomeAsUpEnabled(true)
or you can change in findViewById
findViewById<CollapsingToolbarLayout>(R.id.toolbar_layout).title = title
Calling this method from onCreate()
initCollapsingToolbar();
Defining the method
private void initCollapsingToolbar() {
final CollapsingToolbarLayout collapsingToolbar =
(CollapsingToolbarLayout) findViewById(R.id.toolbar_layout);
collapsingToolbar.setTitle(" ");
AppBarLayout appBarLayout = (AppBarLayout) findViewById(R.id.app_bar);
appBarLayout.setExpanded(true);
// hiding & showing the title when toolbar expanded & collapsed
appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
boolean isShow = false;
int scrollRange = -1;
#Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
if (scrollRange == -1) {
scrollRange = appBarLayout.getTotalScrollRange();
}
if (scrollRange + verticalOffset == 0) {
collapsingToolbar.setTitle("Your app title");
isShow = true;
} else if (isShow) {
collapsingToolbar.setTitle(" ");
isShow = false;
}
}
});
}
Yet more problem in using CoordinatorLayout and AppBarLayout.
I'm trying to achieve the basic functionality of having the Toolbar scroll off screen when scrolling down and coming back on screen when scrolling up.
However, my current set up is showing a problem: Not only is the Toolbar not scrolling off, the ListView seems to be rendering off screen at the bottom. It's almost as if it's been offset by the AppBarLayout height.
Here is a gif describing the issue, note that the final item is cut off also the ScrollBar is off screen:
My layout is pretty standard:
<?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:background="#color/background">
<android.support.design.widget.AppBarLayout
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="?android:attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:background="#color/orange"
app:layout_scrollFlags="scroll|enterAlways"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/swipeToRefresh"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<ExpandableListView
android:id="#+id/listView"
android:groupIndicator="#android:color/transparent"
android:layout_width="match_parent"
android:dividerHeight="0px"
android:layout_height="match_parent"/>
</android.support.v4.widget.SwipeRefreshLayout>
</android.support.design.widget.CoordinatorLayout>
CoordinatorLayout only works with RecyclerView or NestedScrollView.Try Wrapping your ExapandableListView inside NestedScrollView or use the below code to make NestedScrollingEnable for ExpandableListView.
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
expandablelistView.setNestedScrollingEnabled(true);
}else {
CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) mSwipeLayout.getLayoutParams();
params.bottomMargin = heightOfAppBarCompat;
mSwipeLayout.setLayoutParams(params);
}
Edit You can make scrolling work as expected pre-21 with the else statement.
I would write it as a comment, but in terms of readability I will drop this info as an answer. If it won't work, let me know and I will delete it...
I guess you should tell your Toolbar how to interact. In my app the toolbar looks like this:
<android.support.v7.widget.Toolbar
android:id="#+id/anim_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
please note the "app:layout_collapseMode"
private int mPreviousVisibleItem;
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
expListView.setNestedScrollingEnabled(true);
} else {
expListView.setOnScrollListener(new AbsListView.OnScrollListener() {
#Override
public void onScrollStateChanged(AbsListView view, int scrollState) {
}
#Override
public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
if (firstVisibleItem > mPreviousVisibleItem) {
appBarLayout.setExpanded(false, true);
} else if (firstVisibleItem < mPreviousVisibleItem) {
appBarLayout.setExpanded(true, true);
}
mPreviousVisibleItem = firstVisibleItem;
}
});
}
I have a pretty standard layout using the new design libraries:
<AppBarLayout>
<CollapsingToolbarLayout>
<ImageView/>
<Toolbar/>
</CollapsingToolbarLayout>
</AppBarLayout>
<android.support.v4.widget.NestedScrollView/> <!-- content here -->
What I'm trying to do is to completely hide the whole AppBarLayout programmatically, to temporarily get rid of the Toolbar and its collapsing feature.
So I'm calling this:
private void disableCollapsing() {
AppBarLayout.LayoutParams p = (AppBarLayout.LayoutParams) collapsingToolbarLayout.getLayoutParams();
p.setScrollFlags(0);
collapsingToolbarLayout.setLayoutParams(p);
}
to disable the collapsing behavior (works well), and finally this:
#Override
public void hide() {
final AppBarLayout layout = (AppBarLayout) findViewById(R.id.appbar);
layout.animate().translationY(-layout.getHeight())
.setListener(new AnimatorListenerAdapter() {
#Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
layout.setVisibility(View.GONE);
}
}).start();
}
I make the AppBarLayout translate to the top (works smoothly), and at the end of the animation set is visibility to View.GONE.
Issue
At the end of the animation, no matter I also set the visibility to GONE, I can't get the space that was previously occupied by the AppBarLayout. My NestedScrollView remains confined in the lower half of the screen, as if the AppBarLayout was still there (which is not). How can I fix it?
Before hiding:
After hiding (AppBar translated to the top):
As you can see, the top space is empty and unreachable. The scroll view scrolls inside the margins it had before, as if the visibility change was not measured by the CoordinatorLayout.
I have tried calling coordinator.requestLayout(), with no success.
I also tried setting the AppBarLayout as an app:anchor for my NestedScrollView, but that screws things up - scroll view ends up taking the whole screen even before hiding.
I was thinking of a custom Behavior to be set on the scroll view when entering this hidden-AppBar mode, but I can't get started on that.
Yes this looks like a bug, I solved this issue for my application setting the appbar height to 0:
android.support.design.widget.AppBarLayout appbar = (android.support.design.widget.AppBarLayout) findViewById(R.id.appbar);
CoordinatorLayout.LayoutParams lp = (CoordinatorLayout.LayoutParams)appbar.getLayoutParams();
lp.height = 0;
appbar.setLayoutParams(lp);
As mentioned above, setting the Coordinator.LayoutParams#height fixes the issue.
However, I wanted to express how/when this occurs (not necessarily why):
The CollaspingToolbarLayout will exhibit this behavior only when its app:layout_scrollFlags property is set to exitUntilCollapsed and its nested ToolBar also has defines app:layout_collapseMode="pin". With this combination of flags, the Toolbar will pin itself to the top of the screen, and this is intentional and sometimes desirable.
(snipped for brevity)
<androidx.coordinatorlayout.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapsingToolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<!-- some other component here, i.e ImageView -->
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:gravity="top"
app:layout_collapseMode="pin" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<!-- some scrolling view/layout -->
</androidx.coordinatorlayout.widget.CoordinatorLayout>
In the Fragment/Activity after the view is created, in Kotlin + ViewBinding:
binding.appbar.updateLayoutParams<CoordinatorLayout.LayoutParams> {
height = 0
}
For me, I had to capture the height of the AppBarLayout before hiding it to restore it to its original height when I wanted to show it.
private var appbarLayoutHeight = 0
private fun hideAppBar() {
appbarLayoutHeight = binding.appbar.measuredHeight
binding.appbar.updateLayoutParams<CoordinatorLayout.LayoutParams> {
height = 0
}
}
private fun showAppBar() {
binding.appbar.updateLayoutParams<CoordinatorLayout.LayoutParams> {
height = appbarLayoutHeight
}
}
Disclaimer: ViewBinding is not necessary to achieve this, nor is using Kotlin, and it's just what I use to acquire the AppBarLayoout and make this as terse/sugary as possible.
This works for me. Just toggles appbar on/off.
private boolean hide = true;
public void toggleAppBar() {
// Calculate ActionBar height
TypedValue tv = new TypedValue();
int actionBarHeight = 0;
if (getTheme().resolveAttribute(android.R.attr.actionBarSize, tv, true)) {
actionBarHeight = TypedValue.complexToDimensionPixelSize(tv.data, getResources().getDisplayMetrics());
}
CoordinatorLayout.LayoutParams lp = (CoordinatorLayout.LayoutParams)appBarLayout.getLayoutParams();
lp.height = hide ? 0 : actionBarHeight;
appBarLayout.setLayoutParams(lp);
appBarLayout.setExpanded(!hide, true);
hide = !hide;
appbar_layout.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=".MainActivity">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/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" />
</com.google.android.material.appbar.AppBarLayout>
<include layout="#layout/content_main" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Thanks #Caleb Kleveter that is my code for Kotlin
val appBarLayout = activity?.findViewById<AppBarLayout>(R.id.app_bar_layout)
val lp = appBarLayout?.layoutParams
lp?.height = 0;
appBarLayout?.layoutParams = lp
The following works as well
appBarLayout.setExpanded(false, false);
appBarLayout.setVisibility(View.GONE);
In version 5 of Google Play Store app, scroll to the content, ActionBar on with scrolling, but the tabs are fixed to get on top.
How to do this?
BEFORE SCROLL
AFTER SCROLL
As others have suggested, use ObservableScrollView from: https://github.com/ksoichiro/Android-ObservableScrollView
Try putting both the Toolbar and the SlidingTabStrip in the same container, then animate that container as the user scrolls the ObservableScrollView, for example:
<FrameLayout 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"
tools:context=".MainActivity">
<com.github.ksoichiro.android.observablescrollview.ObservableListView
android:id="#+id/listView"
android:layout_height="match_parent"
android:layout_width="match_parent"/>
<LinearLayout
android:id="#+id/toolbarContainer"
android:orientation="vertical"
android:elevation="10dp"
android:background="#color/material_deep_teal_200"
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"/>
<!--Placeholder view, your tabstrip goes here-->
<View
android:layout_width="wrap_content"
android:layout_height="48dp"/>
</LinearLayout>
</FrameLayout>
Then when you override the ObservableScrollViewCallbacks you could do something like this:
#Override
public void onScrollChanged(int scrollY, boolean firstScroll, boolean dragging) {
toolbarContainer.animate().cancel();
int scrollDelta = scrollY - oldScrollY;
oldScrollY = scrollY;
float currentYTranslation = -toolbarContainer.getTranslationY();
float targetYTranslation = Math.min(Math.max(currentYTranslation + scrollDelta, 0), toolbarHeight);
toolbarContainer.setTranslationY(-targetYTranslation);
}
#Override
public void onUpOrCancelMotionEvent(ScrollState scrollState) {
float currentYTranslation = -toolbarContainer.getTranslationY();
int currentScroll = listView.getCurrentScrollY();
if (currentScroll < toolbarHeight) {
toolbarContainer.animate().translationY(0);
} else if (currentYTranslation > toolbarHeight /2) {
toolbarContainer.animate().translationY(-toolbarHeight);
} else {
toolbarContainer.animate().translationY(0);
}
}
The onUpOrCancelMotionEvent stuff is to animate the container to prevent the toolbar from being only half shown/hidden.
Here's a demo video just for reference: https://drive.google.com/file/d/0B7TH7VeIpgSQSzZER1NneWpYa1E/view?usp=sharing
Answer is here:
https://github.com/ksoichiro/Android-ObservableScrollView :D
This library is excellent for my case and very others
Great that you answer your question by yourself ;)
Here is another small hint:
Use a seperated layout for your tabs or integrate them into your toolbar and then tranlsate the toolbar only as far as you can see the tabs on top.