Thursday, June 12, 2014

Create your own App for FIFA World Cup

Just a funny exercise to load The Official Website of the FIFA World Cup (http://www.fifa.com/) in a webview.


MainActivity.java
package com.example.myfifa;

import android.annotation.SuppressLint;
import android.app.Activity;
import android.content.Intent;
import android.net.Uri;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class MainActivity extends Activity {
 
 WebView myBrowser;
 private final static String FIFA_HOME = "http://www.fifa.com/";
 
 private final static String KEY_URL = "KEY_URL";

 @SuppressLint("SetJavaScriptEnabled")
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  
  //restore url after config/orientation changed
  String openUrl = FIFA_HOME;
  if (savedInstanceState != null) {
   openUrl = savedInstanceState.getString(KEY_URL);
  }

  myBrowser = (WebView)findViewById(R.id.mybrowser);
  myBrowser.getSettings().setJavaScriptEnabled(true);
  myBrowser.setWebViewClient(new WebViewClient());
  myBrowser.loadUrl(openUrl);

 }

 @Override
 protected void onSaveInstanceState(Bundle outState) {
  //save url before config/orientation changed
  outState.putString(KEY_URL, myBrowser.getUrl());
  super.onSaveInstanceState(outState);
 }

 @Override
 public boolean onCreateOptionsMenu(Menu menu) {

  // Inflate the menu; this adds items to the action bar if it is present.
  getMenuInflater().inflate(R.menu.main, menu);
  return true;
 }

 @Override
 public boolean onOptionsItemSelected(MenuItem item) {
  int id = item.getItemId();
  if (id == R.id.action_openinbrowser) {
   
   Uri openUri = Uri.parse(myBrowser.getUrl());
   Intent myIntent = new Intent(Intent.ACTION_VIEW, openUri);
   startActivity(myIntent);
   
   return true;
  }
  return super.onOptionsItemSelected(item);
 }

}

activity_main.xml
<LinearLayout 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:orientation="vertical"
    tools:context="com.example.myfifa.MainActivity" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:autoLink="web"
        android:text="http://android-er.blogspot.com/"
        android:textStyle="bold" />
    
    <WebView
        android:id="@+id/mybrowser"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

Modify /res/menu/main.xml to replace add option item of action_openinbrowser.
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context="com.example.myfifa.MainActivity" >

    <item
        android:id="@+id/action_openinbrowser"
        android:orderInCategory="100"
        android:title="@string/action_openinbrowser"
        app:showAsAction="ifRoom|withText"/>

</menu>

Modify /res/values/strings.xml to add string resource of "action_openinbrowser".
<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="app_name">MyFIFA</string>
    <string name="hello_world">Hello world!</string>
    <string name="action_settings">Settings</string>
    <string name="action_openinbrowser">Open in Browser</string>

</resources>

uses-permission of "android.permission.INTERNET" is needed in AndroidManifest.xml.

download filesDownload the files.

Download and try the APK.

Next:
Implement WebChromeClient to retrieve downloaded favicon and title in WebView.

No comments: