In this Tutorial I will teach you how to make Professional looking Android WebView Application.
Part I
Part II
Features:
Having Splash Screen
Loading Animation before Website Loads into App
Share Button on The Action Bar.
Requirements:
Windows or Mac Computer With
Android Studio & JDK 7 Installed
No need of Knowledge of Coding
Little Brain.
NOTE: In this guide i will be asking you to copy and paste code into your file. That indicates you first remove complete code particular file and paste my code.
Steps :
Open Android Studio and Select File=>New Project.
Follow Screens.....
Set Application Name and package name what ever you want.
Select Target SDK as per your Needs
Don't change these details
Now Navigate to MainActivity.java and double click on it.
Now Copy and Paste below Code into MainActivity.java file. Replace my project name with your's in 1st line of code. In Line No 27 replace "http://karthiktechfreak.blogspot.in/" with your url. Don't use www. prfix. paste in same same format you are looking. Next Change custom share data in red color with lines you want to sown share message in line numbers 71 & 72 and give your website url in line 27th Line
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
package com.androidwebviewapp.karthik; | |
import android.app.ActionBar; | |
import android.app.Activity; | |
import android.content.Intent; | |
import android.os.Bundle; | |
import android.view.Menu; | |
import android.view.MenuItem; | |
import android.view.View; | |
import android.webkit.WebSettings; | |
import android.webkit.WebView; | |
import android.widget.ShareActionProvider; | |
public class MainActivity extends Activity { | |
private WebView mWebView; | |
@Override | |
protected void onCreate(Bundle savedInstanceState) { | |
super.onCreate(savedInstanceState); | |
setContentView(R.layout.activity_main); | |
mWebView = (WebView) findViewById(R.id.activity_main_webview); | |
WebSettings webSettings = mWebView.getSettings(); | |
webSettings.setJavaScriptEnabled(true); | |
mWebView.loadUrl("http://karthiktechfreak.blogspot.in/"); | |
mWebView.setWebViewClient(new com.androidwebviewapp.karthik.MyAppWebViewClient(){ | |
@Override | |
public void onPageFinished(WebView view, String url) { | |
//hide loading image | |
findViewById(R.id.progressBar1).setVisibility(View.GONE); | |
//show webview | |
findViewById(R.id.activity_main_webview).setVisibility(View.VISIBLE); | |
}}); | |
} | |
@Override | |
public void onBackPressed() { | |
if(mWebView.canGoBack()) { | |
mWebView.goBack(); | |
} else { | |
super.onBackPressed(); | |
} | |
} | |
private ShareActionProvider mShareActionProvider; | |
@Override | |
public boolean onCreateOptionsMenu(Menu menu) { | |
/** Inflating the current activity's menu with res/menu/items.xml */ | |
getMenuInflater().inflate(R.menu.menu_main, menu); | |
/** Getting the actionprovider associated with the menu item whose id is share */ | |
mShareActionProvider = (ShareActionProvider) menu.findItem(R.id.share).getActionProvider(); | |
/** Setting a share intent */ | |
mShareActionProvider.setShareIntent(getDefaultShareIntent()); | |
return super.onCreateOptionsMenu(menu); | |
} | |
/** Returns a share intent */ | |
private Intent getDefaultShareIntent(){ | |
Intent intent = new Intent(Intent.ACTION_SEND); | |
intent.setType("text/plain"); | |
intent.putExtra(Intent.EXTRA_SUBJECT, "Convert Website to Android Application"); | |
intent.putExtra(Intent.EXTRA_TEXT," Vist www.AndroidWebViewApp.com if you Want to Convert your Website or Blog to Android Application"); | |
return intent; | |
} | |
} | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
package com.androidwebviewapp.karthik; | |
import android.annotation.SuppressLint; | |
import android.annotation.TargetApi; | |
import android.app.ActionBar; | |
import android.app.Activity; | |
import android.content.Intent; | |
import android.os.Build; | |
import android.os.Bundle; | |
@SuppressLint("NewApi") | |
public class Splash extends Activity { | |
@TargetApi(Build.VERSION_CODES.HONEYCOMB) | |
@SuppressLint("NewApi") | |
@Override | |
protected void onCreate(Bundle savedInstanceState) { | |
super.onCreate(savedInstanceState); | |
setContentView(R.layout.activity_splash); | |
ActionBar actionBar = getActionBar(); | |
actionBar.hide(); | |
Thread t =new Thread(){ | |
public void run(){ | |
try{ | |
sleep(10000); | |
}catch(InterruptedException e){ | |
e.printStackTrace(); | |
}finally{ | |
Intent i =new Intent(Splash.this,MainActivity.class); | |
startActivity(i); | |
} | |
} | |
}; | |
t.start(); | |
} | |
@Override | |
public void onPause(){ | |
super.onPause(); | |
finish(); | |
} | |
} | |
/** | |
* Created by Karthik M on 05-Jul-15. | |
*/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
package com.androidwebviewapp.karthik; | |
import android.content.Intent; | |
import android.net.Uri; | |
import android.webkit.WebView; | |
import android.webkit.WebViewClient; | |
/** | |
* Created by Karthik's on 3/5/2015. | |
*/ | |
public class MyAppWebViewClient extends WebViewClient { | |
@Override | |
public boolean shouldOverrideUrlLoading(WebView view, String url) { | |
if(Uri.parse(url).getHost().endsWith("karthiktechfreak.blogspot.in")) { | |
return false; | |
} | |
Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url)); | |
view.getContext().startActivity(intent); | |
return true; | |
} | |
} |
Now Copy Below Code into activity_main.xml
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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" | |
tools:context=".MainActivity" | |
android:orientation="vertical"> | |
<ProgressBar | |
android:id="@+id/progressBar1" | |
style="?android:attr/progressBarStyleSmall" | |
android:layout_width="wrap_content" | |
android:layout_height="match_parent" | |
android:layout_centerHorizontal="true" | |
android:indeterminate="false" | |
android:layout_gravity="center" /> | |
<WebView | |
android:id="@+id/activity_main_webview" | |
android:layout_width="match_parent" | |
android:layout_height="match_parent" | |
android:visibility="gone"/> | |
</LinearLayout> |
Now Copy and Paste Below Code into activity_splash.xml
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<RelativeLayout 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:background="@mipmap/vert_loading" | |
tools:context=".Splash" > | |
</RelativeLayout> |
Now open menu_main.xml in menu folder and paste below code into it.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?xml version="1.0" encoding="utf-8"?> | |
<manifest xmlns:android="http://schemas.android.com/apk/res/android" | |
package="com.androidwebviewapp.karthik" > | |
<uses-permission android:name="android.permission.INTERNET" /> | |
<application | |
android:allowBackup="true" | |
android:icon="@mipmap/ic_launcher" | |
android:label="@string/app_name" | |
android:theme="@android:style/Theme.Holo.Light" > | |
<activity | |
android:name=".MainActivity" | |
android:label="@string/app_name" > | |
<intent-filter> | |
<action android:name="android.intent.action.MAIN" /> | |
<category android:name="android.intent.category.DEFAULT" /> | |
</intent-filter> | |
</activity> | |
<activity | |
android:name=".Splash" | |
android:label="@string/app_name" > | |
<intent-filter> | |
<action android:name="android.intent.action.MAIN" /> | |
<category android:name="android.intent.category.LAUNCHER" /> | |
</intent-filter> | |
</activity> | |
</application> | |
</manifest> |
Now Finally Open Values Folder and place below code in strings.xml and change app_name string value to yours in line number two.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<resources> | |
<string name="app_name">Android WebView App</string> | |
<string name="hello_world">Hello world!</string> | |
<string name="share">Share</string> | |
<string name="action_websearch">Web search</string> | |
</resources> |
Now open computer and navigate to your Project folder YourProjectName\app\src\main\res, there will be four folders with name mipmap change ic_launcher.png with your icon but don't change name and only png format are supported. And place an image file with name vert_loading.png in all folders. vert_loading.png will be your Startup screen.
At last our Project structure looks like below image...
Now go to buil in top menu of Android Studio and select Generate signed Apk and epxort your Application. After Succesfull export copy it to your phone and install. Or Upload to play store.
Watch how to Generate Signed Apk in Android Studio.
25 comments:
Write comments