Develop Reference

Capture onScroll event in Android ScrollView

Simple scenario - ScrollView hosting a single LinearLayout which has several children - the preferred pattern to allow a scroll enabled views in developing on Android.
I need to capture onScrollEvents, start, stop, etc. that are readily available and work very well if I use ListView/onScrollListener combination.
A dedicated widget for scrolling a view DOES NOT have the built-in capabilities to capture these events? Come On! I have tried OnTouchEvent listener, onGestureListener, etc - all work arounds and all meant for something else. What am I missing here?

Unfortunately, there is no pre-built way for getting these events. However, there are two workarounds:
Use a ListView instead
Build your own custom ScrollView with ScrollListener. This is not that hard to achieve and has been done before.

Swipe with jQuery Mobile 1.2, PhoneGap 2.1 and Android 4.0.4 not working properly

I know there are already a bzillion threads about this, but I cannot get a solution.
Problem: Not every swipe gesture is recognized.
Setup: Android 4.0.4, PhoneGap 2.1 and jQuery Mobile 1.2
On a touchMove (scroll or swipe) I get (almost every time)
Miss a drag as we are waiting for WebCore's response for touch down.
The problem seems to be that my setup is not able to detect a touchstop properly.
I using the following at the moment for swiping:
(".mainList").swipeleft(function() {
$.mobile.changePage("status.html", {
transition : "slide"
});
console.log("swipe left!!!");
});
and this for enabling the swipe to be triggered correctly every time:
// deactivate normal touch handling for swipe to work
document.ontouchmove = function(event) {
event.preventDefault();
};
This way swiping works every time but scrolling (of course) does not work anymore. You could apply this function only for the header of a page to make the header "swipable" and the content scrollable but not swipeable correctly. But this cannot be the real solution.
I tried the following tips I gathered from various thread:
use the ".on" function to bind the swipe event
bind the swipe event to a class rather than an id
Try to detect a horizontal scroll by using "ontouchstart" and "ontouchend"
This does not work as the touchend event is not triggered on every swipe.
experiment with different values of the swipe constants like $.event.special.swipe.scrollSupressionThreshold
As I thought maybe the setup is not show whether a swipe is a real swipe or a horizontal scroll:
prevent horizontal scrolling via css overflow
prevent horizontal scrolling by using a customized cordovarwebview
use different values fo the viewport meta tag in my html to set the correct page width
All trials except the event.preventDefault(); approach do not change the situation: only every second, third or fourth swipe gesture is recognized correctly.
Anyone with the same problem and maybe a solution? :D
Thx in advance

How to implement Android 4.0 like swipe to dismiss functionality in ListView?

I'm working on an app in which I would like to implement swipe-to-dismiss functionality in the ListView - similar to what we see in Android 4.0's notification bar, recent apps list or browser tabs. I want to run the app on the devices running Android 2.2+. See the following image. I also want to change the transparency of the item being swiped-away - just like in ICS.
I checked the source of the ICS web browser on http://grepcode.com/file/repository.grepcode.com/java/ext/com.google.android/android-apps/4.0.1_r1/com/android/browser/TabScrollView.java?av=f but couldn't figure out which class is particularly responsible for implementing this functionality.
Can anyone point me in the right direction here? Can we do this using Android Compatibility Library? Please let me know. Many thanks.

I've thought about implementing such a feature as well, but I haven't done it yet. So the only thing I can provide are some ideas on how I would approach that problem. If I've eventually written some code I will post it here.
The main class needed is a custom Adapter which extends a ListAdapter (ArrayAdapter, SimpleCursorAdapter etc.).
The adapter applies a View.OnTouchListener to all of its Views.
Whenever that listener detects a horizontal scroll dx, it calls concernedView.offsetLeftAndRight(dx) (which will make the view draggable). Of course the adapter has to save the current horizontal offset for the view. If the user was dragging a view and removes his/her finger from the screen, the touchListener will detect this as well and start a slide back animation. Using the current offset we can also calculate an alpha value, so the view will fade out when it approaches the screen borders.
If one list entry is eventually dismissed by the user, it becomes a bit tricky, and I'm still not sure how I would implement the following action: The list content has to be updated (or the adapter has to ignore the dismissed entries) and the views that were below the one that was dismissed must hover upwards in order to fill the gap. I think it might work to let the ListView load the new content, but that would fill the gap instantly. In order to avoid that, I would then start an animation that lets all the concerned views hover from their old position (where we still had the gap) back to their current position (where the gap is filled).
These are just some of my thoughts on the issue that might help some people getting started on working on the problem. Like I said, I'm probably going to implement that sometime in the future and of course I will post the code here.
I would appreciate any feedback in the comments, but I don't want to thorougly explain every single aspect of my idea, that would take me too much time ;)

