View Full Version : [PhoneGap Android iPhone Sencha] Issue with Blank screen.Tried & tested solution ????

23 Aug 2011, 9:28 PM

Currently I am using following code for both iPhone & Android phonegap application.
The problem I am getting is, even if I use the below mentioned code in index.html, still there is a slight flickring in transition from Splash screen & first page of my app. I used the below code because I was getting blank or white screen after splash screen for half a second time. Any tried & tested solution would really help all who have this issue while using Sencha with PhoneGap.

<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>Sencha Phonegap</title>

<link rel="stylesheet" href="sencha-touch.css" type="text/css">
<script type="text/javascript" src="sencha-touch.js"></script>
<script type="text/javascript" src="index.js"></script>
<style type="text/css">
/* Remove margins from the 'html' and 'body' tags, and ensure the page takes up full screen height */
html, body {height:100%; margin:0; padding:0;}
/* Set the position and dimensions of the background image. */
#page-background {position:fixed; top:0; left:0; width:100%; height:100%;}
/* Specify the position and layering for the content that needs to appear in front of the background image. Must have a higher z-index value than the background image. Also add some padding to compensate for removing the margin from the 'html' and 'body' tags. */
#content {position:relative; z-index:1; padding:10px;}
<div id="page-background"><img src="icon.png" width="100%" height="100%" alt="Smile"></div>


Activity class for Android app
package com.sencha;

import com.phonegap.DroidGap;

import android.content.Context;
import android.os.Bundle;
import android.util.Log;
import android.view.Display;
import android.view.WindowManager;
import android.webkit.WebSettings.RenderPriority;

public class PhoneGapSenchaAppActivity extends DroidGap {
/** Called when the activity is first created. */
// declare the original size of the iPad app
protected float ORIG_APP_W = 320;
protected float ORIG_APP_H = 480;
public void onCreate(Bundle savedInstanceState) {
super.setIntegerProperty("splashscreen", R.drawable.icon);
// set some defaults

//get actual screen size
Display display = ((WindowManager)getSystemService(Context.WINDOW_SERVICE)).getDefaultDisplay();
int width = display.getWidth();
int height = display.getHeight();

// calculate target scale (only dealing with portrait orientation)
double globalScale = Math.ceil( ( width / ORIG_APP_W ) * 100 );

// make sure we're all good
Log.v( "ORIG_APP_W", " = " + ORIG_APP_W );
Log.v( "ORIG_APP_H", " = " + ORIG_APP_H );
Log.v( "width", " = " + width );
Log.v( "this.appView.getMeasuredHeight()", " = " + height );
Log.v( "globalScale", " = " + globalScale );
Log.v( "this.appView.getScale()", "index=" + this.appView.getScale() );

// set some defaults on the web view
this.appView.getSettings().setBuiltInZoomControls( false );
this.appView.getSettings().setSupportZoom( false );
this.appView.getSettings().setGeolocationEnabled( true );
this.appView.getSettings().setLightTouchEnabled( true );
this.appView.getSettings().setRenderPriority( RenderPriority.HIGH );

// set the scale
this.appView.setInitialScale( (int)globalScale );