Android: Collapsing Linearlayout instead of Collapsing Toolbar
You can use a timer and gradually shrink the height/margin of the topbar's LinearLayout (Edit: flaws in Anton Maiorov's answer is fixed here)
See below snippet (tested on devices)
Approach I: Anton Maiorov's answer, flaws fixed, this is much simpler than the 2nd implementation below
public class MainActivity extends AppCompatActivity {
LinearLayout toolbar;
int mOriginalHeight;
boolean initialSizeObtained = false;
boolean isShrink = false;
Animation _hideAnimation = new Animation() {
@Override
protected void applyTransformation(float interpolatedTime, Transformation t) {
LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) toolbar.getLayoutParams();
params.topMargin = -(int) (mOriginalHeight * interpolatedTime);
toolbar.setLayoutParams(params);
}
};
Animation _showAnimation = new Animation() {
@Override
protected void applyTransformation(float interpolatedTime, Transformation t) {
LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) toolbar.getLayoutParams();
params.topMargin = (int) (mOriginalHeight * (interpolatedTime - 1));
toolbar.setLayoutParams(params);
}
};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
toolbar = (LinearLayout) findViewById(R.id.toolbar);
//Get the original height, which is measured according to WRAP_CONTENT
toolbar.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
@Override
public void onGlobalLayout() {
if (initialSizeObtained)
return;
initialSizeObtained = true;
mOriginalHeight = toolbar.getMeasuredHeight();
}
});
_hideAnimation.setDuration(2000);
_showAnimation.setDuration(2000);
}
//Click on the Olimpic image --> Toggles the top toolbar
public void ToggleTopBar(View view) {
isShrink = !isShrink;
toolbar.clearAnimation(); //Important
toolbar.startAnimation(isShrink? _hideAnimation : _showAnimation);
}
}
Approach II: my original answer by changing the toolbar's height, and also using timer manually, which is more involved:
public class MainActivity extends AppCompatActivity {
LinearLayout toolbar;
int mOriginalHeight;
boolean initialSizeObtained = false;
int currentHeight;
boolean isShrink = false;
Timer timer;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
toolbar = (LinearLayout) findViewById(R.id.toolbar);
toolbar.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
@Override
public void onGlobalLayout() {
if (initialSizeObtained)
return;
initialSizeObtained = true;
mOriginalHeight = toolbar.getMeasuredHeight();
currentHeight = mOriginalHeight;
Log.d("Demo", "Original height is " + mOriginalHeight);
}
});
}
//Click on the Olimpic image --> Toggles the top toolbar
public void ToggleTopBar(View view) {
isShrink = !isShrink;
Resize(isShrink, toolbar, 250);
}
void Resize(final boolean isShrink, final LinearLayout layout, final int minHeight) {
final int H0 = mOriginalHeight;
timer = runTimerAction(10, new Runnable() {
public void run() {
Log.d("demo", "Current Height= " + currentHeight);
if (isShrink && currentHeight > minHeight) {
currentHeight -= 10;
layout.getLayoutParams().height = currentHeight;
refreshToolbar();
} else if (!isShrink && currentHeight < H0) {
currentHeight += 10;
layout.getLayoutParams().height = currentHeight;
refreshToolbar();
} else {
layout.getLayoutParams().height = isShrink ? minHeight : H0;
refreshToolbar();
if (timer != null)
timer.cancel();
}
}
}
);
}
public void refreshToolbar() {
runOnUiThread(new Runnable() {
@Override
public void run() {
toolbar.requestLayout();
}
});
}
Improved my answer using David's comment.
I would animate "topMargin" of your header:
LinearLayout _headerLayout; // expected to be set in "onCreateView"
int _headerHeight; // expected to be set in "onCreateView" as _headerHeight = getHeaderHeight();
Animation _hideAnimation = new Animation() {
@Override
protected void applyTransformation(float interpolatedTime, Transformation t) {
LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) _headerLayout.getLayoutParams();
params.topMargin = -(int) (_headerHeight * interpolatedTime);
_headerLayout.setLayoutParams(params);
}
};
Animation _showAnimation = new Animation() {
@Override
protected void applyTransformation(float interpolatedTime, Transformation t) {
LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) _headerLayout.getLayoutParams();
params.topMargin = (int) (_headerHeight * (interpolatedTime - 1));
_headerLayout.setLayoutParams(params);
}
};
private int getHeaderHeight()
{
_headerLayout.measure(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
return _headerLayout.getMeasuredHeight();
}
Hiding header:
_headerLayout.clearAnimation();
_headerLayout.startAnimation(_hideAnimation);
Showing header:
_headerLayout.clearAnimation();
_headerLayout.startAnimation(_showAnimation);
You can also easily set duration for your animations:
_hideAnimation.setDuration(2000) // will hide in 2 seconds
_showAnimation.setDuration(2000) // will show in 2 seconds
try this I added Coordinator and CollapsingToolbarLayput
<?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:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="@+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="15dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorAccent"
android:orientation="vertical"
android:padding="@dimen/activity_horizontal_margin">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="@drawable/ic_date_range_black_24dp"
android:tint="@android:color/darker_gray" />
<android.support.v4.widget.Space
android:layout_width="@dimen/activity_horizontal_margin"
android:layout_height="wrap_content" />
<android.support.design.widget.TextInputLayout
android:id="@+id/date_til"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Date">
<android.support.design.widget.TextInputEditText
android:id="@+id/date"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:cursorVisible="false"
android:focusable="false"
android:longClickable="false" />
</android.support.design.widget.TextInputLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_store_black_24dp"
android:layout_gravity="center"
android:tint="@android:color/darker_gray" />
<android.support.v4.widget.Space
android:layout_width="@dimen/activity_horizontal_margin"
android:layout_height="wrap_content" />
<android.support.design.widget.TextInputLayout
android:id="@+id/store_til"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Store">
<android.support.design.widget.TextInputEditText
android:id="@+id/store"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.TextInputLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="@drawable/ic_place_black_24dp"
android:tint="@android:color/darker_gray" />
<android.support.v4.widget.Space
android:layout_width="@dimen/activity_horizontal_margin"
android:layout_height="wrap_content" />
<android.support.design.widget.TextInputLayout
android:id="@+id/location_til"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.TextInputEditText
android:id="@+id/location"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Location" />
</android.support.design.widget.TextInputLayout>
</LinearLayout>
</LinearLayout>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="@+id/recycler"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:listitem="@layout/list_car"
app:layoutManager="LinearLayoutManager" />
I hope this should help you.