SmartGWT mobile Android ScrollPanel behavior

[jgin]

I have noticed there is a noticeable difference when using a ScrollPanel on Android devices (Galaxy Nexus/OS 4.1.1 and LG Lucid/OS 4.0.4) vs. IPhone/IPad.

IPhone/IPad work fine.

(High Priority) Question #1:
The biggest issue on Android is that the scrolling behavior is very "choppy". This is very easy to reproduce by using HelloWorld.java (where there are 50 buttons). I have tried disabling momentum scroll and it does not appear to help. Is this a known issue for Android? Is there something I can do to make the scroll behavior smoother?

(Low Priority) Question #2:
As lower priority, we encountered an issue when the user scrolls above the top member (where the 1st member is towards bottom of screen) and holds the drag for about 3-seconds.on the "overscroll to top" where if the user drags above the 1st member, and holds the drag for ~3 seconds. The scroll panel does not auto-center. Note that the "overscroll to bottom/hold" does auto-center itself after about 2-3 seconds.

Thanks.

[Isomorphic]

Choppy scrolling on Android is basically a globally well-known problem (not just SmartGWT.mobile). Short of cumbersome, exotic workarounds that only apply to special cases, our solution works as well as it can be made to work until core Android components get better or phones get yet faster - which is indeed occurring.

[jgin]

Here is an existing thread where someone refers to Mobile-GWT: http://forums.smartclient.com/showthread.php?t=21490&highlight=gwt+mobile

In this thread, there is a URL (http://informagen.org/mobile-gwt/) that shows examples of various widgets. I have tested the scroll behavior between SmartGWT mobile vs. the GWT mobile on the 2 Android devices.

There is a noticeable difference in scroll behavior, where the GWT-mobile scroll appears more "responsive", where the scroll starts moving immediately when the user moves their finger on the display.

On SmartGWT mobile, the scroll has a noticeable delay. This visual behavior is a huge concern for us as user's will make their first impressions of our mobile offering based on this shortcoming.

Is there any possible way to customize scrolling to provide a more responsive behavior?

[Isomorphic]

Hi jgin,

What you're seeing in that other example is whole-screen scrolling. In other words, the default behavior of any standard web page, which is always smooth.

The hard problem is having a particular *area* of the screen that scrolls, for example, having a fixed header and having the rest of screen scroll. In this area, there is no perfect solution, and our solution is as good as it will get until Android improves.

[jgin]

I have altered your HelloWorld.java to not use a NavigationStack. This should create a whole-screen scrolling scenario, where there is no fixed header. When I deploy this change, the scrolling on Android has the same "choppiness".

For my application, I am willing to change my design to use whole-screen scrolling (e.g., no fixed headers) to achieve a smoother user experience for Android users. I have not figured out how to achieve this using ScrollablePanel.

Can you please describe what I need to do to achieve smooth whole-screen scrolling?

Thanks.


Here are the modified HelloWorld.java changes I made to test whole-screen scrolling:

    /**
     * This is the entry point method.
     */
    public void onModuleLoad() {
        RootLayoutPanel.get().add(getColorsView());
    }

    public Panel getColorsView() {
        Panel panel = new ScrollablePanel("Colors");
        String[] colors = new String[]{ "blue", "red", "yellow", "green", "gray", "white", "black", "pink", "brown" };
        for (int i = 0; i < 50; i++) {
            String color = colors[(int) (Math.random() * colors.length)];
            Button button = new Button(color + ":" + i);
            button.setTintColor(color);
            panel.addMember(button);
        }
        return panel;
    }

[Isomorphic]

If you want to use native web page scrolling instead of ScrollablePanel then you need to actually not use ScrollablePanel :)

When you use ScrollablePanel, even if you use it full screen, you are still using a scrolling system that fulfills the requirement of scrolling just a portion of the screen.

[hoszke]

What to use instead of ScrollablePanel

Ok, but when I use Panel instead of ScrollablePanel, there is no scrollbars (standard or other) :(

With or without this, there is no scrollbar:
setOverflow(Overflow.AUTO);