- Getting Started / Hello World Basics
- Android Manifest File / Activities / Layouts
- Example Application: Building the Web View and Main Activity
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Example Application: Building the Web View and Main Activity
The first thing to do is to create a type of view referred to as the web view. This view will allow our application to display the text we enter in what will be our single input box as text in a web page. The Android web view is used to display web-related content in your application. To create the view, right-click your project's res/layout folder and select New > Other > Android XML Layout File. Click Next, and select WebView and name the layout webview. Now you will have a simple webview file. The file will be open in the layout editor. Click the webview.xml tab at the bottom of the editor to bring up the XML for the view. Add the following lines to the file that are in bold:
<?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" > <EditText android:id="@+id/pageDataText" android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="Type who you are." android:singleLine="true" > <requestFocus /> </EditText> <Button android:id="@+id/createPage" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/createPage" android:onClick="createPageClick" android:layout_column="1" /> <WebView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/webview" android:layout_width="fill_parent" android:layout_height="fill_parent"/> </LinearLayout>
As you can see, I added another view called Edit Text to enter text for the web page, along with a button to submit that text to display it as a web page in the Web View. I wrapped the views with a Linear layout. A Linear layout will display the views on top of each other vertically.
Notice there is an onClick attribute for the Button control. It tells the compiler that when this button is clicked, a method we create in the activity called createPageClick should be executed.
The string text for the button label needs to be placed in the strings.xml file in the res/values folder. The strings XML file should look something like this:
<resources> <string name="app_name">Hello World</string> <string name="hello_world">Hello world!</string> <string name="menu_settings">Settings</string> <string name="title_activity_main">MainActivity</string> <string name="createPage">Create Page</string> </resources>
Now that the views have been established, we can add code to the main activity to make use of them. Open the main activity class from your src folder and add the following code in bold:
package com.example.helloworld;
import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.widget.EditText;
public class MainActivity extends Activity {
String summary = null;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);}
public void createPageClick(View v) {
EditText tx = (EditText) findViewById(R.id.pageDataText);
summary = tx.getText().toString();
summary = "<html><body><h1>" + summary + "</h1></body></html>";
WebView webView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = webView .getSettings();
webSettings.setJavaScriptEnabled(true);
webView.loadData(summary, "text/html", "utf-8");
}
}
You should be able to see how the activity uses the views by looking at the code. A string is initialized at the top of the class so that it can be used to get the text for the simple web page that the application will build and display. To do this, the EditText object is used to get access to the pageDataText control. From there, the text is simply taken from the input field and assigned to the summary string when the Create Page button is clicked. The WebView object gets us access to the WebView control. After this, there is one thing left to do, and that is to load the data into the object to be displayed in the view.
To test the app, choose File > Export > Android Application. The wizard will ask you to create a keystore and a self-signed certificate before generating the APK file. If you have a phone plugged into your computer using a USB cable, the APK file will automatically be installed to your phone and the app can be tested.
If you do not have a phone, before exporting your app, choose to set up an emulator. This is very easy to do. In Eclipse, simply select Window > AVD Manager and add or use a default emulator from there. During the export process, the app will be deployed to this emulator.
After running the application, type in the text for your web page and click the Create Page button. Your text will appear as the main header for your web page. In my example, I typed "My Hello World test page!", and the text displayed as a header in the web view (see Figure 1).
)
Conclusion
This article was meant to get you started with the basics of Android programming. In a later article, I will show you how to expand on these basic concepts.