Develop Reference

Webview not working correctly in nestedscrollview

I have some content in NestedScrollView and under this content i have WebView with height wrap_content. When i scroll NestedScrollView scroll on element inside WebView not work.
activity_main.xml
<androidx.constraintlayout.widget.ConstraintLayout 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=".MainActivity">
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:srcCompat="#drawable/ic_launcher_foreground" />
<ImageView
android:id="#+id/imageView5"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:srcCompat="#drawable/ic_launcher_foreground" />
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button" />
<WebView
android:id="#+id/widgets"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
</LinearLayout>
</androidx.core.widget.NestedScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>
WebView inside NestedScrollView (not work)
WebView without NestedScrollView

public class CustomView extends WebView {
public CustomView(Context context) {
super(context);
}
public CustomView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public CustomView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
#Override
public boolean onTouchEvent(MotionEvent event){
requestDisallowInterceptTouchEvent(true);
return super.onTouchEvent(event);
}
}
<com.abc.customer.android.widgets.CustomView
android:id="#+id/my_id"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
Structure looks like
<?xml version="1.0" encoding="utf-8"?>
<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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ui.main.view.MainActivity">
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:fillViewport="true"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ImageView
android:layout_width="match_parent"
android:layout_height="300dp"
app:srcCompat="#drawable/abc_vector_test" />
<ImageView
android:layout_width="match_parent"
android:layout_height="100dp"
app:srcCompat="#drawable/abc_vector_test" />
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button" />
<WebView
android:id="#+id/webview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
<ImageView
android:layout_width="match_parent"
android:layout_height="300dp"
app:srcCompat="#drawable/abc_vector_test" />
<ImageView
android:layout_width="match_parent"
android:layout_height="100dp"
app:srcCompat="#drawable/abc_vector_test" />
</LinearLayout>
</androidx.core.widget.NestedScrollView>
</RelativeLayout>
in backend
private lateinit var webView: WebView
webView = findViewById(R.id.webview)
webView.settings.setJavaScriptEnabled(true)
webView.webViewClient = object : WebViewClient() {
override fun shouldOverrideUrlLoading(view: WebView?, url: String?): Boolean {
view?.loadUrl(url)
return true
}
}
webView.loadUrl("https://www.google.co.in/")

NestedScrollView with viewPager in CoordinatorLayout

Below is the code to handle the correct behaviour of my actionBar/toolbar/tabBar and below them the nestedScrollView with a ViewPager(webView). The ViewPager is basically a normal webView.
I am seeking to copy this exact behavior:
Everything works except my ViewPager can't be scrolled vertically at the same time as the toolBar being scrolled. When the viewPager is being scrolled the toolbar is static (in order to make the toolbar scroll aswell I need to manually scroll the toolbar-area but it does not get affected by the viewPager at all). I am not able to scroll both at the same time like the example above!
My 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"
tools:context=".ui.activity.FragmentContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
app:theme="#style/M.Toolbar"
app:popupTheme="#style/M.Toolbar.PopupTheme"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"
>
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="scrollable"
android:visibility="gone"
android:background="#color/background"
app:background="#color/background"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_height="match_parent"
android:layout_width="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:background="#android:color/transparent"
android:fillViewport="true"
>
<com.m.ui.util.EdgeScrollViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent"
android:visibility="visible"
>
</com.m.ui.util.EdgeScrollViewPager>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
In order to make my viewPager(webView) scrollable I added a new class which extends webView:
public class TouchyWebView extends WebView {
public TouchyWebView(Context context) {
super(context);
}
public TouchyWebView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public TouchyWebView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
#Override
public boolean onTouchEvent(MotionEvent event){
requestDisallowInterceptTouchEvent(true);
return super.onTouchEvent(event);
}
}
My viewPager.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white">
<com.m.ui.base.TouchyWebView
android:id="#+id/web_webview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent"
android:visibility="visible" />
<LinearLayout
android:id="#+id/web_loadingview"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone"
android:layout_gravity="center">
<ProgressBar
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:indeterminate="true"
android:visibility="visible"
android:layout_gravity="center"/>
</LinearLayout>
</FrameLayout>
Regards

