I want to develop collapsingToolbar with TabLayout. So I was tried with ViewPager with NesteScroolView and CollpasingToolbar, TabLayout Not showing the fragments.
If I remove the "NestedScrollView", then it is working, but if you scroll the fragment page, toolbar collapsing not working. Only CollapsingToolbar components (ImageView and TabLayout) only expanding and collapsing not ViewPager Items.
any Idea please help me.
<?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:orientation="vertical"
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:id="#+id/appbar"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/collapsing_toolbar"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ViewFlipper
android:id="#+id/view_flipper"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"
>
</ViewFlipper>
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:id="#+id/toolbar"
android:layout_gravity="top"
android:background="#color/colorPrimaryDark"
app:layout_collapseMode="pin">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Temples"
/>
</RelativeLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways">
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
android:visibility="visible"
app:tabMode="scrollable"
app:tabGravity="center"
app:layout_scrollFlags="enterAlways"
app:tabTextColor="#ffff11" />
/>
</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="#fefefe"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/viewPager"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
</android.support.v4.view.ViewPager>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
I want like, scroll the items in the viewpager then should expand and collapse the "CollapsingToolbarLayout"
You can solve this by below code
NestedScrollView scrollView = (NestedScrollView) findViewById (R.id.nest_scrollview);
scrollView.setFillViewport (true);
Related
I have an activity that uses the following layout:
<android.support.v4.widget.DrawerLayout
android:id="#+id/root_main_activity"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:openDrawer="start"
xmlns:tools="http://schemas.android.com/tools">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbarlayout_main_activity"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_main_activity"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"/>
<android.support.design.widget.TabLayout
android:id="#+id/tablayout_main_activity"
app:tabIndicatorHeight="3dp"
app:tabIndicatorColor="#android:color/white"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<android.support.v4.view.ViewPager
android:id="#+id/viewpager_main_activity"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorWindowBackground"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.AppBarLayout>
<android.support.design.widget.NavigationView
android:id="#+id/navigationview"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#color/colorWindowBackground"
android:fitsSystemWindows="true"
android:layout_gravity="start">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<include layout="#layout/drawer_header" />
<ExpandableListView
android:id="#+id/expandablelistview_drawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:groupIndicator="#null"
android:divider="#null"
android:dividerHeight="0dp"/>
</LinearLayout>
</ScrollView>
</android.support.design.widget.NavigationView>
I have tried all that I could think of, such as; putting the navigationView inside the appbarlayout in different places, putting it before the appbarlayout and after it and lastly trying to set the scrimcolor dynamically in the oncreate method of the activity. None of these things worked, does someone know the solution to my problem?
After a lot of trying I made it working. The reason why is not clear to me but here is the working layout for the people who have the same problem:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
android:id="#+id/root_main_activity"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:openDrawer="start"
xmlns:tools="http://schemas.android.com/tools">
<LinearLayout
android:id="#+id/linearlayout_main_activity"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbarlayout_main_activity"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_main_activity"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"/>
<android.support.design.widget.TabLayout
android:id="#+id/tablayout_main_activity"
app:tabIndicatorHeight="3dp"
app:tabIndicatorColor="#android:color/white"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager_main_activity"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorWindowBackground"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</LinearLayout>
<android.support.design.widget.NavigationView
android:id="#+id/navigationview"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#color/colorWindowBackground"
android:fitsSystemWindows="true"
android:layout_gravity="start">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<include layout="#layout/drawer_header" />
<ExpandableListView
android:id="#+id/expandablelistview_drawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:groupIndicator="#null"
android:divider="#null"
android:dividerHeight="0dp"/>
</LinearLayout>
</ScrollView>
</android.support.design.widget.NavigationView>
**Main 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/content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/White">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="#color/white"
app:titleEnabled="false"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<TextView
android:id="#+id/collapsing_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:adjustViewBounds="true"
android:text="Journal Name, Volume No, Issue"
android:textSize="40sp"
android:textStyle="bold"
android:textColor="#color/black"
android:padding="30dp"
android:layout_marginTop="?attr/actionBarSize"
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/primary"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/article_listing_content"/>
</android.support.design.widget.CoordinatorLayout>
**Layout**:article_listing_content
<?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"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<RelativeLayout
android:id="#+id/rv_container"
android:visibility="visible"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
android:longClickable="true"
android:elevation="50dp"
android:scrollbars="vertical"/>
</RelativeLayout>
<RelativeLayout
android:id="#+id/error_msg_container"
android:visibility="gone"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/error_msg"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
</RelativeLayout>
I want to disable the collapsing of the title field (collapsing_title - TextView inside CollapsingToolbarLayout) if there is not enough data in the recycler view. ie Collapsing should only happen if there is more data / scrolling is required, else collapsing should be disabled.
You can "disable" this collapsing behavior by modifying your CollapsingToolbarLayout's app:layout_scrollFlags attribute.
As a layout_ attribute, this is part of the parent's LayoutParams (i.e. AppBarLayout.LayoutParams). As expected, this class exposes the method setScrollFlags().
To disable collapsing:
CollapsingToolbarLayout collapsing =
(CollapsingToolbarLayout) findViewById(R.id.toolbar_layout);
AppBarLayout.LayoutParams params =
(AppBarLayout.LayoutParams) collapsing.getLayoutParams();
params.setScrollFlags(0);
collapsing.setLayoutParams(params);
To re-enable collapsing, simply replace the setScrollFlags() call with one that passes in your original flags:
params.setScrollFlags(AppBarLayout.LayoutParams.SCROLL_FLAG_SCROLL | AppBarLayout.LayoutParams.SCROLL_FLAG_EXIT_UNTIL_COLLAPSED);
Recycle view is not scrolling inside Scroll View. I have Used Nested Scroll View instead but it doesn't work either. here is My xml code
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/coordinatorlayout"
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">
<include layout="#layout/content_main" />
<android.support.design.widget.AppBarLayout
android:id="#+id/appbarlayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay"
app:behavior_scrolling_appbar_peek_height="#dimen/bottom_sheet_peek_height"
app:layout_behavior="com.example.deepdepindersingh.adore.ui.lib.ScrollingAppBarLayoutBehavior">
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
app:behavior_peekHeight="#dimen/bottom_sheet_peek_height"
android:paddingTop="8dp"
android:paddingStart="16dp"
android:paddingEnd="16dp"
android:paddingBottom="8dp"
android:id="#+id/bottom_sheet"
app:layout_behavior="com.example.deepdepindersingh.adore.ui.lib.BottomSheetBehaviorGoogleMapsLike"
app:anchorPoint="#dimen/anchor_point"
android:fitsSystemWindows="true">
<ScrollView
android:fillViewport="true"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:nestedScrollingEnabled="true"
android:layout_below="#+id/llOptions">
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="16dp"
android:layout_marginTop="16dp"
android:background="#fff">
</android.support.v7.widget.RecyclerView>
</ScrollView>
</LinearLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
app:layout_anchor="#id/bottom_sheet"
app:layout_anchorGravity="top|right|end"
android:src="#android:drawable/ic_dialog_map"
android:layout_margin="#dimen/fab_margin"
app:layout_behavior="com.example.deepdepindersingh.adore.ui.lib.ScrollAwareFABBehavior"
android:clickable="true"/>
</android.support.design.widget.CoordinatorLayout>
and i am using Grid Adapter to display array list
grid-Single.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp">
<ImageView
android:id="#+id/grid_image"
android:layout_width="50dp"
android:layout_height="50dp">
</ImageView>
<TextView
android:id="#+id/grid_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:textSize="9sp" />
</LinearLayout>
Please Help in solving my problem.
When I put the AppBarLayout and a relativeLayout between LinearLayout ,it doesn't collapse when scrolling
I need the relativeLayout replace it from another activity and if i don't put them between linearLayout, when i replace the relativeLayout with the new layout , the new one will appear on the appBar not under it
<android.support.v4.widget.DrawerLayout 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/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<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|enterAlways">
<ImageView
android:layout_width="match_parent"
android:layout_height="192dp"
android:scaleType="centerCrop"
android:src="#drawable/rsz_bg_cover"
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.AppBarLayout>
<RelativeLayout
android:id="#+id/rl_replace"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerHorizontal="true" />
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
android:id="#+id/main_drawer"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:menu="#menu/menu_drawer" />
I have an Activity with next layout
Activity layout
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout
android:id="#+id/issue_browse_app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/app_default_color"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="#+id/issue_browse_toolbar"
app:layout_scrollFlags="scroll|enterAlways"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize" />
<android.support.design.widget.TabLayout
android:id="#+id/issue_browse_tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/issue_browse_view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
ViewPager after instantiating has 2 fragments
First visible fragment's layout
<?xml version="1.0" encoding="utf-8"?>
<ViewSwitcher xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/issue_browse_view_switcher"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white">
<FrameLayout
android:id="#+id/issue_browse_status_buttons_container"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="#dimen/issue_status_browse_buttons"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:id="#+id/issue_browse_fragment_view_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="start" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_marginTop="1000dp"
android:text="end" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</FrameLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:orientation="vertical">
<TextView
android:id="#+id/issue_browse_load_error_text"
style="#style/list_view_empty_view_style"
android:drawableTop="#drawable/error" />
<TextView
android:id="#+id/issue_browse_refresh_after_error"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="#dimen/content_offset_small"
android:textColor="#c0bebe" />
</LinearLayout>
</ViewSwitcher>
How you can see, there is NestedScrollView with app:layout_behavior="#string/appbar_scrolling_view_behavior"
And regardless of the fact, has NestedScrollView this tag or not, Coordinator doesn't hide Toolbar.
Where is error in this code?
You are not using "CollapsingToolbarLayout"
Doc says:
CollapsingToolbarLayout is a wrapper for Toolbar which implements a
collapsing app bar. It is designed to be used as a direct child of a
AppBarLayout.
For your understanding refer below example
<android.support.design.widget.CoordinatorLayout
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/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v4.view.ViewPager
android:id="#+id/issue_browse_view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
style="#style/ToolBarStyle"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>