I do not want the toolbar to collapse in the coordinator layout below. No matter what I do it collapses (the tabs do not collapse but the toolbar with the title does).
Second issue is that the nestedscrollview in the viewpager has a few EditTexts. On opening of softkeyboard when an edittext at the bottom is clicked the softkeyboard goes over the edittext. On closing the softkeyboard and then doing second attempt it successfully moves the edittext text up.
<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"
app:layout_collapseMode="none">
<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" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="36dp"
android:paddingLeft="6dp"
app:tabMode="scrollable" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill_vertical"
android:layout_marginBottom="?attr/actionBarSize"/>
<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_add_white_48dp"
android:visibility="gone" />
This is one of the views within the viewpager:
<android.support.v4.widget.NestedScrollView 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"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="22dp"
android:layout_marginRight="22dp"
android:layout_marginTop="15dp"
android:orientation="vertical">
<AutoCompleteTextView
android:id="#+id/symbolAutoCompleteBuy"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:hint="Enter Symbol Here"
android:inputType="textCapCharacters" />
<TextView
android:id="#+id/companyNameBuy"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_marginLeft="4dp"
android:textColor="#color/gray2"
android:textStyle="bold"
android:textSize="14sp" />
<TextView
android:id="#+id/currentPriceBuy"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_marginLeft="4dp"
android:textColor="#color/gray2"
android:textStyle="bold"
android:textSize="14sp" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:orientation="horizontal">
<TextView
android:layout_weight="0.45"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="PURCHASE PRICE"/>
<EditText
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.55" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="80dp"
android:orientation="horizontal">
<TextView
android:layout_weight="0.45"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="NUMBER OF SHARES"/>
<EditText
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.55" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="18dp"
android:orientation="horizontal">
<TextView
android:layout_weight="0.45"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="PURCHASE DATE"
android:layout_gravity="center_vertical" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.35"
android:id="#+id/dateText"
android:layout_gravity="center_vertical" />
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.2"
android:id="#+id/datePickerImage"
android:src="#drawable/ic_event_note_black_24dp" />
</LinearLayout>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
Try this
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentScrim="#color/primary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="300dp"
android:scaleType="centerCrop"
android:src="#drawable/collapsing_toolbar_bg"
app:layout_collapseMode="parallax"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_collapseMode="pin"/>
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/tab_layout"
android:background="?attr/colorPrimary"/>
</android.support.design.widget.AppBarLayout>
The atrribute:
app:layout_scrollFlags="scroll|exitUntilCollapsed"
prevents the collapsing toolbar layout from getting completely collapsed.
And replace android:src="#drawable/collapsing_toolbar_bg" with your image resource
Related
I'm trying to collapse my header view while scrolling up the view pager.
In the following image relativelayout3 is the layout I want to collapse..
Something like playstore preview image collapse in app page..
I tried searching and the following line in relativelayout3, But it didnt work
app:layout_scrollFlags="scroll|enterAlways"
And this my complete xml,
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/relativeLayout3"
app:layout_scrollFlags="scroll|enterAlways"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="55dp"
android:id="#+id/toolbar"
android:background="#color/cornflower_blue_two"
android:elevation="5dp">
<ImageButton
android:id="#+id/more"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:layout_marginEnd="10dp"
android:background="#null"
android:src="#drawable/ic_dots_vertical" />
<ImageButton
android:id="#+id/back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:layout_marginEnd="5dp"
android:layout_marginStart="10dp"
android:background="#null"
android:src="#drawable/ic_arrow_left" />
</RelativeLayout>
<ss.com.bannerslider.views.BannerSlider
android:id="#+id/slider"
android:layout_width="match_parent"
android:layout_height="250dp"
android:background="#color/blue"
android:layout_below="#id/toolbar"
/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentStart="true"
android:layout_below="#+id/relativeLayout3">
<TextView
android:id="#+id/product"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:text="Blah Blah"
android:textColor="#color/dark_gray"
android:textSize="25sp"
android:textStyle="bold" />
<TextView
android:id="#+id/brand"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignStart="#+id/product"
android:layout_below="#+id/product"
android:text="Blah inc."
android:textSize="20sp"
android:textStyle="bold" />
<TextView
android:id="#+id/ratings"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/brand"
android:layout_alignBottom="#+id/brand"
android:layout_marginStart="10dp"
android:layout_toEndOf="#+id/brand"
android:background="#color/ratings"
android:paddingEnd="10dp"
android:paddingStart="10dp"
android:text="4.7"
android:textColor="#color/white"
android:textSize="20sp"
android:textStyle="bold" />
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_below="#+id/brand"
android:layout_marginTop="14dp"
app:tabGravity="fill"
app:tabMode="fixed" />
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_below="#+id/tabLayout" />
</RelativeLayout>
</RelativeLayout>
</ScrollView>
</RelativeLayout>
Consider using CollapsingToolbarLayout. Please refer Collapsing Toolbar Example.
<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.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="250dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/cartoon"
android:scaleType="centerCrop"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffe5e5"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingTop="10dp">
<include layout="#layout/card_layout" />
<include layout="#layout/card_layout" />
<include layout="#layout/card_layout" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
Output
More Reference
As I explained on the title, if I scroll from the bottom to top fastly with removing my finger immediately after pulling down, scrolling stops at collapsed toolbar. I want it to expand. If I pull smootly the nestedscrollview, there is no problem, toolbar expands properly.
I have recycler view in nestedscrollview.
Here is my layout
<android.support.design.widget.CoordinatorLayout
android:id="#+id/detail_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
>
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="160dp"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
>
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="#dimen/article_keylines"
app:expandedTitleMarginStart="#dimen/md_keylines"
app:expandedTitleMarginBottom="#dimen/article_keylines"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:expandedTitleTextAppearance="#dimen/tile_padding"
>
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/a"
android:fitsSystemWindows="true"
android:foreground="#drawable/scrim_profile"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
android:elevation="4dp"
app:layout_scrollFlags="scroll|enterAlways|snap"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/nestedscrollview"
android:background="#color/background"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<RelativeLayout
android:id="#+id/inner_relativeLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="#dimen/md_keylines"
android:paddingRight="#dimen/md_keylines"
android:background="#color/white"
android:paddingBottom="#dimen/article_keylines"
android:paddingTop="#dimen/article_keylines"
android:focusableInTouchMode="true"
>
<TextView
android:id="#+id/tw1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/text"
android:textSize="16sp"
android:lineSpacingExtra="4sp"
android:text="Text"
android:layout_marginBottom="#dimen/md_keylines"/>
<View
android:id="#+id/divider_1"
android:layout_width="2dp"
android:layout_height="50dp"
android:background="#color/divisor"
android:layout_below="#id/tw1"
/>
<View
android:id="#+id/divider_2"
android:layout_width="2dp"
android:layout_height="50dp"
android:background="#color/divisor"
android:layout_below="#id/tw1"
android:layout_toRightOf="#+id/tw2"
android:layout_toEndOf="#+id/tw2" />
<View
android:id="#+id/divider_3"
android:layout_width="2dp"
android:layout_height="50dp"
android:background="#color/divisor"
android:layout_below="#+id/tw1"
android:layout_toRightOf="#+id/followers"
android:layout_toEndOf="#+id/followers"/>
<TextView
android:id="#+id/count"
android:gravity="center_horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textColor="#color/text"
android:textSize="20sp"
android:text="14"
android:lineSpacingExtra="-4sp"
android:layout_alignTop="#id/divider_1"
android:layout_marginTop="6dp"
android:layout_alignRight="#+id/experience"
android:layout_alignEnd="#+id/experience"
/>
<TextView
android:id="#+id/tw3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/text"
android:textSize="14sp"
android:text="Text"
android:paddingRight="12dp"
android:paddingEnd="12dp"
android:paddingLeft="12dp"
android:paddingStart="12dp"
android:layout_below="#id/tw2"
android:layout_toRightOf="#id/divider_1"
/>
<TextView
android:id="#+id/count2"
android:layout_toRightOf="#id/divider_2"
android:layout_toLeftOf="#id/divider_3"
android:layout_below="#id/tw1"
android:gravity="center_horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textColor="#color/text"
android:textSize="20sp"
android:layout_alignTop="#id/divider_1"
android:layout_marginTop="6dp"
android:text="200"
/>
<TextView
android:id="#+id/tw4"
android:layout_below="#id/tw3"
android:layout_toRightOf="#id/divider_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:textColor="#color/text"
android:textSize="14sp"
android:text="text"
android:paddingLeft="12dp"
android:paddingRight="12dp"
/>
<Button
android:id="#+id/button"
android:layout_toRightOf="#id/divider_3"
android:layout_below="#id/tw1"
android:layout_marginLeft="12dp"
android:layout_width="match_parent"
android:layout_height="38dp"
android:textColor="#color/orange_button"
android:gravity="center_vertical|start"
android:text="text"
android:textSize="16sp"
android:textAllCaps="false"
android:paddingLeft="18dp"
android:drawableLeft="#drawable/i"
android:drawablePadding="4dp"
android:layout_alignTop="#id/count"
style="?android:attr/borderlessButtonStyle"
android:background="#drawable/button"/>
</RelativeLayout>
<android.support.v7.widget.RecyclerView
android:padding="#dimen/md_keylines"
android:id="#+id/recycler_view"
android:layout_below="#id/inner_relativeLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
<ProgressBar
android:id="#+id/progress_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_below="#id/inner_relativeLayout"
android:layout_marginTop="30dp"/>
</RelativeLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
Thanks in advance.
After I tried a lot with overriding AppBarLayout.Behavior in another stackoverflow answer,
I have found a library that resolves my problem. ( smooth-app-bar-layout
)
There are 3 steps in usage. Be careful about the 3rd step. You should put nestedscrollview above the smoothappbarlayout below the coordinatorlayout.
<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.support.v7.widget.NestedScrollView
android:id="#android:id/list"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<me.henrytao.smoothappbarlayout.SmoothAppBarLayout
android:id="#+id/smooth_app_bar_layout"
android:layout_width="match_parent"
android:layout_height="#dimen/app_bar_height">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
app:layout_collapseMode="pin"
app:navigationIcon="#drawable/ic_toolbar_arrow_back"
style="#style/AppStyle.MdToolbar" />
</android.support.design.widget.CollapsingToolbarLayout>
</me.henrytao.smoothappbarlayout.SmoothAppBarLayout>
</android.support.design.widget.CoordinatorLayout>
I am trying to collapse the custom toolbar with below code:
<?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:custom="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.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/white"
app:contentInsetEnd="0dp"
app:contentInsetLeft="0dp"
app:contentInsetRight="0dp"
app:contentInsetStart="0dp"
app:layout_collapseMode="pin">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="vertical">
<LinearLayout
android:id="#+id/ll_custom_toolbar_normal"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary"
android:gravity="center_vertical"
android:orientation="horizontal">
<ImageView
android:id="#+id/iv_toolbar_home"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="#dimen/padding_16" />
<com.idolbee.android.customview.CustomTextView
android:id="#+id/tv_toolbar_title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:textAppearance="#style/TextAppearance.AppCompat.Medium"
android:textColor="#android:color/white"
custom:font="ars_maquette_pro_bold"
tools:text="Title" />
<ImageView
android:id="#+id/iv_toolbar_menu1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="#dimen/padding_16"
android:paddingLeft="#dimen/padding_16"
android:paddingTop="#dimen/padding_16"
android:visibility="gone" />
<ImageView
android:id="#+id/iv_toolbar_menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="#dimen/padding_16" />
</LinearLayout>
<ImageView
android:id="#+id/iv_my_stats_profile_pic"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_marginTop="#dimen/padding_16"
android:src="#drawable/profile_pic_holder" />
<com.idolbee.android.customview.CustomTextView
android:id="#+id/tv_my_stats_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/margin_16"
android:layout_marginTop="#dimen/margin_16"
custom:font="ars_maquette_pro_bold"
tools:text="Isabel Lozano" />
</LinearLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tl_my_stats"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
android:background="#color/colorAccent"
app:layout_collapseMode="pin"
custom:tabBackground="#color/colorAccent"
custom:tabIndicatorColor="#color/colorPrimary"
custom:tabMode="scrollable"
custom:tabSelectedTextColor="#color/colorPrimary"
custom:tabTextColor="#color/colorPrimary" />
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/rv_my_stats"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="?attr/actionBarSize"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:listitem="#layout/list_item_my_stats" />
<RelativeLayout
android:id="#+id/rl_fab_overlay"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/actionbar_overlay"
android:visibility="gone">
<LinearLayout
android:id="#+id/ll_home_fab_menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="#dimen/margin_floating_action_menu"
android:layout_marginRight="#dimen/margin_16"
android:gravity="right"
android:orientation="vertical">
</LinearLayout>
</RelativeLayout>
<ImageView
android:id="#+id/fab_home"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_margin="#dimen/margin_16"
android:src="#drawable/floating_btn_menu" />
</android.support.design.widget.CoordinatorLayout>
But its not working. ToolBar is not collapsing with scroll event of RecyclerView.
Can anyone help me with this ?
Just remove exitUntilCollapsed from app:layout_scrollFlags and the CollapsingToolBar will start working.
PS: Tested
I am using Toolbar and more than one Textview with some text,but when i scroll i am trying to hide my toolbar but its not hiding,following is my xml code can anyone help me with this,Thanks in advance..
<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:fitsSystemWindows="true">
<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:fitsSystemWindows="true">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
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:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:orientation="vertical"
android:paddingTop="24dp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Product Name:"
android:layout_marginLeft="5dp"
android:textAppearance="#style/TextAppearance.AppCompat.Title" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/desc_prodname"
android:layout_marginTop="5dp"
android:layout_marginLeft="5dp"
android:text="#string/cheese_ipsum"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Brand:"
android:layout_marginTop="10dp"
android:layout_marginLeft="5dp"
android:textAppearance="#style/TextAppearance.AppCompat.Title" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/desc_brandnm"
android:layout_marginTop="5dp"
android:layout_marginLeft="5dp"
android:text="#string/cheese_ipsum"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Description:"
android:layout_marginLeft="5dp"
android:textAppearance="#style/TextAppearance.AppCompat.Title" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/desc_description"
android:layout_marginLeft="5dp"
android:text="#string/cheese_ipsum"
android:layout_marginTop="5dp"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Price:"
android:layout_marginTop="10dp"
android:layout_marginLeft="5dp"
android:textAppearance="#style/TextAppearance.AppCompat.Title" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/desc_price"
android:layout_marginTop="5dp"
android:layout_marginLeft="5dp"
android:text="#string/cheese_ipsum"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Category:"
android:layout_marginTop="10dp"
android:layout_marginLeft="5dp"
android:textAppearance="#style/TextAppearance.AppCompat.Title" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/desc_catname"
android:layout_marginTop="5dp"
android:layout_marginLeft="5dp"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Subcategory:"
android:layout_marginTop="10dp"
android:layout_marginLeft="5dp"
android:textAppearance="#style/TextAppearance.AppCompat.Title" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/desc_subcatname"
android:layout_marginTop="5dp"
android:layout_marginLeft="5dp"
/>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
<!--<android.support.design.widget.FloatingActionButton
android:layout_height="wrap_content"
android:layout_width="wrap_content"
app:layout_anchor="#id/appbar"
app:layout_anchorGravity="bottom|right|end"
android:src="#drawable/ic_discuss"
android:layout_margin="#dimen/fab_margin"
android:clickable="true"/>-->
</android.support.design.widget.CoordinatorLayout>
Put you toolbar inside "NestedScrollView"
Maybe this will help? https://github.com/ksoichiro/Android-ObservableScrollView
You can just observe the scrolled area and show/hide the toolbar when necessary.
Use this code for 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"/>
Explanation :
The scroll flag used within the attribute app:layout_scrollFlags must be enabled for any scroll effects to take into effect.
For more information and different scrolling effects check Handling-Scrolls-with-CoordinatorLayout
If you want to achieve that without using any libraries, you have to put Toolbar inside the CollapsingToolbarLayout. Here is the working layout.
<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="256dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar>
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<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/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.v4.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
// put your contents here..
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
I'm trying to implement new android design support library. I have a view pager inside appbar layout and a tab layout below it. Also I need to stick my toolbar and tab header layout on top while scrolling. When I try to scroll the content by scrolling in appbar layout, it didn't gets scrolled. But when I scrolled in content of tablayout, the whole content will gets scrolled. Here is my xml:
<android.support.design.widget.CoordinatorLayout
android:id="#+id/outer_coordinator_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ffb4b4b4"
android:fitsSystemWindows="true">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:minHeight="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/toolbar"
app:layout_scrollFlags="scroll|enterAlways">
<android.support.v4.view.ViewPager
android:id="#+id/top_viewpager"
android:layout_width="match_parent"
android:layout_height="320dp"
android:fitsSystemWindows="true" />
</RelativeLayout>
<android.support.design.widget.TabLayout
android:id="#+id/sliding_tabs"
android:layout_width="match_parent"
android:layout_height="80dp"
android:fitsSystemWindows="true"
app:layout_scrollFlags="enterAlwaysCollapsed"
app:tabGravity="fill"
app:tabMode="fixed"
app:tabTextColor="#color/white" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/tab_viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
I had a similar layout and it works well. Here I will post so that you can be inspired.
activity_profile.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:id="#+id/coordinator_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="me.danielpan.twitterlike.ProfileActivity">
<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:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_tool_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleTextAppearance="#style/Widget.AppCompat.ActionBar.TabText"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:statusBarScrim="?attr/colorAccent">
<include layout="#layout/profile_header_layout" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:backgroundTint="#color/app_color_primary"
app:collapseIcon="#drawable/header_avatar"
app:layout_collapseMode="pin"
app:navigationIcon="#mipmap/ic_launcher"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:subtitle="Incredible Pics"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:title="Twitter Profile" />
<!--app:layout_scrollFlags="scroll|exitUntilCollapsed"-->
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
style="#style/TabLayoutStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways"
app:tabContentStart="2dp"
app:tabGravity="fill"
app:tabIndicatorColor="#color/app_color_accent"
app:tabIndicatorHeight="2dp"
app:tabMinWidth="24dp"
app:tabMode="fixed"
app:tabPadding="1dp"
app:tabSelectedTextColor="#color/text_color_secondary"
app:tabTextColor="#color/text_color" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
app:paddingEnd="0dp"
app:paddingStart="0dp" />
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:layout_marginRight="20dp"
android:src="#color/text_color"
app:borderWidth="3dp"
app:elevation="2dp"
app:fabSize="mini"
app:layout_anchor="#id/coordinator_layout"
app:layout_anchorGravity="bottom|right|end"
app:pressedTranslationZ="3dp"
app:rippleColor="#color/text_color_secondary" />
</android.support.design.widget.CoordinatorLayout>
profile_header_layout.xml:
<?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="wrap_content"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"
app:layout_scrollFlags="scroll|enterAlways">
<ImageView
android:id="#+id/header_cover"
android:layout_width="match_parent"
android:layout_height="150dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:scaleType="centerCrop"
android:src="#drawable/header_cover" />
<LinearLayout
android:id="#+id/header_detail_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/header_cover"
android:layout_centerHorizontal="true"
android:layout_marginLeft="5dp"
android:gravity="left"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="50dp">
<Button
android:id="#+id/header_btn_follow"
android:layout_width="65dp"
android:layout_height="30dp"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="5dp"
android:background="#drawable/btn_blue_bg_selector"
android:gravity="center"
android:text="Follow"
android:textAllCaps="false"
android:textColor="#646464"
android:textSize="18sp" />
<Button
android:id="#+id/header_btn_favorite"
android:layout_width="65dp"
android:layout_height="30dp"
android:layout_centerVertical="true"
android:layout_marginRight="5dp"
android:layout_toLeftOf="#id/header_btn_follow"
android:background="#drawable/btn_white_bg_selector"
android:gravity="center"
android:text="Favorite"
android:textAllCaps="false"
android:textColor="#646464"
android:textSize="18sp" />
</RelativeLayout>
<TextView
android:id="#+id/header_nickname"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:gravity="center"
android:text="Incredible Pics"
android:textAllCaps="false"
android:textColor="#000000"
android:textSize="20sp" />
<TextView
android:id="#+id/header_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:gravity="center"
android:text="#string/header_id_text"
android:textAllCaps="false"
android:textColor="#767676"
android:textSize="16sp" />
<TextView
android:id="#+id/header_brief"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="4dp"
android:layout_marginLeft="5dp"
android:layout_marginTop="4dp"
android:gravity="left"
android:text="Good still exists in the world. Inspiring you in 140 characters or less."
android:textAllCaps="false"
android:textColor="#565656"
android:textSize="18sp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="25dp"
android:layout_marginLeft="5dp"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="left|center_vertical"
android:orientation="horizontal">
<TextView
android:id="#+id/header_following"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left|top"
android:text="12K"
android:textAllCaps="false"
android:textColor="#000000"
android:textSize="17sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:gravity="left|top"
android:text="FOLLOWING"
android:textAllCaps="false"
android:textColor="#898989"
android:textSize="17sp" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="left|center_vertical"
android:orientation="horizontal">
<TextView
android:id="#+id/header_follower"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left|top"
android:text="23.5K"
android:textAllCaps="false"
android:textColor="#000000"
android:textSize="17sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:gravity="left|top"
android:text="FOLLOWER"
android:textAllCaps="false"
android:textColor="#898989"
android:textSize="17sp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
<ImageView
android:id="#+id/header_avatar"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:background="#drawable/iv_bg_round_corner"
android:scaleType="centerCrop"
android:src="#drawable/header_avatar" />
</RelativeLayout>
To answer your question, first you need to know how the nest scroll works.
The nest scroll behavior implemented by AppBarLayout is mainly based the NestScrolling system. The system only start nest scroll event dispatching when the touch event start from the NestScrollingChild which is the RecyclerView inside the ViewPager.
Therefore, if you want to start nest scroll from the AppbarLayout, there is no easy way to just modify the xml to achieve it.