Manmohan Pal
Reputation: 1577
hide toolbar when scrolling recyclerview
I am new in material design,I am unable to hide toolbar when scrolling list.For more information i am sharing my code is given below:
1.Common layout for app
<?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"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/background_light">
<RelativeLayout
android:id="@+id/main_container"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- <include layout="@layout/custom_toolbar" />-->
<RelativeLayout
android:id="@+id/toolbarContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="@+id/customToolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:textColorPrimary="@color/textColorPrimary"
app:colorButtonNormal="@android:color/white"
app:colorControlHighlight="?attr/colorPrimaryDark"
app:colorControlNormal="?android:attr/textColorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<TextView
android:id="@+id/actionbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:textColor="@color/colorPrimaryDark"
android:textSize="@dimen/action_bar_title_text_size"
android:textStyle="bold" />
<ImageView
android:id="@+id/toolbar_logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:src="@drawable/btn_check_on"
android:visibility="gone" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<ImageView
android:id="@+id/drawerIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:src="@drawable/img_drawer_logo" />
</RelativeLayout>
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="gone"
app:tabGravity="fill"
app:tabMaxWidth="0dp"
app:tabMode="fixed"
app:tabSelectedTextColor="@color/orange_100"
app:tabTextColor="@color/grey" />
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="gone"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
<include layout="@layout/horizontal_line" />
<!-- As the main content view, the view below consumes the entire
space available using match_parent in both dimensions. -->
<FrameLayout
android:id="@+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="@dimen/baseline"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</LinearLayout>
<moebel.de.app.ui.view.MaterialSearchView
android:id="@+id/search_view"
style="@style/MaterialSearchViewStyle"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<moebel.de.app.ui.view.ShopFinderSearchView
android:id="@+id/shopfinder_search_view"
style="@style/ShopFinderSearchViewStyle"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<LinearLayout
android:id="@+id/layout_progressbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:background="@color/transparentColor"
android:gravity="center"
android:visibility="visible">
<ProgressBar
android:id="@+id/progressBar1"
style="@android:style/Widget.ProgressBar.Large"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>
<RelativeLayout
android:id="@+id/drawer_left"
android:layout_width="@dimen/navigation_drawer_width"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="@color/drawerListBackground"
android:clickable="true">
<ListView
android:id="@+id/navigation_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:choiceMode="singleChoice"
android:divider="@null"
android:listSelector="@drawable/drawer_list_selector" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:src="@drawable/img_drawer_logo" />
</RelativeLayout>
</android.support.v4.widget.DrawerLayout>
2.Run time adding fragment having this layout:
<?xml version="1.0" encoding="utf-8"?>
<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="@android:color/white"
android:clickable="true"
android:orientation="vertical">
<LinearLayout
android:id="@+id/filterLayout"
android:layout_width="match_parent"
android:layout_height="44dp"
android:baselineAligned="false"
android:orientation="horizontal"
android:padding="@dimen/baseline">
<LinearLayout
android:id="@+id/categoryLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginEnd="2dp"
android:layout_marginRight="2dp"
android:layout_weight="0.5"
android:background="@color/grey_100"
android:gravity="center"
android:orientation="horizontal">
<ImageView
android:id="@+id/dotImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="2dp"
android:drawablePadding="@dimen/baseline"
android:src="@drawable/dot_image"
android:visibility="gone" />
<TextView
android:id="@+id/categoryText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableEnd="@drawable/ic_filter_arrow"
android:drawablePadding="@dimen/baseline"
android:drawableRight="@drawable/ic_filter_arrow"
android:text="@string/fragment_products_button_category"
android:textColor="@color/grey_400"
android:textSize="18sp" />
</LinearLayout>
<LinearLayout
android:id="@+id/filter"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="2dp"
android:layout_marginStart="2dp"
android:layout_weight="0.5"
android:background="@color/grey_100"
android:gravity="center"
android:orientation="horizontal">
<ImageView
android:id="@+id/filterDotImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="2dp"
android:drawablePadding="@dimen/baseline"
android:src="@drawable/dot_image"
android:visibility="gone" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableEnd="@drawable/ic_filter_arrow"
android:drawablePadding="@dimen/baseline"
android:drawableRight="@drawable/ic_filter_arrow"
android:text="@string/fragment_products_button_filter"
android:textColor="@color/grey_400"
android:textSize="18sp" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.1">
<android.support.v7.widget.RecyclerView
android:id="@+id/product_grid_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:overScrollMode="never"
android:scrollbars="vertical"
tools:listitem="@layout/product_grid_item" />
<TextView
android:id="@+id/listEmpty"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="Du hast keine Produkte auf Deinem Merkzettel"
android:visibility="gone" />
<LinearLayout
android:id="@+id/layout_progressbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:background="@color/transparentColor"
android:gravity="center"
android:visibility="visible">
<ProgressBar
android:id="@+id/progressBar1"
style="@android:style/Widget.ProgressBar.Large"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<View
android:id="@+id/transparent_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/transparentColor"
android:visibility="gone"
/>
</RelativeLayout>
<LinearLayout
android:id="@+id/layout_bottomProgressBar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.9"
android:background="@color/progressbarBackground"
android:gravity="center"
android:visibility="gone">
<ProgressBar
style="@android:style/Widget.ProgressBar.Small"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
Please help me to find out the solution .i am stuck in this problem don't know what is wrong in this code .
Upvotes: 1
Views: 2749
Answers (4)
Manmohan Pal
Reputation: 1577
After R&D i found that AppBarLayout must be the direct child of CoordinatorLayout So my corrected code is given below
<?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"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<RelativeLayout
android:id="@+id/main_container"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/background_light">
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:elevation="0dp">
<android.support.v7.widget.Toolbar
android:id="@+id/customToolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:textColorPrimary="@color/textColorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:colorButtonNormal="@android:color/white"
app:colorControlHighlight="?attr/colorPrimaryDark"
app:colorControlNormal="? android:attr/textColorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<TextView
android:id="@+id/actionbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:textColor="@color/colorPrimaryDark"
android:textSize="@dimen/action_bar_title_text_size"
android:textStyle="bold" />
<ImageView
android:id="@+id/toolbar_logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:src="@drawable/btn_check_on"
android:visibility="gone" />
</android.support.v7.widget.Toolbar>
<include layout="@layout/horizontal_line" />
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="gone"
app:tabGravity="fill"
app:tabMaxWidth="0dp"
app:tabMode="fixed"
app:tabSelectedTextColor="@color/orange_100"
app:tabTextColor="@color/grey" />
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="@+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="@dimen/baseline"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="gone"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
</LinearLayout>
<moebel.de.app.ui.view.MaterialSearchView
android:id="@+id/search_view"
style="@style/MaterialSearchViewStyle"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<moebel.de.app.ui.view.ShopFinderSearchView
android:id="@+id/shopfinder_search_view"
style="@style/ShopFinderSearchViewStyle"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<LinearLayout
android:id="@+id/layout_progressbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:background="@color/transparentColor"
android:gravity="center"
android:visibility="visible">
<ProgressBar
android:id="@+id/progressBar1"
style="@android:style/Widget.ProgressBar.Large"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</RelativeLayout>
<RelativeLayout
android:id="@+id/drawer_left"
android:layout_width="@dimen/navigation_drawer_width"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="@color/drawerListBackground"
android:clickable="true">
<ListView
android:id="@+id/navigation_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:choiceMode="singleChoice"
android:divider="@null"
android:listSelector="@drawable/drawer_list_selector" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:src="@drawable/img_drawer_logo" />
</RelativeLayout>
</android.support.v4.widget.DrawerLayout>
Upvotes: 1
Vu Nguyen
Reputation: 316
If you want to use this:
app:layout_behavior="@string/appbar_scrolling_view_behavior"
to scrolling your toolbar, please redesign your layout.
layout_behavior effective only when AppBarLayout are children under the CoordinatorLayout
like this:
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/background_light">
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
Upvotes: 0
Siddhesh Dighe
Reputation: 2954
You can do something like this
public abstract class HidingScrollListener extends RecyclerView.OnScrollListener {
private static final int HIDE_THRESHOLD = 20;
private int scrolledDistance = 0;
private boolean controlsVisible = true;
@Override
public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
super.onScrolled(recyclerView, dx, dy);
if (scrolledDistance > HIDE_THRESHOLD && controlsVisible) {
onHide();
controlsVisible = false;
scrolledDistance = 0;
} else if (scrolledDistance < -HIDE_THRESHOLD && !controlsVisible) {
onShow();
controlsVisible = true;
scrolledDistance = 0;
}
if((controlsVisible && dy>0) || (!controlsVisible && dy<0)) {
scrolledDistance += dy;
}
}
public abstract void onHide();
public abstract void onShow();
}
And then add this Listener to your RecyclerView
recyclerView.setOnScrollListener(new HidingScrollListener() {
@Override
public void onHide() {
hideViews();
}
@Override
public void onShow() {
showViews();
}
});
In hideViews() method you can hide your toolbar
mToolbar.animate().translationY(-mToolbar.getHeight()).setInterpolator(new AccelerateInterpolator(2));
In showViews() method you can show your toolbar
mToolbar.animate().translationY(0).setInterpolator(new DecelerateInterpolator(2));
Check this link out for Complete Tutorial
Upvotes: 0
R. Zagórski
Reputation: 20258
Add this:
app:layout_behavior="@string/appbar_scrolling_view_behavior"
to your RecyclerView tag and the root tag of your fragment.
Upvotes: 0
Related Questions
- Why doesn't RecyclerView have onItemClickListener()?
- How to add dividers and spaces between items in RecyclerView
- How can I close/hide the Android soft keyboard programmatically?
- Xamarin Android: Change the background color of a GridView item when clicked
- How to stop EditText from gaining focus when an activity starts in Android?
- call fragments when clicking RecyclerView item and show them both in the same activity
- How to create RecyclerView with multiple view types
- RecyclerView onClick
- Grey text appear white with outline in android device