Recycler inside bottom tablyout not showing last row

I have a coordinate layout inside which there is custom ViewPager and bottom TabLayout. Now issue is RecyclerView of one of fragment of ViewPager not scrolling properly. Its hiding the last row.
tablayout.xml
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<CustomViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
style="#style/AppTabLayout"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_gravity="bottom"
android:layout_alignParentBottom="true"
android:background="#color/colorBottomBar"
/>
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>
CustomViewPager
public class CustomViewPager extends ViewPager {
private boolean enabled;
public CustomViewPager(Context context, AttributeSet attrs) {
super(context, attrs);
this.enabled = true;
}
#Override
public boolean onTouchEvent(MotionEvent event) {
if (enabled)
return super.onTouchEvent(event);
else
return false;
}
#Override
public boolean onInterceptTouchEvent(MotionEvent event) {
return enabled && super.onInterceptTouchEvent(event);
}
public void setPagingEnabled(boolean enabled) {
this.enabled = enabled;
}
public boolean isPagingEnabled() {
return enabled;
}
}
ViewPager Fragmet having recyclerview
<RelativeLayout
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="80dp"
android:background="#color/toolbarColor"
android:id="#+id/tool_bar"
android:theme="#style/ThemeOverlay.AppCompat.Dark">
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginLeft="30dp"
android:layout_marginStart="30dp"
android:id="#+id/reload"
android:clickable="true"
android:src="#drawable/icon_refresh"/>
</android.support.v7.widget.Toolbar>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="55dp"
android:layout_below="#+id/tool_bar"
android:orientation="horizontal"
android:id="#+id/sort_layout"
android:background="#android:color/white"
android:weightSum="1">
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/recyclerview"
android:scrollbars="vertical"
android:background="#color/colorBottomBar"
android:layout_below="#+id/sort_layout"/>
</RelativeLayout>
In above picture , you see that last row of RecyclerView is not completely visible.

Put custom pager and tab layout in relative layout and set custom pager above tab layout like this
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<CustomViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/#+id/tab_layout
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
style="#style/AppTabLayout"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_gravity="bottom"
android:layout_alignParentBottom="true"
android:background="#color/colorBottomBar"
/>
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>

In your ‍tablayout.xml use this code instead of yours:
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<CustomViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
style="#style/AppTabLayout"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_gravity="bottom"
android:layout_alignParentBottom="true"
android:background="#color/colorBottomBar"/>
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>

google map fragment inside scrollView

So I been trying to use google maps lite fragment inside a scrollView and I haven't be able to show the map. After removing the the scrollView and leaving the fragment by it self, now is when you can see the map. I am just trying to understand why is that and also if there is any way possible to have this fragment to show at the end of my scrollView.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:map="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.joe.goout.EventDetails">
<ImageView
android:src="#mipmap/park1"
android:layout_width="fill_parent"
android:layout_height="150dp"
android:scaleType="centerCrop"
android:adjustViewBounds="true"
android:id="#+id/imageView"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/imageView"
android:id="#+id/scrollView"
android:fillViewport="false">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Medium Text"
android:id="#+id/textView"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
</ScrollView>
</RelativeLayout>

