How to use NestedScrollView, SwipeRefreshLayout and WebView together? - android

Using all the latest libraries. I have a simple WebView inside a CoordinatorLayout fragment. Trying to hide the toolbar when user scrolls sdown.
<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/clRootHome"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.bytefury.deliverzz.fragment.HomeFragment">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways"
android:theme="#style/AppTheme.AppBarOverlay">
<include layout="#layout/toolbar" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/srlHome"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<im.delight.android.webview.AdvancedWebView
android:id="#+id/frag_wv_wv"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbarStyle="insideOverlay" />
</android.support.v4.widget.NestedScrollView>
</android.support.v4.widget.SwipeRefreshLayout>
</android.support.design.widget.CoordinatorLayout>
However, this doesn't do anything at all. Swipe to refresh works fine.
Out of desperation, when I switch the NestedScrollView and SwipeRefreshLayout, I get a blank, white screen.

if you want your toolbar to be scrollable, refactor your layout into this
<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/clRootHome"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.bytefury.deliverzz.fragment.HomeFragment">
<include layout="#layout/toolbar" />
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/srlHome"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<im.delight.android.webview.AdvancedWebView
android:id="#+id/frag_wv_wv"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbarStyle="insideOverlay" />
</android.support.v4.widget.SwipeRefreshLayout>
Now add this to your toolbar layout.
app:layout_scrollFlags="scroll|enterAlways"

Related

My listview is above the appbar

I have a whatsapp like appbar menu option, but the list view is above this frame layout. and I have added scroll behavior also. It was working perfectly fine until I made changes and now i dont know how to fix it.
<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"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.example.feelingoodlivinbeta.socialdreams_a1.HostMainMenuActivity">
<include layout="#layout/toolbar" />
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="?attr/actionBarSize">
<io.codetail.widget.RevealFrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<include layout="#layout/settings_menu_host_layout" />
</io.codetail.widget.RevealFrameLayout>
</FrameLayout>
<include layout="#layout/content_host_main_menu" />
</android.support.design.widget.CoordinatorLayout>
Try to add app:layout_behavior="#string/appbar_scrolling_view_behavior" in your "content_host_main_menu.xml" parent layout

Fragment layout in navigation drawer Android application

I'm new to Android application and have just started learning. I'm writing an application using Navigation drawer and fragments
It was working fine with layout but with Fragment the content is hidden inside navigation top bar
Expected Display is like to be
But, this is how the layout is
NEXT DATE is hidden behind action bar
Code for layout is
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/drawer_layout"
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:openDrawer="start"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.thecoders.periodtracker.MainActivity">
<android.support.design.widget.CoordinatorLayout
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:theme="#style/AppTheme.AppBarOverlay">
<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/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header_main"
app:menu="#menu/activity_main_drawer" />
</android.support.v4.widget.DrawerLayout>
Add this in your FrameLayout.
app:layout_behavior="#string/appbar_scrolling_view_behavior"
and this too.
xmlns:app="http://schemas.android.com/apk/res-auto"
Add topMargin in your Framelayout:
android:layout_marginTop="56dp"
Put a relative layout inside the coordinator layout and add rule to your frame layout that it should be below appBarLayout something like below :
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<RelativeLayout android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<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/AppTheme.PopupOverlay"/>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/app_bar_layout"/>
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>
You probably should wrap your framLayout inside a NestedSCrollView (not necessary though).
The trick is this line :
app:layout_behavior="#string/appbar_scrolling_view_behavior"
The CoordinatorLayout's children will behave differently if you give them a
Behavior.
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill_vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!-- Rest of the code there -->
</FrameLayout>
</android.support.v4.widget.NestedScrollView>

How can I display viewpager below a layout?

I generated a swipe activity. The activity needs to have it's own layout with a view pager underneath
<?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/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.example.mferreira.crm.recordSwipeActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="#dimen/appbar_padding_top"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay"
>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_item_view" />
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
/>
</android.support.design.widget.CoordinatorLayout>
My only issue is at runtime the fragments are displayed inline with the layout itself at the top of the page rather than underneath it
It seems like your issue is because the top-level CoordinatorLayout behaves like a FrameLayout, not a LinearLayout. If you want your #layout/content_item_view and your ViewPager not to be inline with each other, wrap them in a LinearLayout:
<LinearLayout android:layout_width="match_parent" android:layout_height="match_parent"
android:orientation="vertical" app:layout_behavior="#string/appbar_scrolling_view_behavior">
<include layout="#layout/content_item_view" />
<android.support.v4.view.ViewPager android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>

How can I provide auto-hide/show toolbar, when scroll my recyclerview with coordinator layout?

This is my layout file
<android.support.v4.widget.DrawerLayout 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/drawerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.moskart.mosfake.activity.MainActivity">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
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:minHeight="?attr/actionBarSize"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
local:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
local:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin"
/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
>
<FrameLayout
android:id="#+id/fragment_placeholder"
android:layout_width="match_parent"
android:layout_height="match_parent">
</FrameLayout>
<View
android:layout_width="match_parent"
android:layout_height="5dp"
android:background="#drawable/toolbar_dropshadow" />
</FrameLayout>
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
android:id="#+id/navigation"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="#layout/navigation_drawer_header"
app:itemIconTint="#color/navItemIconTintColor"
app:itemTextColor="#color/navItemTextColor"
app:menu="#menu/menu_navigation_drawer" />
</android.support.v4.widget.DrawerLayout>
I set app:layout_scrollFlags for my CollapsingToolbarLayout to scroll|enterAlways and expected that toolbar will work like in gapps (e.g. Google Play or Google Magazine) with auto-hide/show like on this sample:
Google Magazine
But I only got scrolling toolbar that does not retract automatically, but only if user completely scrolled it himself. See sample: my app
Here is my fragment with recyclerview, which I replace with fragment_placeholder
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.moskart.mosfake.fragment.CategorySelectionFragment"
>
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="#dimen/card_horizontal_margin"
android:paddingRight="#dimen/card_horizontal_margin"
/>
</LinearLayout>
Thanks for advice!
You should measure if the bottom and top offset of the AppBarLayout is offset for more than the half the the height of the AppBarLayout and user has released the scroll. When this condition is fulfilled just start animating the translationY of the Toolbar or the offsetting of the AppBarLayout.
This could be achieved with custom CoordinatorLayout.Behavor or with inheriting existing AppBarLayout.Behaviour and tweaking it to do so.
i think you want to do like this
take a look of this library
https://github.com/ksoichiro/Android-ObservableScrollView
here is the example about how to implement it
https://snow.dog/blog/material-design-flexible-space-header-with-image/
You need to use NestedScrollView
<android.support.v4.widget.NestedScrollView ...>
<LinearLayout ...>
//Your Code Here
</LinearLayout>
Check this Example

Hiding toolbar in CoordinatorLayout after scrolling down

Here is my try for hiding ToolBar after Scrolling down:
<?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/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/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="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways" />
</android.support.design.widget.AppBarLayout>
<WebView
android:layout_width="match_parent"
android:id="#+id/webview"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_height="match_parent">
</WebView>
</android.support.design.widget.CoordinatorLayout>
I need to when WebView scrolling down, The ToolBar hided.
How we can do that?
As always, my style is:
Theme.AppCompat.Light.NoActionBar
Put WebView in NestedScrollView:
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<WebView
android:id="#+id/web_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</android.support.v4.widget.NestedScrollView>
But, after thet, I have hardly scrolling on the horizontal axis. Please, post the comment if you find proper solution.

Categories

Resources