ANDROID FUNDAMENTAL WORKSHOP Custom Web Browser Overview Building

ANDROID FUNDAMENTAL WORKSHOP Custom Web Browser

Overview Building a fully functional custom web browser Surf the web Flash , Javascript enabled Set homepage Use Sharedpreferences Exit an app properly

Component of a Web Browser Web. View Edit. Text “GO” button “Reload/Refresh” button Menu � Preference � Set Bookmarks � Exit � Quick Bookmark Links

Steps Designing the UI in XML Linking XML views to Activity through Java codes Check Android Manifest for permissions Build Preference Refine Codes, test and debug

Web Browser UI Edit. Text Web. View Buttons

Link XML to Java public class Main. Activity extends Activity { //Initialize Variable Edit. Text et. Url; Web. View web. View; @Override public void on. Create(Bundle saved. Instance. State) { super. on. Create(saved. Instance. State); set. Content. View(R. layout. activity_main); // Link XML to java et. Url = (Edit. Text)find. View. By. Id(R. id. et. Url); web. View = (Web. View)find. View. By. Id(R. id. web. View 1); web. View. load. Url(“http: //www. google. com”); } }

Android Manifest Permissions Web. View requires internet connection to work Any applications, by default, does not have any permission to perform any operation that will impact other applications such as accessing the internet, reading or writing the user’s private data (contacts & email), editing other applications data, keep the device awake etc. Android applications run in sandboxes, thus sharing resources and data are done explicitly. For the Web. Browser app, permission to access the internet is needed. This requirement is stated in Android manifest. The system will then grant internet access to the app.

Android Manifest Permissions 2 3 1 4

Android Manifest Permissions Set attribute to android. permission. INTERNET to grant internet access to app

Button Functions Set up on. Click. Listener to buttons public void on. Click (View view) { switch (view. get. Id()) { //Identify button by calling its Id case R. id. b. Go : web. View. load. Url("http: //" + et. Url. get. Text(). to. String()); break; case R. id. b. Reload: // code goes here web. View. reload(); break; } }

Create Custom Web. View. Client By default when the user clicks a link, Android ask Activity. Manager to launch an application that handle URLs. The default web browser will open up and load the link. You can modify this so that links will open within your own Web. View This is done by creating a custom Web. View. Client web. View. set. Web. View. Client(new cust. Web. View. Client()); First, create your on class that extends Web. View. Client

Custom Web. View. Client Class private class cust. Web. View. Client extends Web. View. Client { @Override public void on. Page. Finished(Web. View view, String url) { et. Url. set. Text(web. View. get. Url()); } }

Go Back Key exits the app (single activity ) and not back to previous webpage. This does not correspond well with the user’s natural instincts. Users are used to going back one single page with the back button. Disrupting user experience will be disastrous to your app ratings. Override super method on. Key. Down(int key. Code, Key. Event event) key. Code == Key. Event. KEYCODE_BACK - Refers to back button

on. Key. Down @Override public boolean on. Key. Down(int key. Code, Key. Event event) { if ((key. Code == Key. Event. KEYCODE_BACK) && web. View. can. Go. Back()) { web. View. go. Back(); return true; } return super. on. Key. Down(key. Code, event); }

Menu Mainmenu � Preferences � Setbookmarks � Group Bookmark 1 Bookmark 2 � Exit

Menu Two main building blocks � Menu � Xml (values/attributes) To instantiate a menu, define menu and its items in the XML menu resource, then inflate the resource

Main menu To create a menu, start by creating a XML file of type “MENU”

Menu

Menu - Preferences Create new XML of type Preference Select “Preference Screen” Name filename as “preferences. xml”

Preference. Category Add Preference. Category Select newly created Preference. Category and name it “User Settings” Add Edit. Text. Preference under Preference. Category

Preference. Category > homepage Homepage Enter “key” is an activity-level unique string identifier to distinguish between different preferences. (i. e R. id) Title/Summary Text that will appear on the screen

Preference. Category > username Username Key “username”

Firing up the menu Menu button exists on most android phones available in the market today Tablets that runs Honeycomb (3. 1) above does not have an external menu button, it is located in the bottom of the main screen itself. When the menu button is activated, the Android system will call the activity’s on. Create. Options. Menu(). We will override this method and populate the Menu that is passed into the method by inflating the menu resource (mainmenu. xml) that we defined earlier.

on. Create. Option. Menu @Override public boolean on. Create. Options. Menu(Menu menu) { Menu. Inflater inflater = get. Menu. Inflater(); inflater. inflate(R. menu. mainmenu, menu); return super. on. Create. Options. Menu(menu); }

on. Options. Item. Selected @Override public boolean on. Options. Item. Selected(Menu. Item item) { switch (item. get. Item. Id()) { case R. id. preferences: // mainmenu. xml > id // Launch Preference Activity Intent i = new Intent(Main. Activity. this, Preferences. class); start. Activity(i); //Create a new class which extends Preference. Activity // Send feedback Toast. make. Text(Main. Activity. this, "Preferences", Toast. LENGTH_SHORT). show(); break; } return super. on. Options. Item. Selected(item); }

Create Preferences. java

Preferences. java import android. os. Bundle; import android. preference. Preference. Activity; public class Preferences extends Preference. Activity { @Override protected void on. Create(Bundle saved. Instance. State) { // TODO Auto-generated method stub super. on. Create(saved. Instance. State); // add from resource add. Preferences. From. Resource(R. xml. preferences); //add activity into manifest } } Set Preference class to extend Preference. Activity Use add. Preferences. From. Resource() function to inflate preferences. xml

Add Activity to Android. Manifest Whenever a new activity is created, it must be declared within the Android. Manifest Previously – add new android activity

Add Activity to Android. Manifest 2 3 1

Add Activity to Android. Manifest 2 3 1

Exit Application To properly exit an app, you must explicitly call the finish(); function Home key will send the app into the background. App will be killed anytime if the system runs low on memory. In the Android market, people wants to have control over an app. Not having an Exit option will leave user worried about your app taking up memory.

Menu - Exit

Exit Application To exit an app, just call finish(); at the appropriate time. @Override public boolean on. Options. Item. Selected(Menu. Item item) { switch (item. get. Item. Id()) { case R. id. preferences: // Launch Preference Activity Intent i = new Intent(Custom. Web. Browser. Activity. this, Preferences. class); start. Activity(i); // Send feedback Toast. make. Text(Custom. Web. Browser. Activity. this, "Preferences", Toast. LENGTH_SHORT). show(); break; case R. id. menu. Exit: finish(); break; } return super. on. Options. Item. Selected(item); }

Menu – Set bookmarks

Menu - Bookmarks Create a group Create Item for bookmark 1 & 2

Create XML of type preferences Right click > Android XML > name “bookmarks. xml” Resource type: Preference File: bookmarks. xml Root element: Preference. Screen

bookmarks. xml Click Add Preference. Category Set Title to “Bookmarks”

bookmarks. xml Select Preference. Category > Right click > Add Edit. Text. Preference Key “bookmark 1” Title “Bookmark 1” Summary “Please set bookmark 1” Select Preference. Category > Right click > Add Edit. Text. Preference Key “bookmark 2” Title “Bookmark 2” Summary “Please set bookmark 2”

Create Bookmarks. java Create a new class, Bookmark. java that extends Preference. Activity. Inflate bookmarks. xml into view by calling add. Preferences. From. Resource() and passing in (R. xml. bookmarks) as the parameter. Refer to slide Preferences. java (similar concept). Remember to add Bookmarks. java into Android. Manifest.

Code for setbookmarks Add click listeners for bookmarks Under on. Options. Item. Selected(Menu. Item item)

Code for setbookmarks case R. id. setbookmarks: //Launch Bookmarks Activity //Remember to add into android manifest Intent i 2 = new Intent(Custom. Web. Browser. Activity. this, Bookmark. Pref. class); start. Activity(i 2); break; case R. id. bookmark 1: // send user to bookmark 1 String bookmark 1 = preferences. get. String("bookmark 1", "http: //www. google. com"); web. View. load. Url(bookmark 1); Toast. make. Text(Custom. Web. Browser. Activity. this, bookmark 1, Toast. LENGTH_SHORT). show(); break; case R. id. bookmark 2: //send user to bookmark 2 String bookmark 2 = preferences. get. String("bookmark 2", "http: //www. engadget. com"); web. View. load. Url(bookmark 2); Toast. make. Text(Custom. Web. Browser. Activity. this, bookmark 2, Toast. LENGTH_SHORT). show(); break;

Shared. Preferences Interface for accessing and modifying preference data Assign variable Shared. Preferences preference; Initialize preferences = Preference. Manager. get. Default. Shared. Preferences(th is);

Create Personal Icon Launcher Icons �A launcher icon is a graphic that represents your application. Launcher icons are used by Launcher applications and appear on the user’s Home screen. Launcher icons can also be used to represent shortcuts into your application (for example, a contact shortcut icon that opens detail information for a contact).

Launcher Icon Application launcher icons have three primary goals: � Promote the brand tell the story of the app. � Help users discover the app in Android Market. � Function well in the Launcher.

Do's and Don'ts Some "do and don't" examples to consider when creating icons for your application. � Icons should not be overly complicated. Remember that launcher icons will be used at often small sizes, so they should be distinguishable at small sizes. � Icons should not be cropped. Use unique shapes where appropriate; remember that launcher icons should differentiate your application from others. Additionally, do not use too glossy a finish unless the represented object has a glossy material.

Do's and Don'ts � Icons should not be thin. They should have a similar weight to other icons. Overly thin icons will not stand out well on all backgrounds. � Icons should make use of the alpha channel, and should not simply be full-frame images. Where appropriate, distinguish your icon with subtle yet appealing visual treatment.

Launcher Icon Launcher icons should be 32 -bit PNGs with an alpha channel for transparency. Screen density ldpi (120 dpi) (Low density screen) mdpi (160 dpi) (Medium density screen) hdpi (240 dpi) (High density screen) xhdpi (320 dpi) (Extrahigh density screen) Launcher Icon Size (px) 36 x 36 48 x 48 72 x 72 96 x 96

Launcher Icon Fire up Paint and build your icon now! Set size to 72 x 72 pixels, save in. png format

Launcher Icon Create a new folder in /res called “drawable” Drag and drop your icon into the folder In Android. Manifest, change the Icon attribute to the target image

App completed! App is automatically installed in device / emulator upon running. Continue by testing, debugging and further improving the app by adding in new features!