VERY SLOW interactions in android webview

**mikxman** · 29 Jun 2012 6:50 AM

Hi!
I'm trying to use sencha charts in my android application, but i have some problem with it. It works, but it works EXTREMELY slow.
I tried it in virtual device, ZTE blade and Samsung Galaxy Spica.
How can I improve performance or what am I doing wrong?

I create android app (for 2.1 sdk). The code of main activity:

Code:

public class WebView_testActivity extends Activity{
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        WebView myWebView = (WebView) findViewById(R.id.webview);        
        WebSettings webSettings = myWebView.getSettings();        
        webSettings.setJavaScriptEnabled(true);
        webSettings.setRenderPriority(WebSettings.RenderPriority.HIGH);
        myWebView.loadUrl("file:///android_asset/index.html");
    }
}

In my java code I load index.html page, which is placed in my project.
index.html I took from examples:

Code:

<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="utf-8"> 
        <title>Hello World</title>         
        <link href="lib/touch/resources/css/touch-charts-demo.css" rel="stylesheet" type="text/css" /> 
		<script src="lib/touch/sencha-touch.js" type="text/javascript"></script>
		<script src="lib/touch/touch-charts.js" type="text/javascript"></script> 
		<script src="index.js" type="text/javascript"></script>  
    </head> 
    <body></body> 
</html>

Index.js file I also took from examples:

Code:

Ext.setup({
    tabletStartupScreen: 'tablet_startup.jpg',
    phoneStartupScreen: 'phone_startup.jpg',
    tabletIcon: 'icon-ipad.png',
    phoneIcon: 'icon-iphone.png',
    glossOnIcon: false,
    onReady: function() {
        window.generateData = function(n, floor) {
            var data = [],
                p = (Math.random() * 11) + 1,
                i;

            floor = (!floor && floor !== 0) ? 20 : floor;

            for (i = 0; i < (n || 12); i++) {
                data.push({
                    name: Date.monthNames[i % 12],
                    2008: Math.floor(Math.max((Math.random() * 100), floor)),
                    2009: Math.floor(Math.max((Math.random() * 100), floor)),
                    2010: Math.floor(Math.max((Math.random() * 100), floor)),
                    data4: Math.floor(Math.max((Math.random() * 100), floor)),
                    data5: Math.floor(Math.max((Math.random() * 100), floor)),
                    data6: Math.floor(Math.max((Math.random() * 100), floor)),
                    data7: Math.floor(Math.max((Math.random() * 100), floor)),
                    data8: Math.floor(Math.max((Math.random() * 100), floor)),
                    data9: Math.floor(Math.max((Math.random() * 100), floor))
                });
            }
            return data;
        };
        window.store1 = new Ext.data.JsonStore({
            fields: ['name', '2008', '2009', '2010', 'data4', 'data5', 'data6', 'data7', 'data9', 'data9'],
            data: generateData(5, 20)
        });

        var onRefreshTap = function() {
            window.store1.loadData(generateData(5, 20));
        };
        var onHelpTap = function() {
			new Ext.Panel({
 		          floating: true,
		           modal: true,
		           centered: true,
		           width: 300,
		           height: 250,
		           styleHtmlContent: true,
		           scroll: 'vertical',
		           dockedItems: [{
		               dock: 'top',
		               xtype: 'toolbar',
		               title: 'Bar Chart'
		           }],
		           stopMaskTapEvent: false,
		           fullscreen: false,
				   html: "This example's uses many interactions.<br><ul>" +
							"<li>A horizontal swipe will change between a grouped and stacked bar chart.</li>" +
							"<li>Tapping two items will overlay an arrow and show a comparison in the Title area.</li>" +
							"<li>The chart can be zoomed vertically with a pinch gesture, and the panned by dragging.  For devices which do not support multi-touch, an extra toggle button is made available to switch between pan and zoom.  When zoomed in, arrow indicators will be overlayed on the chart to show that more data is available</li>" +
							"<li>Double-Tap will reset the chart back to the initial state</li>"
		       }).show('pop');
		}

        var chartPanel = new Ext.chart.Panel({
            title: 'Bar Chart',
            fullscreen: true,
            dockedItems: [{
                xtype: 'button',
                iconCls: 'help',
                iconMask: true,
                ui: 'plain',
                handler: onHelpTap
            }, {
				xtype: 'button',
				iconCls: 'shuffle',
				iconMask: true,
				ui: 'plain',
                handler: onRefreshTap
			}],
            items: {
                cls: 'bar1',
                theme: 'Demo',
                store: store1,
                animate: true,
                shadow: false,
                legend: {
                    position: {
                        portrait: 'right',
                        landscape: 'top'
                    },
                    labelFont: '17px Arial'
                },
                interactions: [{
                    type: 'reset'
                },
                {
                    type: 'togglestacked'
                },
                {
                    type: 'panzoom',
                    axes: {
                        left: {}
                    }
                },
                {
                    type: 'iteminfo',
                    gesture: 'taphold',
                    panel: {
                        dockedItems: [{
                            dock: 'top',
                            xtype: 'toolbar',
                            title: 'Details'
                        }],

                        html: 'Testing'
                    },
                    listeners: {
                        'show': function(me, item, panel) {
                            panel.update('<ul><li><b>Month:</b> ' + item.value[0] + '</li><li><b>Value: </b> ' + item.value[1] + '</li></ul>');
                        }
                    }
                },
                {
                    type: 'itemcompare',
                    offset: {
                        x: -10
                    },
                    listeners: {
                        'show': function(interaction) {
                            var val1 = interaction.item1.value,
                                val2 = interaction.item2.value;

                            chartPanel.descriptionPanel.setTitle(val1[0] + ' to ' + val2[0] + ' : ' + Math.round((val2[1] - val1[1]) / val1[1] * 100) + '%');
                            chartPanel.headerPanel.setActiveItem(1, {
                                type: 'slide',
                                direction: 'left'
                            });
                        },
                        'hide': function() {
                            chartPanel.headerPanel.setActiveItem(0, {
                                type: 'slide',
                                direction: 'right'
                            });
                        }
                    }
                }],
                axes: [{
                    type: 'Numeric',
                    position: 'bottom',
                    fields: ['2008', '2009', '2010'],
                    label: {
                        renderer: function(v) {
                            return v.toFixed(0);
                        }
                    },
                    title: 'Number of Hits',
                    minimum: 0
                },
                {
                    type: 'Category',
                    position: 'left',
                    fields: ['name'],
                    title: 'Month of the Year'
                }],
                series: [{
                    type: 'bar',
                    xField: 'name',
                    yField: ['2008', '2009', '2010'],
                    axis: 'bottom',
                    highlight: true,
                    showInLegend: true
                }]
            }
        });
    }
});