First you need to create a custom ScrollView class, like the following.
public class CustomScrollView extends ScrollView {
public CustomScrollView(Context context) {
super(context);
}
public CustomScrollView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public CustomScrollView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
#Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
final int action = ev.getAction();
switch (action) {
case MotionEvent.ACTION_DOWN:
//Log.i("CustomScrollView", "onInterceptTouchEvent: DOWN super false" );
super.onTouchEvent(ev);
break;
case MotionEvent.ACTION_MOVE:
return false; // redirect MotionEvents to ourself
case MotionEvent.ACTION_CANCEL:
// Log.i("CustomScrollView", "onInterceptTouchEvent: CANCEL super false" );
super.onTouchEvent(ev);
break;
case MotionEvent.ACTION_UP:
//Log.i("CustomScrollView", "onInterceptTouchEvent: UP super false" );
return false;
default:
//Log.i("CustomScrollView", "onInterceptTouchEvent: " + action );
break;
}
return false;
}
#Override
public boolean onTouchEvent(MotionEvent ev) {
super.onTouchEvent(ev);
//Log.i("CustomScrollView", "onTouchEvent. action: " + ev.getAction() );
return true;
}
}
Then use the CustomScrollView class instead of ScrollView.
<CustomScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/scrollView">
</CustomScrollView>
And you are done! :D

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="#+id/imageView"
android:layout_width="fill_parent"
android:layout_height="150dp"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_centerInParent="true"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
android:src="#mipmap/park1" />
<Button
android:id="#+id/shareBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/textView"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:text="New Button" />
<TextView
android:id="#+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/imageView"
android:padding="15dp"
android:text="Medium Text"
android:textColor="#color/black" />
<fragment xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:map="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/map"
android:name="com.google.android.gms.maps.SupportMapFragment"
class="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="fill_parent"
android:layout_height="210dp"
android:layout_below="#id/textView"
android:layout_marginBottom="40dp"
map:cameraZoom="13"
map:liteMode="true"
map:mapType="normal"
tools:context=".EventDetails" />
</RelativeLayout>
</ScrollView>
</RelativeLayout>

I solved it by adding the content into ScrollView and then wrapping the content inside of RelativeLayout.
<ScrollView android:layout_height="wrap_content"
android:layout_width="match_parent"
android:background="#color/white"
xmlns:android="http://schemas.android.com/apk/res/android">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:src="#mipmap/park1"
android:layout_width="fill_parent"
android:layout_height="150dp"
android:scaleType="centerCrop"
android:adjustViewBounds="true"
android:id="#+id/imageView"
android:layout_alignParentTop="true"
android:layout_centerInParent="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/shareBtn"
android:layout_above="#+id/textView"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
<TextView
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:text="Medium Text"
android:textColor="#color/black"
android:padding="15dp"
android:layout_below="#id/imageView"
android:id="#+id/textView" />
<fragment
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:map="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:name="com.google.android.gms.maps.SupportMapFragment"
class="com.google.android.gms.maps.SupportMapFragment"
android:id="#+id/map"
android:layout_width="fill_parent"
android:layout_height="210dp"
android:layout_below="#id/textView"
android:layout_marginBottom="40dp"
map:cameraZoom="13"
map:mapType="normal"
map:liteMode="true"
tools:context=".EventDetails"/>
</RelativeLayout>
</ScrollView>

SwipeRefreshLayout with fixed header

I have the sequent layout:
<com.example.CustomSwipeRefreshLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/include" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerHorizontal="true"
android:gravity="center_horizontal"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/header_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" />
<ListView
android:id="#+id/lv"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>
</LinearLayout>
</com.example.CustomSwipeRefreshLayout>
with fixed header and a scrollable list. CustmoSwipeRefreshLayout is a class that extends SwipeRefreshLayout:
public class CustomSwipeRefreshLayout extends SwipeRefreshLayout {
private ListView childListView;
public CustomSwipeRefreshLayout(Context context) {
super(context);
}
public CustomSwipeRefreshLayout(Context context, AttributeSet attrs) {
super(context, attrs);
}
public void setChildListView(ListView childListView) {
this.childListView = childListView;
}
#Override
public boolean canChildScrollUp() {
return childListView.getFirstVisiblePosition() != 0;
}
(where childListView is the widget with id lv). This code doesn't work as i want. In fact, progress circle appear in two cases:
- i swipe listview to top
- i make swipe gesture on header and listview has first element visible.
I would that progress circle appear both if i swipe listview to top (as works now), and also if i make swipe gesture on header and listview is not to top element

I had the same problem, my solution was set android:clickable="true" inside my parent layout. try it like this:
<com.example.CustomSwipeRefreshLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/include" >
<LinearLayout
android:clickable="true" <!-- this line -->
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerHorizontal="true"
android:gravity="center_horizontal"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/header_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" />
<ListView
android:id="#+id/lv"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>
</LinearLayout>
</com.example.CustomSwipeRefreshLayout>