I‘m trying to create an app containing a collapsing toolbar. Below is the layout of my XML file. The intention was to make it collapsing but with my code everything is just fixed to its current position and not scrollable at all. Hope anyone has any suggestions.
As information: I’m using android studio and the system runs at API 26
<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"
xmlns:tools="http://schemas.android.com/tools"
tools:context="com.example.te.e5.MainActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_height="300dp"
android:layout_width="match_parent">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/coltoolbar"
android:layout_height="match_parent"
android:layout_width="match_parent"
app:layout_scrollFlags="exitUntilCollapsed|scroll"
app:contentScrim="?attr/colorPrimary"
app:title="App Title"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginEnd="64dp"
android:background="#drawable/materialbackground">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbarid"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
Change the flags sequence in CollapsingToolbarLayout like this
app:layout_scrollFlags="scroll|exitUntilCollapsed"
if you want the collapsing toolbar to scroll when user scrolls content then the first flag should be "scroll" always then "exitUntilCollapsed".
Solution:
<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:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.birjuvachhani.myapplication.ScrollingActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="#dimen/app_bar_height"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:toolbarId="#+id/toolbar">
<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/AppTheme.PopupOverlay" />
</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="#string/appbar_scrolling_view_behavior" >
<!-- Main content goes here. -->
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
Related
I am using CollapsingToolbarLayout in CoordinatorLayout with NestedScrollView and SwipeRefreshLayout and when I scroll down nothing happens to the toolbar at all, I use design:25.3.0'.
I would like to know what I have to do or how to handle this problem in order get the best approach.
This is my layout XML:
<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:id="#+id/toolbar_container"
android:layout_width="match_parent"
android:layout_height="300dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true" >
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/app_name"
android:src="#drawable/logo"
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="?actionBarSize"
android:layout_gravity="bottom"
android:layout_marginLeft="#dimen/list_toolbar_side_margin"
android:layout_marginRight="#dimen/list_toolbar_side_margin"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
</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="#string/appbar_scrolling_view_behavior" >
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/swipe_refresh_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
android:paddingLeft="#dimen/list_side_margin"
android:paddingRight="#dimen/list_side_margin"
android:scrollbarStyle="outsideOverlay" />
</android.support.v4.widget.SwipeRefreshLayout>
</android.support.v4.widget.NestedScrollView>
Try this
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="#dimen/app_bar_height"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:toolbarId="#+id/toolbar">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="parallax"
app:popupTheme="#style/AppTheme.PopupOverlay"/>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.swiperefreshlayout.widget.SwipeRefreshLayout
android:layout_width="match_parent"
app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior"
android:layout_height="match_parent">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/list"
android:name="store.tashalee7.myapplication.ItemFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="16dp"
app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior"
android:layout_marginRight="16dp"
app:layoutManager="LinearLayoutManager"
tools:listitem="#layout/fragment_item"/>
</androidx.swiperefreshlayout.widget.SwipeRefreshLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
you will need to include
implementation 'com.google.android.material:material:1.0.0'
in your gradle
and more from the support library to androidx by using the android studio tool under Refactor migrate to AndroidX
Use this
<androidx.swiperefreshlayout.widget.SwipeRefreshLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
</androidx.swiperefreshlayout.widget.SwipeRefreshLayout>
you will need to include
implementation 'com.google.android.material:material:1.0.0'
I'm trying to use floatingsearchview in my app. My app has RTL layout and when I use floatingsearchview it doesn't match with RTL layout. How can I fix it?
Here is my xml code:
<RelativeLayout 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/parent_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".MainActivity">
<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">
<com.arlib.floatingsearchview.FloatingSearchView
android:id="#+id/floating_search_view"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layoutDirection="rtl"
app:floatingSearch_close_search_on_keyboard_dismiss="false"
app:floatingSearch_dimBackground="false"
app:floatingSearch_dismissOnOutsideTouch="true"
app:floatingSearch_leftActionMode="showHamburger"
app:floatingSearch_menu="#menu/menu_search_view"
app:floatingSearch_searchBarMarginLeft="#dimen/search_view_inset"
app:floatingSearch_searchBarMarginRight="#dimen/search_view_inset"
app:floatingSearch_searchBarMarginTop="#dimen/search_view_inset"
app:floatingSearch_searchHint="#string/search_hint"
app:floatingSearch_showSearchKey="true"
app:floatingSearch_suggestionsListAnimDuration="250" />
</android.support.design.widget.AppBarLayout>
I have a Collapsing Toolbar Layout which i want to dissappear when the user scrolls in the viewpager underneath, but it the toolbar only scrolls up when the user scrolls inside the toolbar.
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"
android:id="#+id/main_content"
android:fitsSystemWindows="true"
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">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|enterAlways">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/header_image"
android:layout_width="match_parent"
android:layout_height="150dp"
android:scaleType="centerCrop"
android:src="#drawable/default_header_img" />
</RelativeLayout>
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
inside the view pager i use 2 recycle views:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.RecyclerView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:id="#+id/my_posts"
android:layout_height="match_parent"
android:nestedScrollingEnabled="true"
android:orientation="vertical"/>
Replace your code with:
<?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:id="#+id/main_content"
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:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapse_toolbar"
android:layout_width="match_parent"
app:titleEnabled="false"
android:layout_height="250dp"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/header_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/default_header_img"
android:fitsSystemWindows="true"
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"
android:gravity="top"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:titleMarginTop="15dp" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
app:tabIndicatorColor="#color/colorAccent" />
</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="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
Add app:layout_collapseMode="parallax" to the imageView inside CollapsingToolbarLayout
Also move the TabLayout inside CollapsingToolbarLayout
I am currently using CollapsingToolbar Layout in the upper portion of my layout. I want to collpase a particular portion (LinearLayout only) and keep the toolbar fixed on the top. I was able to fix the Toolbar position on top in another project and keep it from collapsing. However, for some reason, I am not able to fix the position of my toolbar. Any help will be appreciated. Here is my the XML of the layout:
<?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="wrap_content"
android:id="#+id/profile_coordinate_layout"
>
<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:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|enterAlways"
android:layout_gravity="fill_vertical"
android:fitsSystemWindows="true"
app:layout_collapseMode="pin"
app:expandedTitleMarginStart="?actionBarSize"
app:contentScrim="?colorPrimary"
>
<!--|||||||||||||||||||||||||||||||||||||||||||||||||-->
<!--|||||||||||||||Collection Profile and about||||||-->
<!--|||||||||||||||||||||||||||||||||||||||||||||||||-->
<LinearLayout
android:id="#+id/ll_header"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="?actionBarSize"
android:orientation="vertical"
app:layout_collapseMode="pin"
android:background="#drawable/gradient_feed_bg"
>
<include
layout="#layout/item_collection_profile" />
</LinearLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:background="#drawable/dark_primary_no_radius"
app:layout_collapseMode="pin"
android:elevation="#dimen/margin_4dp"
>
<include layout="#layout/action_bar_collection_profile"/>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</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"
></android.support.v4.view.ViewPager>
</android.support.design.widget.CoordinatorLayout>
I am loading another fragment on the ViewPager. and I am using the following code to load the toolbar.
findViewById(R.id.toolbar). setBackgroundResource(R.drawable.dark_primary_no_radius);
setSupportActionBar((android.support.v7.widget.Toolbar)findViewById(R.id.toolbar));
And here is UPDATED the result:
As you can see, in the second image, toolbar collapsed on the top. Any help will be highly appreciated.
Thank you.
You need to use the app:layout_collapseMode="pin" in Toolbar only.
Remove this from other components like the LinearLayout and CollapsingToolbarLayout.
<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:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:layout_gravity="fill_vertical"
android:fitsSystemWindows="true"
app:expandedTitleMarginStart="?actionBarSize"
app:contentScrim="?colorPrimary"
>
<!--|||||||||||||||||||||||||||||||||||||||||||||||||-->
<!--|||||||||||||||Collection Profile and about||||||-->
<!--|||||||||||||||||||||||||||||||||||||||||||||||||-->
<LinearLayout
android:id="#+id/ll_header"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="?actionBarSize"
android:orientation="vertical"
app:layout_collapseMode="parallax"
android:background="#drawable/gradient_feed_bg"
>
<include
layout="#layout/item_collection_profile" />
</LinearLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:background="#drawable/dark_primary_no_radius"
app:layout_collapseMode="pin"
android:elevation="#dimen/margin_4dp"
>
<include layout="#layout/action_bar_collection_profile"/>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
newbie here. I'm currently developing an app for our project at school and we wanted to show the logo on our extended app bar and will fade out and collapse upon scroll, so is there a way on how to do it?
Sample mockup I did to show what I meant about:
canteen_home.gif
Coordinator behaviors are your friends :)
https://github.com/saulmm/CoordinatorBehaviorExample
https://medium.com/google-developers/intercepting-everything-with-coordinatorlayout-behaviors-8c6adc140c26#.5u1pplej6
Refer this.It explains exactly how to achieve what you want.
I finally got an answer to this, it was from Chris Banes' Cheesequare git highlighted by Paul:https://gist.github.com/iPaulPro/1468510f046cb10c51ea
And an edited version of mine:
<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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".Home">
<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.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/background"
android:layout_width="match_parent"
android:layout_height="256dp"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"
android:src="#drawable/hotdog"/>
<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.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
android:background="?attr/colorPrimary"
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"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>