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.
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));
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:
In the next article, we will start adding something so that the data shows up in the list page.
How can access a website in my app using webview, I don't want to use the default browser of the android?
ReplyDelete