This question already has answers here:
Hiding/Showing the toolbar when fragment in the tabs is scrolled
(8 answers)
Closed 1 year ago.
I need to hide toolBar(Header) and keep tapLayout in the top when scroll viewPager
viewPager will contain fragment contain a RecyclerView
tell me if there is another way to code it
if there is a way to fix this code this is the best for me
My layout design
Here is my XML code
<?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:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentScrim="#color/white"
app:layout_collapseMode="parallax"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<include
android:id="#+id/homeHeader"
layout="#layout/user_profile_header" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<LinearLayout
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<!--Tab-->
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="fill"
app:tabMode="fixed" />
<!--ViewPager-->
<androidx.viewpager.widget.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
getSupportActionBar().hide();
Place this part of code in your oncreate
Related
I want to make several fragments in the main activity each having a RecyclerView such that I can swipe between them. Also in this activity, I have a collapsing toolbar on top of all these things.
I tried using the RecyclerView Directly inside the ViewPager but unfortunately the Toolbar didn't Collapse (I think it needs a NestedScrollView)
I added NestedScrollView outside the ViewPager which gave me an Exception on adding new items to any of the RecyclerViews java.lang.IndexOutOfBoundsException which I found to be a bug caused by calling runOnUiThread() but if I loaded data using UI thread it would be too slow
I tried using NestedScrollViews inside each fragment (wrapping the RecyclerViews) but it gave the same exception
Is there any way to collapse the toolbar without NestedScrollView?
Have a look with this layout:
<?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"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#color/colorPrimary">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:elevation="0dp">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<LinearLayout
android:id="#+id/lnr_expandView"
android:layout_width="match_parent"
android:layout_height="130dp"
android:minHeight="130dp"
android:orientation="horizontal"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7">
</LinearLayout>
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
app:collapseIcon="#drawable/ic_back"
app:contentInsetStart="30dp"
app:layout_collapseMode="pin"
app:popupTheme="#style/AppTheme.PopupOverlay">
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/googlesans_medium"
android:padding="#dimen/pad_15"
android:text="#string/app_name"
android:textColor="#color/text_color"
android:textSize="20sp"
android:visibility="gone" />
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<androidx.viewpager.widget.ViewPager
android:id="#id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" />
</FrameLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Your 2nd parent child layout must contains this attribute for collapse effect;
app:layout_behavior="#string/appbar_scrolling_view_behavior"
I'm trying to use both Toolbar and TabLayout with CollapsingToolbarLayout but I'm getting a very strange behavior with the tab layout. The idea is to have the TabLayout with a transparent background when the Toolbar is expanded, and when collapsed, to be under the Toolbar like any other Activity with both Toolbar and TabLayout.
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar_layout"
android:theme="#style/Theme.MaterialComponents.Light.NoActionBar"
android:layout_width="match_parent"
android:layout_height="250dp">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="#color/primary"
app:expandedTitleTextAppearance="#style/CollapsingToolbarExpandedTitleTheme">
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="#null"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"/>
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="#dimen/toolbar_height"
app:titleTextAppearance="#style/ToolbarTitleTheme"
app:layout_collapseMode="pin"/>
<com.google.android.material.tabs.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="#dimen/toolbar_height"
android:layout_gravity="bottom">
<com.google.android.material.tabs.TabItem
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<com.google.android.material.tabs.TabItem
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</com.google.android.material.tabs.TabLayout>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<androidx.viewpager.widget.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
UPDATE: Following the example mentioned by # ismail alaoui (https://android.jlelse.eu/parallax-scrolling-header-tabs-android-tutorial-2cc6e40aa257), the layout better, but the TabLayout is still WHITE. There's no Style associated with it.
UPDATE: Adding android:background="transparent" to the TabLayout, as #ismail suggested, solves this issue. I also added an style to the TabLayout (Widget.MaterialComponents.TabLayout.Colored) just to improve the layout.
i suggest you to follow this tutorial , it explain how to do what you are exactly looking for , it's not using androidx component , but you can use it the same way , enjoy !
edit :
add this to appBarLayout and TabLayout attribute :
android:background="#android:color/transparent"
Im trying to create an AppBarLayout using the CollapsingToolBar which contains a Toolbar and a TabLayout and im also using the app:behavior_overlapTop attribute on my RelativeLayout which includes a ViewPager. The problem is that when the CollapsingToolBar is expanded my TabLayout disappears behind the ViewPager as the TabLayout is given a layout_gravity = bottom and due to the fact that i have used app:behavior_overlapTop on my RelativeLayout which includes the ViewPager. How can i fix this ? Thanx in advance.
( This is my first question here, sorry if have missed anything, i would have included images for better understanding of the problem but i dont have enough repo )
Here is my XML file
`
<?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"
tools:context=".MainActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="250dp"
android:theme="#style/AppTheme"
>
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:titleEnabled="false"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="#drawable/beats"
app:layout_collapseMode="parallax"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="100dp"
android:minHeight="?attr/actionBarSize"
android:layout_gravity="top"
app:popupTheme="#style/AppTheme"
app:layout_collapseMode="pin"
app:titleMarginBottom="60dp"
/>
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:tabIndicatorColor="#FFFFFF"
android:layout_gravity="bottom"
app:tabMode="fixed"
app:tabGravity="center"
app:layout_collapseMode="pin"
/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
app:behavior_overlapTop="64dp"
>
<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:layout_marginLeft="10dp"
android:layout_marginStart="10dp"
android:layout_marginRight="10dp"
android:layout_marginEnd="10dp"
/>
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>
`
In my application I want show BottomNavigation bottom of CoordinatorLayout and for this I write 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:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
>
<android.support.design.widget.AppBarLayout
android:id="#+id/main.appbar"
android:layout_width="match_parent"
android:layout_height="150dp"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<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="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<include
android:id="#+id/mainToolbar"
layout="#layout/toolbar_main" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<com.aurelhubert.ahbottomnavigation.AHBottomNavigationViewPager
android:id="#+id/mainViewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/mainBottomNavigation"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<com.aurelhubert.ahbottomnavigation.AHBottomNavigation
android:id="#+id/mainBottomNavigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
app:layout_anchorGravity="bottom"
app:selectedBackgroundVisible="true" />
</android.support.design.widget.CoordinatorLayout>
But when run application show me BottomNavigation top of CoordinatorLayout!
How can I show BottomNavigation bottom of CoordinatorLayout ?
I hope the answer is not too late. I just had the same problem, I used android:layout_gravity="bottom".
I have a Toolbar, a BottomNavigationView, and in the middle, I have a FrameLayout that is used as a placeholder for a fragment. Here is my XML 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="match_parent"
android:background="#drawable/bg_main"
android:minHeight="?attr/actionBarSize">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorTab"
app:layout_scrollFlags="scroll|enterAlways"
/>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/fragment_placeholder"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
>
<android.support.v4.view.ViewPager
android:id="#+id/slide_viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</FrameLayout>
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:itemBackground="#color/colorTab"
app:itemIconTint="#drawable/bottom_navigation_toolbar"
app:itemTextColor="#drawable/bottom_navigation_toolbar"
app:menu="#menu/bottom_bar"
/>
</android.support.design.widget.CoordinatorLayout>
Also check out this question, it uses almost the same layout, and it also shows how to change the behavior of the BottomNavigationView so that it hides when you scroll. If you wish to implement that feature make sure to create the class BottomNavigationBehavior (or whatever you want to call it) and add this line to your BottomNavigationView in XML:
app:layout_behavior="com.yourpackage.yourpackage.BottomNavigationBehavior"
Hope it helps!
This helps me resolve the issue of bottom of view going behind bottom navigation bar.
I have resolved it by:
adding app:layout_behavior="com.google.android.material.behavior.HideBottomViewOnScrollBehavior"
to the BottomNavigationView.
Changing the parent layout of ActivityMain to CoordinatorLayout &
Adding android:layout_gravity="bottom" to BottomNavigationView.
I am using a ViewPager which loads different pages. These shall be made of CollapsingToolbarLayout.
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.ViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</FrameLayout>
Once inflated, the layout shall work like this:
It shall allow swiping through pages and every page has a picture in its toolbar which can collapse individually. Is this possible?
<?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:tools="http://schemas.android.com/tools"
android:id="#+id/root_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:background="#color/background"
android:transitionName="#string/transition_session_background">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#null"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll"
android:minHeight="1px"
android:fitsSystemWindows="true"
android:background="#null"
app:titleEnabled="false">
<ImageView
android:id="#+id/photo"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:transitionName="#string/transition_session_image" />
</android.support.design.widget.CollapsingToolbarLayout>
<include layout="#layout/toolbar" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="#+id/scroll_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:clipToPadding="false">
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
It shall allow swiping through pages and every page has a picture in
its toolbar which can collaps individually. Is this possible?
No, unfortunately toolbar having its own state for each page of viewpager is not possible. The reason is simple to understand, since the viewpager is a view of equal hierarchy as the viewpager the viewpager and toolbar work independently.
Although, you can have an app where each time a page is changed in viewpager, the toolbar either remains collapsed or expanded.
To achieve this set up viewpager's on page change listener
// Attach the page change listener inside the activity
vpPager.addOnPageChangeListener(new OnPageChangeListener() {
// This method will be invoked when a new page becomes selected.
#Override
public void onPageSelected(int position) {
appBarLayout.setExpanded(true);//or false as you wish
}
});
Using Support Library v23, you can call appBarLayout.setExpanded(true/false) in your onPageSelected() overridden method.
you can use Collapsing toolbar with viewpagerand a Tablayout:
<?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: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">
//your image view under toolbar
<ImageView
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/test"
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="100dp"
android:gravity="top"
android:minHeight="?attr/actionBarSize"
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/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
here is a good implementation Example:
http://manishkpr.webheavens.com/android-material-design-tabs-collapsible-example/