Android Graphics Tutorial: StateListDrawable and WebView

PrevMain 

StateListDrawable

A StateListDrawable is a drawable object that holds a list of states and drawables pairs. Therefore, as a developer, it lets you assign multiple graphic images to a single drawable and then swap out the visible item by a string ID value. It comes in handy when you create custom buttons.

As an example, let’s use the StateListDrawable for a custom button to show different images when it’s clicked and unclicked. Pick two 9-patch images for your button states and add them as StateListDrawableusing the <selector> tag in your XML file.

<selector android="http://schemas.android.com/apk/res/android">
    <item state_pressed="true" drawable="@drawable/redbutton" />
    <item drawable="@drawable/bluebutton" />
</selector>

The way a StateListDrawable works is that the object displays the first <item> within the <selector> tag that matches the current state of the object. In the above example, the second <item> serves as a catch-all scenario in case the first condition (button pressed) is not met.

WebView

The WebView class lets you open a window within your app for viewing webpages and custom HTML markup pages.

To start, create two layout files – one for the main view:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
 
    <Button
        android:id="@+id/buttonUrl"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Go to http://www.google.com" />
 
</LinearLayout>

And the other for our WebView:

<?xml version="1.0" encoding="utf-8"?>
<WebView  xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/webView1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
/>

Then, create the Main Activity class which would display a button which when clicked will open the Google website in a webview:

package com.learncomputer.android;
 
import android.app.Activity;
import android.content.Context;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
 
public class MainActivity extends Activity {
 
	private Button button;
 
	public void onCreate(Bundle savedInstanceState) {
		final Context context = this;
 
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
 
		button = (Button) findViewById(R.id.buttonUrl);
 
		button.setOnClickListener(new OnClickListener() {
		    @Override
		    public void onClick(View arg0) {
		        Intent intent = new Intent(context, WebViewActivity.class);
		        startActivity(intent);
		    }
		});
	}
}

Next, create an activity for the WebView and set the WebView URL to www.google.com as shown below.

package com.learncomputer.android;
 
import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebView;
 
public class WebViewActivity extends Activity {
 
	private WebView webView;
 
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.webview);
 
		webView = (WebView) findViewById(R.id.webView1);
		webView.getSettings().setJavaScriptEnabled(true);
		webView.loadUrl("http://www.google.com");
	}
}

To use a WebView, you need to grant the android.permission.INTERNET permission in the AndroidManifest.xml file as shown below.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.mkyong.android"
    android:versionCode="1"
    android:versionName="1.0" >
 
    <uses-sdk android:minSdkVersion="10" />
 
    <uses-permission android:name="android.permission.INTERNET" />
 
    <application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name" >
        <activity
            android:name=".WebViewActivity"
            android:theme="@android:style/Theme.NoTitleBar" />
 
        <activity
            android:label="@string/app_name"
            android:name=".MainActivity" >
            <intent-filter >
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
 
</manifest>

Once you run this application, it will show an activity with a button with the label “Go to www.google.com“.

webview app

Once you click the button, it will then load the Google website in a Webview as shown below:

Google website in a Webview

In this module, we covered advanced Android UI controls and learnt how to open web pages using a Webview. In the next module, we’ll cover key Android concepts including the Application class, threads and handlers.

Till then, Happy Coding!

PrevMain