**mitchellsimoens** · 2 Jul 2012 7:05 AM

Sencha Touch doesn't support Android 2.1. Also Sencha Touch 2 has a lot better performance for Android, it's like night and day if you ask me.

**mikxman** · 2 Jul 2012 7:31 AM

But i need Sencha Touch CHARTS

Sencha Touch Charts 2 Beta has better performance?

**danielvermaasen** · 2 Oct 2012 1:42 AM

Pretty old thread, but regardless:
It is a known bug, that WebViews have performance issues with hardwareacceleration. Disable the acceleration for the view by doing this:

Code:

webView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);

**mikxman** · 2 Oct 2012 4:37 AM

but android 2.x doesn't have hardware acceleration for webview. or it does?

**vadimv** · 10 Oct 2012 6:29 AM

This line of code just improved responsiveness of my testapp, android 4.0.3 release 5:

Code:

webSettings.setRenderPriority(WebSettings.RenderPriority.HIGH);

And it's more an android's webkit problem, testing ST 2.1 rc1's kitchensink in chrome on android confirms this, besides the complaints on net about the slowness of android's webview

**vadimv** · 10 Oct 2012 6:31 AM

Originally Posted by mikxman

but android 2.x doesn't have hardware acceleration for webview. or it does?

it doesn't
http://developer.android.com/guide/t...t.html#hwaccel

VERY SLOW interactions in android webview

Thread Tools

Search Thread

Display

Unanswered: VERY SLOW interactions in android webview

Unanswered: VERY SLOW interactions in android webview