I have AppBarLayout with toolbar and 2 buttons. It hides when I scroll RecyclerView up and shows when I scroll down.
The problem is that RecyclerView is set to be below AppBarLayout and preserves its position when AppBarLayout hides and I have condition shown on the picture. I need my RecyclerView to scroll up to the statusbar as well, and return to original position on scroll down. So far I could not even find an example of that.
Thank you.
This is mt layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="ru.skyeng.listening.AudioFiles.AudioListActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
app:elevation="0dp">
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
>
<ImageButton
android:id="#+id/action_settings"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/gear"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:layout_gravity="end"/>
</android.support.v7.widget.Toolbar>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="#+id/button_category"
android:layout_width="158dp"
android:layout_height="36dp"
android:layout_margin="16dp"
android:background="#drawable/selector_button_category"
android:text="#string/categories"
android:textColor="#color/colorBlue2"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"/>
<Button
android:id="#+id/button_length"
android:layout_width="158dp"
android:layout_height="36dp"
android:layout_margin="16dp"
android:background="#drawable/selector_button_length"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:text="#string/length"
android:textColor="#color/colorBlue2"/>
<View
android:id="#+id/shadow"
android:layout_below="#+id/button_length"
android:layout_width="match_parent"
android:layout_height="20dp"
android:background="#drawable/shadow">
</View>
</RelativeLayout>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:layout_below="#+id/appBarLayout"
android:id="#+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="24dp">
</FrameLayout>
</RelativeLayout>
If you want an image to show on bellow the toolbar. You should try CollpsingLayoutToolbar.
Here is an example. I hope this helps
<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"
app:elevation="0dp">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:collapsedTitleGravity="left"
app:expandedTitleGravity="bottom|right"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleTextAppearance="#style/CollapsedAppBarStyle"
app:layout_scrollFlags="scroll"
app:title="#string/pod">
<ImageView
android:id="#+id/collapsing_ImageView"
android:layout_width="match_parent"
android:layout_height="256dp"
android:contentDescription="#string/app_name"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="#drawable/bg_image"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
Related
I have a collapsingToolbarLayout in my app. I put a ViewPager in top of my layout.I want to my toolbar be disappear in expended state and is pin in the collapsing state. I write this code for my layout, but when I scroll layout toolbar don't appear and rather than the part of my ViewPager appear.
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
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/appbar"
android:layout_height="192dp"
android:layout_width="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="#android:color/transparent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:layout_scrollInterpolator="#android:anim/decelerate_interpolator"
app:toolbarId="#+id/toolbar"
android:fitsSystemWindows="true">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="200dp"
>
<android.support.v4.view.ViewPager
android:id="#+id/slider"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_collapseMode="parallax"
></android.support.v4.view.ViewPager>
<me.relex.circleindicator.CircleIndicator
android:id="#+id/Indicator"
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_gravity="center"
android:layout_marginTop="10dp" />
</FrameLayout>
<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.v7.widget.Toolbar>
</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"
app:layout_behavior="android.support.design.widget.AppBarLayout$ScrollingViewBehavior">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/txtTitleCategory"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/category_title"
android:layout_alignParentEnd="true"
android:layout_marginTop="30dp"
android:layout_marginEnd="20dp"/>
<android.support.v7.widget.RecyclerView
android:id="#+id/categoryRecy"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/txtTitleCategory"
android:layout_margin="20dp"/>
<TextView
android:id="#+id/txtTopCourseCat1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="دوره های محبوب"
android:layout_below="#+id/categoryRecy"
android:layout_alignParentEnd="true"
android:layout_marginTop="30dp"
android:layout_marginEnd="20dp"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/temp"
android:layout_below="#+id/topCourseCat1Recy"/>
<android.support.v7.widget.RecyclerView
android:id="#+id/topCourseCat1Recy"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/txtTopCourseCat1">
</android.support.v7.widget.RecyclerView>
</RelativeLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
This is screenshot of my app:
This is screenshot of my expected behavior :
Just change toolbar like this
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
android:background="#color/colorPrimary"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
Thank you
I have a layout with collapsing toolbar and tabs as shown in attached image below
I want to show my tab layout on top while scrolling the list in anyone of the tabs
I have tried some links link1 and end with below result as shown in image below
I want to hide my toolbar ,profile image and textview completely while scrolling the list in any tabs
following is the layout xml code that I used
<?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="#android:color/background_light"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/main.appbar"
android:layout_width="match_parent"
android:layout_height="256dp"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/main.collapsing"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="#color/background_color"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/main.backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="#drawable/mobilebanner"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/main.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:fillViewport="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/user_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="40dp"
android:text="abc"
android:gravity="center_horizontal"
android:lineSpacingExtra="8dp"
android:textSize="20sp" />
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorColor="#color/background_color"
app:tabTextAppearance="#android:style/TextAppearance.Widget.TabWidget"
app:tabTextColor="#color/black" />
<android.support.v4.view.ViewPager
android:id="#+id/htab_viewpager"
android:layout_width="match_parent"
android:layout_height="400dp" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:layout_width="80dp"
android:layout_height="80dp"
app:layout_anchor="#id/main.appbar"
app:layout_anchorGravity="bottom|center_horizontal|center"
android:layout_margin="#dimen/activity_horizontal_margin"
android:src="#drawable/user" />
</android.support.design.widget.CoordinatorLayout>
I have a AppBarLayout with CollapsingToolbar layout and ImageView in it. TitleBar appears when I ScrollUp. But I want to stick it at top and always visible. I have already tried by changing
app:layout_collapseMode attribute.
Also tried
app:layout_scrollFlags="scroll|exitUntilCollapsed|enterAlways"
But didn't worked either. I have a code as follows:
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="#dimen/height"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true"
>
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="true"
app:expandedTitleMarginStart="25dp"
app:expandedTitleMarginEnd="60dp">
<ImageView
android:id="#+id/images"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="top"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
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="wrap_content"
android:background="#color/window_background"
app:layout_behavior="android.support.design.widget.AppBarLayout$ScrollingViewBehavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<TextView
android:layout_width="30dp"
android:layout_height="20dp"
android:id="#+id/viewDetail"
android:text="View Detail"
android:textColor="#ffffff"
android:gravity="bottom|right|end"
android:onClick="onClick"/>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
Finally I found solution to this. I also add ImageView in ScrollBarLayout. Below code worked fine for me !
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="#dimen/height"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="top"
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="wrap_content"
android:background="#color/window_background"
app:layout_behavior="android.support.design.widget.AppBarLayout$ScrollingViewBehavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="#+id/images"
android:layout_width="match_parent"
android:layout_height="200dp"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<TextView
android:layout_width="30dp"
android:layout_height="20dp"
android:id="#+id/viewDetail"
android:text="View Detail"
android:textColor="#ffffff"
android:gravity="bottom|right|end"
android:onClick="onClick"/>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
I have a CollapsingToolbarLayout in layout, below that I have placed a RecyclerView. it works perfect and the parallax effects comes smoothly when the RecyclerView scrolls, but the issue, is suppose if the RecyclerView has less items and there is nothing to scroll, still it scolls and an empty space shows at the bottom. what my requirment is it shouldn't scroll if the RecyclerView can accomodate all the views in the visible screen, is there any way to do this ?
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/container_id"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include layout="#layout/toolbar"/>
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/bg_color"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
toolbar.xml
<android.support.design.widget.AppBarLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
app:layout_scrollFlags="scroll"
app:layout_collapseMode="parallax"
android:layout_below="#+id/toolbar"
android:minHeight="250dp"
android:layout_height="300dp"
android:layout_width="match_parent"/>
<android.support.v7.widget.Toolbar
app:layout_collapseMode="pin"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:gravity="center"
android:layout_gravity="top"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ToggleButton
android:layout_centerVertical="true"
android:layout_margin="#dimen/dimen_xs"
android:layout_width="20dp"
android:layout_height="20dp"
android:gravity="center"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:textOff=""
android:textOn=""/>
</RelativeLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
I'm making an application which uses CollapsingToolbarLayout with Toolbar and TabLayout.
I want to place the TabLayout to below Toolbar when the header is collapsed.
However, When I try to scroll the view, TabLayout overlays the Toolbar like this linked picture:
I want to make it like this linked picture when I scroll:
My code for the layout is below:
<?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: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:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<include
android:id="#+id/header"
layout="#layout/partial_mypage_header"
android:layout_width="match_parent"
android:layout_height="#dimen/mypage_header_height"
app:layout_collapseMode="parallax"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/orange"
android:gravity="top"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:titleTextColor="#android:color/white">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageButton
android:id="#+id/button_back"
android:layout_width="#dimen/icon_size_medium"
android:layout_height="#dimen/icon_size_large"
android:layout_gravity="center_vertical"
android:background="#android:color/transparent"
android:scaleType="centerCrop"
android:src="#drawable/btn_back"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="#string/mypage_toolbar"
android:textColor="#android:color/white"
android:textSize="#dimen/text_size_medium"
android:textStyle="bold"/>
</LinearLayout>
</FrameLayout>
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tab"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
android:background="#android:color/white"
android:fitsSystemWindows="true"
app:tabIndicatorColor="#color/orange"
app:tabIndicatorHeight="5dp"
app:tabSelectedTextColor="#color/orange"
app:tabTextAppearance="#style/tab_text_appearance"
app:tabTextColor="#android:color/black"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
How can I solve this problem?
Try:
<?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:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<include
android:id="#+id/header"
layout="#layout/partial_mypage_header"
android:layout_width="match_parent"
app:layout_scrollFlags="scroll|enterAlways"
android:layout_height="#dimen/mypage_header_height" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/orange"
android:gravity="top"
android:minHeight="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:titleTextColor="#android:color/white">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageButton
android:id="#+id/button_back"
android:layout_width="#dimen/icon_size_medium"
android:layout_height="#dimen/icon_size_large"
android:layout_gravity="center_vertical"
android:background="#android:color/transparent"
android:scaleType="centerCrop"
android:src="#drawable/btn_back" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="#string/mypage_toolbar"
android:textColor="#android:color/white"
android:textSize="#dimen/text_size_medium"
android:textStyle="bold" />
</LinearLayout>
</FrameLayout>
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tab"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
android:background="#android:color/white"
android:fitsSystemWindows="true"
app:tabIndicatorColor="#color/orange"
app:tabIndicatorHeight="5dp"
app:tabSelectedTextColor="#color/orange"
app:tabTextAppearance="#style/tab_text_appearance"
app:tabTextColor="#android:color/black" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/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 solved this problem by using expedient. I made 2 toolbars including the original one. and I made one of those transparent. then, It looks working fine but I think it is not clear way.