First of all, this effect needs to introduce design: compile 'com.android.support:design:26.+'
In the layout file:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:descendantFocusability="blocksDescendants"
android:fitsSystemWindows="true">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="@+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="100dp">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsingToolBarLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff"
app:expandedTitleMargin="16dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed|enterAlwaysCollapsed">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_centerVertical="true"
android:background="@mipmap/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="这不是标题" />
</RelativeLayout>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="@+id/nest_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:text="12112112211221212121" />
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:text="12112112211221212121" />
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:text="12112112211221212121" />
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:text="12112112211221212121" />
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:text="12112112211221212121" />
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:text="12112112211221212121" />
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:text="12112112211221212121" />
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:text="12112112211221212121" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.BottomNavigationView
android:id="@+id/navigation"
android:layout_width="match_parent"
app:menu="@menu/navigation"
android:background="@color/colorPrimary"
android:layout_gravity="start"
android:layout_alignParentBottom="true"
android:fitsSystemWindows="true"
android:layout_height="100dp" />
</RelativeLayout>
Note: When using BottomNavigationView, there will be a default animation displacement effect. Generally, we do not need this effect, so we will remove it;
BottomNavigationViewHelper.disableShiftMode(bottomNavigationView);
public class BottomNavigationViewHelper {
public static void disableShiftMode(BottomNavigationView view) {
BottomNavigationMenuView menuView = (BottomNavigationMenuView) view.getChildAt(0);
try {
Field shiftingMode = menuView.getClass().getDeclaredField("mShiftingMode");
shiftingMode.setAccessible(true);
shiftingMode.setBoolean(menuView, false);
shiftingMode.setAccessible(false);
for (int i = 0; i < menuView.getChildCount(); i++) {
BottomNavigationItemView item = (BottomNavigationItemView) menuView.getChildAt(i);
//noinspection RestrictedApi
item.setShiftingMode(false);
// set once again checked value, so view will be updated
//noinspection RestrictedApi
item.setChecked(item.getItemData().isChecked());
}
} catch (NoSuchFieldException e) {
Log.e("BNVHelper", "Unable to get shift mode field", e);
} catch (IllegalAccessException e) {
Log.e("BNVHelper", "Unable to change value of shift mode", e);
}
}
}
Next, we need to monitor the scroll state of NestedScrollView to set the hiding and display of the bottom navigation
nestView.setOnScrollChangeListener(new NestedScrollView.OnScrollChangeListener() {
@Override
public void onScrollChange(NestedScrollView v, int scrollX, int scrollY, int
oldScrollX, int oldScrollY) {
//Sliding up and showing the bottom bar
if (scrollY - oldScrollY > 0 && isBottomShow) {
isBottomShow = false;
//Change the Y property to the bottom bar height (equivalent to hidden)
navigation.animate().translationY(navigation.getHeight());
} else if (scrollY - oldScrollY < 0 && !isBottomShow ) {
isBottomShow = true;
navigation.animate().translationY(0);
}
}
});
Resource download : https://download.csdn.net/download/m0_37177456/103777
Effect picture: