Extra Items

Custom Application Icons

• In Android Studio, switch the file browser window to show the Packages view.  Notice that there are several folders that begin with "drawable":  

  

• Drawables are graphics resources used by apps, the most common being images.  There are the several version of the Drawable folder, corresponding to different device screen resolutions.  The OS will first look to see if the graphic being requested is in one of the resoluton-specific folders.  If not, it will look in the "drawable" folder.  This setup will allow your app to look its best in multiple resolutions. 
• Download the Presidential Seal graphic from here: http://www.usna.edu/Users/cs/pepin/courses/mobileos/lessons/images/president_seal.png

  

• Place the presidential seal graphic in the "drawable" folder (copy and paste), and name it "president_seal.png"
• Open the application's manifest file and modify the application's icon attribute to point to the new image file.  This will now be the icon used to represent the app on each device that installs it: 

• android:icon="@drawable/president_seal"

Use a ListActivity

There are several pre-fab activities that can be used to speed up application development.  One of these is the ListActivity.  The ListActivity extends an android Activity and provides the built-in ability to display a list of items...just like we did with our ListView in our MainActivity.  Since a ListActivity is already expecting to display a list, it does some of the work for us, such as providing a default layout that includes a ListView so we don't have to write our own! It also provides its own item click listener.  Here's how we modify our existing code to make it a ListActivity:

• Modify MainActivity.java so that it extends the ListActivity class instead of Activity
• Since the ListActivity provides a layout we don't have to specify one.  Comment out the line of code in the onCreate() method that we no longer need.
• Likewise, since the ListActivity provides a ListVIew, we don't need to reference one.  Comment out the corresponding line of code.
• We still need an Adapter.  However, because we're using a ListActivity, a default ArrayAdapter has already been created for us, which we can access directly.  Change your code to set the list adapter using setListAdapter().  
• Remove the implementation of the OnItemClickListener interface, and change the onItemClick() method so that it's named onListItemClick(), and change the first parameter type from AdapterView<?> to ListView

Here's what you modified code should look like (I commented out most of the unneccesary old code but left it in place so you can see the changes):

public class MainActivity extends ListActivity {
	
	final static String TAG = "PEPIN";
	
//	private ListView presidentsListView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        
//      setContentView(R.layout.activity_main);
//      presidentsListView = (ListView) findViewById(R.id.president_list);
        
        List presidentsList = 
    			Arrays.asList(getResources().getStringArray(R.array.presidents));
        
//      presidentsListView.setAdapter(
//          new ArrayAdapter(this, android.R.layout.simple_list_item_1, presidentsList));
        setListAdapter(
    	    new ArrayAdapter(this, android.R.layout.simple_list_item_1, presidentsList));
        
//      presidentsListView.setOnItemClickListener(this);
    }

	@Override
	public void onListItemClick(ListView parent, View view, int pos, long id) {
	    String presidentClicked = ((TextView)view).getText().toString();
            Toast.makeText(getBaseContext(), presidentClicked, Toast.LENGTH_SHORT).show();
	    
	    Intent i = new Intent(getBaseContext(), WebviewActivity.class);
	    i.putExtra("president", presidentClicked);
	    startActivity(i);
	} 
}

WebView Extras

Javascript

By default, the WebView does not run javascript code.  In order for it to do so, we must explicitly enable it: 

webView.getSettings().setJavaScriptEnabled(true);

That was easy...too easy!  But we're not done yet.  

ProgressBar

Wouldn't it be nice if there was a way to tell the user the status of a loading webpage?  Wait...there is!  We just need to add a ProgressBar.  We'll walk through this together in class, but here's the code:

Add a ProgressBar below the WebView in your activity_webview.xml layout file (why below?):

<ProgressBar
    android:id="@+id/progressbar"
    style="@android:style/Widget.ProgressBar.Horizontal"
    android:layout_width="fill_parent"
    android:layout_height="2dp"
    android:layout_alignParentTop="true"/>

Add these Class variables to WebviewActivity:

private int progress;
private static Handler progressBarHandler;
public static ProgressBar progressBar;

In onCreate(), above the call to webView.loadURL(), make the following changes/additions:

//webView.setWebViewClient(new WebViewClient());
progressBar = (ProgressBar) findViewById(R.id.progressbar);
initializeWebView();

The WebViewClient class provides several feedback methods that can be used to track, among othe rthings, the progress of a page that is being retrieved.  Because we like to keep our code organized, we'll place all of this code in a method that we'll call intializeWebView().

private void initializeWebView() {

    // enable tracking of webview load progress
    final Activity activity = this;
    webView.setWebChromeClient(new WebChromeClient() {
        public void onProgressChanged(WebView view, int progress) {
            // Activities and WebViews measure progress with different
            // scales.
            activity.setProgress(progress * 1000);
        }
    });

    webView.setWebViewClient(new WebViewClient() {
        @Override
        public void onPageStarted(WebView view, String url,
                                  android.graphics.Bitmap favicon) {
            // run progress bar
            runProgressbar();
        }

        @Override
        public void onPageFinished(WebView view, String url) {
            progressBar.setProgress(progressBar.getMax());
        }

        @Override
        public void onReceivedError(WebView view, int errorCode,
                                    String description, String failingUrl) {
            Toast.makeText(activity, "Network Error: " + description,
                    Toast.LENGTH_SHORT).show();
        }

    });
}

Finally, add we need to add a method that handles updating the progress bar:

private void runProgressbar() {
    progress = 0;
    progressBar.setVisibility(View.VISIBLE);
    progressBar.setProgress(0);
    progressBarHandler = new Handler() {
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            if (progress >= 100) {
                progressBar.setVisibility(View.GONE);
            } else {
                // layout progress bar
                progress = webView.getProgress();
                progressBar.setProgress(progress);

                // Log.i("PEPIN", "Progress: " + progress);
                progressBarHandler.sendEmptyMessageDelayed(0, 100);
            }
        }
    };
    progressBarHandler.sendEmptyMessage(0);
}

Now run your app again and you should see a progress bar showing the load status of web pages in your WebViewActivity. Hooray...no more confused users!

Want More?

Haven't had enough?  Need another challenge?  Modify you application so that instead of using a ListView, it uses a Spinner that allows the user to choose the President from a drop-down list.  Not up to it?  Don't worry...we'll cover this soon!!