7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
  1. Code
  2. Corona SDK

Corona SDK: Creating an In-App Web View

Scroll to top
Read Time: 5 mins

When developing mobile applications, there are times when a full featured web browser will be needed but allowing your user to leave your application is not an option. In this tutorial, you will learn how to embed a WebKit instance into your application, preventing the user from needing to leave the app to browse a web site.

Web View Application Overview

WebView Figure 1WebView Figure 1WebView Figure 1

Using the Corona native class and the showWebPopup() method, we'll embed a browser instance and display a button to go back to the app content.

Select Target Device

The first thing you have to do is select the platform you want to run your app, this way you'll be able to choose the size for the images you will use.

The iOS platform has these caracteristics:

  • iPad: 1024x768px, 132 ppi
  • iPhone/iPod Touch: 320x480px, 163 ppi
  • iPhone 4: 960x640px, 326 ppi

Because Android is an open platform, there are many different devices and resolutions. A few of the more common screen characteristics are:

  • Nexus One: 480x800px, 254 ppi
  • Droid: 854x480px, 265 ppi
  • HTC Legend: 320x480px, 180 ppi

In this tutorial we'll be focusing on the iOS platform, specifically developing for distribution to an iPhone/iPod touch.


We'll create a basic interface featuring a button that will call the web view when pressed, we'll also work with text that will serve as feedback.

Exporting PNG's

Depending on the device you have selected you will need to export the graphics in the recommended PPI, you can do that in your favorite image editor.

I used the Adjust Size... function in the Preview app in Mac OS X.

Remember to give the images a descriptive name and to save them in your project folder.


Time to write our application!

Open your prefered Lua editor (any Text Editor will work, but you won't have syntax highlighting) and prepare to write your awesome app.

Hide Status Bar

First, we hide the status bar, this is the bar on top of the screen that shows the time, signal and other indicators.


Now we add the app background.

This line creates the local variable background and uses the display API to add the specified image to the stage. By default, the image is added to 0,0 using the top left corner as the reference point.


Repeat the process with the logo image, placing it in the top-center of the stage.


The next lines will create the text in the center of the stage, normally, we'll just need one TextField, but apparently the newline (\n) character isn't working with the newText method at this moment.

Go Button

This button will call the web view, this code adds it to the stage.

Bottom Bar

When the user activates the web view a bar will be shown in the bottom of the screen, this bar will contain a button that will remove the web view and show the app content back.

The following code adds the bottom bar and makes it hidden by default.

Back Button

The back button that will remove the web view (also hidden by default).

Back Function

This function will be executed by the back button. It hides the bottom bar and back button and it also removes the web popup.

Go Button Function

This code will call the web popup and make the bottom bar and back button visible to the user.

The web popup method has the following parameters:

  • x: The x position where the popup will be added
  • y: The y position where the popup will be added
  • width: Size of the web popup
  • height: Size of the web popup
  • URL: The default url that the popup will open


The next lines add the required listeners to the screen buttons.


If everything is working as expected, we are almost ready to build our app for device testing. Just one more thing: the application icon.

Using the graphics you created before you can create a nice and good looking icon, the icon size for the iPhone icon is 57x57px (114x114px for the iPhone 4 retina display), but the iTunes store uses a 512x512px version so it's better to create your icon in this size.

It doesn't need to have the rounded corners or the transparent glare, iTunes and the iPhone will do that for you.


Displaying web content from inside your application will prevent your app users from leaving your app to access a web site and generally creates a more pleasant user experience. Thanks for reading this tutorial. I hope you've found it useful!

Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.