I know this is quite an old question, but for anyone still searching for this, you can have a look at Roman Nurik's library here: https://github.com/romannurik/Android-SwipeToDismiss
This shows how to create the required behavior for list-view as well as for normal views.

Is there a workaround for the Android browser bug with CSS-Position and clickable areas?

When you have some clickable content like <a>, <input> or <area> and before this you have an absolutely positioned element with a bigger z-index, there is the wrong behavior of 'click-through'.
I click on the area where the clickable element is behind the front element. In other browsers there is the right behavior that the click does not go through the front element. But only in Android Browser you can click through the front element and activate the element behind. This is a known bug and you cannot avoid it. It's even in newer versions (I test on 2.3.3 in the official Android emulator).
There are some workarounds described in some forums but none of them worked for me.
I tried to put an <iframe> or an <a> between front and back
I tried to change the DOM so maybe the browsers state is refreshed
I tried to have the back elements be positioned as well
None worked
I'm especially having problems with the image map's area elements.
Has anyone had the same issue and managed to work around it?
I'm specifically interested in solutions which are tested against image maps.

I am wondering about a few things here. First, what is the purpose of having an overlaid image and using the image maps? I see you're including jQuery - can you use the hover event with jQuery to change the orientation of the images and do the swap? What about attaching to the click event for the image map, and checking to see if the lightbox is open. If it is, then return false;.
Just trying to think out loud. Sometimes another take on it can be helpful.

This is a quick blindfolded reply, so let me know if I should expand/fix it further. The general idea being a CSS class for both the hover and focus events that disables pointer interaction.
yourElementClass:focus, yourElementClass:hover {
pointer-events: none;
}

Actually I've managed to avoid it by moving the objects below to let them be not visible.
But in cases similar to yours the only workaround that actually works is to manage all the clicks in jquery (especially the ones on the background) and to bind/unbind the clicks events on needs.
there are also some things that could help on some version/mobiles (but do not solve the problem)
the above item has background:rgba(0,0,0,0.1);
you should put a gif or png as background of the above element (as well as the background color as point 1)
using thouchstart instead of click as bind event sometimes helps.
the actual version of android/browser are not affected with this bug (or at least it never happen to me) but it could be nice to know the affected versions. If someone has a list.

onClick event in android webview too slow

I've got the feeling that javascript itself is pretty fast in an andorid webview, but there is a long delay between touching an element and the onclick event beeing fired.
I could imagine that this is a feature if you navigate between pages - you first see the highlight on the element, and then you see the effect (navigation). But for applications, this is too slow.
Is there a way to change this behavior?
Or is there maybe another event I should go for, like an onHover or onTouch? Something which fires way before the onClick?

This is a known 'issue' related to 300ms due to user tapping/zooming at display:
http://updates.html5rocks.com/2013/12/300ms-tap-delay-gone-away
In the near future, this seems to be solved, in static sized layouts, adding information at header. But the actual webkit webview version does not have/consider this option.
In my case, the solution was use Tappy lib:
https://github.com/filamentgroup/tappy
Just import it, and bind to each element that has an click event, and you will see the difference.
Just one more point: I adjusted the timer to 100000ms (default:1000ms) to avoid event repetition in some specific cases.

I guess I've found the answer...
If you take a look at jQuery mobile, you'll find a tap event. This works instantly - exactly as I need it.
Looking deeper into the source, I've found that the tap event uses a mousedown ....