Android App Development – WebView

0

WebView

In this article, we will modify the welcome layout created in our previous article and add a WebView widget to it. If you want to read more about the welcome page, click here.
We will also see how we can load the WebView.

Html Page

Create the html page that you want to show in the welcome page.

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link href="about.css" type="text/css" rel="stylesheet"/>
    </head>
    <body>
        <h2>About Android Sample App Development</h2>
        <div style="margin-left:5px">
            <ul>
                <li>Helps you develop UI</li>
                <li>Contains CRUD operations</li>
                <li>Interacts with sqllyte DB</li>
            </ul>
        </div>
    </body>
</html>

Save the file in assets folder as an html page. Open the welcome page layout that we worked on in our first article. It will be under res/layout. Click on the ‘Graphical Layout’ tab. Open ‘Composite’ palette, drag and drop the WebView widget onto the layout. We want this WebView right below the welcome text. For this, we will edit the xml itself. Since we will be dealing with Ids of the widgets, to place relatively, you must assign proper Ids to each widget.

WebView widget

Once you drop the WebView widget, place it under the ‘Welcome to Sandbox App’ text and then edit the xml instead. I usually drop the widget and then edit the important pieces of the xml like the id, name, layout_width, layout_height and the position attributes like layout_below.

Here is the layout of welcome.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
                android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin"
                android:paddingLeft="@dimen/activity_horizontal_margin"
                android:paddingRight="@dimen/activity_horizontal_margin"
                android:paddingTop="@dimen/activity_vertical_margin" tools:context="com.jopc.sandbox.ListActivity">

    <Button android:id="@+id/next_button" android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:layout_alignBaseline="@+id/skip_welcome_cb" android:layout_alignBottom="@+id/skip_welcome_cb"
            android:layout_alignParentRight="true" android:text="@string/next"/>

    <CheckBox android:id="@+id/skip_welcome_cb" android:layout_width="wrap_content" android:layout_height="wrap_content"
              android:layout_alignParentLeft="true" android:layout_centerVertical="true"
              android:text="@string/doNotShow"/>

    <TextView android:id="@+id/welcomeText" android:layout_width="wrap_content" android:layout_height="wrap_content"
              android:layout_alignParentTop="true" android:layout_centerHorizontal="true" android:text="@string/welcome"
              android:textColor="@color/welcome_text_color" android:textSize="20sp"/>

    <WebView android:id="@+id/aboutHtml" android:layout_width="match_parent" android:layout_height="wrap_content"
             android:layout_alignRight="@+id/next_button" android:layout_below="@+id/welcomeText"/>

</RelativeLayout>

Next, we need to load this web view widget in the onCreate() of the welcome activity. R.string.about_html holds the file name.

WebView aboutApp = (WebView) findViewById(R.id.aboutHtml);
aboutApp.loadUrl("file:///android_asset/" + getApplicationContext().getString(R.string.about_html));

Here is my entire welcome activity class.

public class WelcomeActivity extends Activity {
    public static final String SKIP_WELCOME = "skipWelcome";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.welcome);
        Button nextPage = (Button) findViewById(R.id.next_button);
        final CheckBox skipAbout = (CheckBox) findViewById(R.id.skip_welcome_cb);
        nextPage.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                SharedPreferences prefs = PreferenceManager.getDefaultSharedPreferences(WelcomeActivity.this);
                if (skipAbout.isChecked()) {
                    SharedPreferences.Editor editor = prefs.edit();
                    editor.putBoolean(SKIP_WELCOME, true);
                    editor.commit();
                }
                startActivity(new Intent(WelcomeActivity.this, ListActivity.class));
            }
        });
        WebView aboutApp = (WebView) findViewById(R.id.aboutHtml);
        aboutApp.loadUrl("file:///android_asset/"
                + getApplicationContext().getString(R.string.about_html));

    }
}

When run in emulator, I can now see the new WebView component:

 

Welcome Page containing WebView run in an emulator

 

 

In the next article, we will start adding something so that the data shows up in the list page.

Download Source Code

You can download the source code here: sandboxWebView.zip

Share.

Leave A Reply