How to build Android App for Website - Android Studio Webview Tutorial

Creat android app for website

Many of us own their personal websites or blogs with high quality content , and large traffic,but they dosn't have an android app for theire website , wich mean that they lose a big important traffic from app stores such google play app store,amazon app store , iOs app store .

creat an android app for your website in few steps , this android tutorial will teach you how to build an app for website using android studio .
so lets start to convert a website to an android app , As an example we convert  our website : nulledmobileapps and make an app to run the website as webpages inside an android webview  , we will creat an animated splash screen for android app , using android studio to generate Image Asset with different android dimensions ,working with webview settings to  allow zoom In/Zoom Out , enabling java script and Loading WebView indicator
Material design ,working with navigation drawer ,and learn how to add Responsive ADmob banner and how to link app to firebase Then finally Generate Signed APK ready to publish.

Happy Training !!

Now Open Android studio And creat New Android Project with the following :

App Name : Web2App

Package Name : com.nulledapps.Website2App

minSDK : API 15 : Android 4.0.3 (IceCreamSandwich)

After Next select an activity template from android studio Activity window, the best predefined template for a website  App select ( Navigation Drawer Activity ) by using the Drawer Navigation we can easily navigate between our web pages categories .

Press Finish and wait while android studio finish building app project , your android project must be structured the shown on the screen shot below.

1 :  The android Manifest File where app activities declared and app permissions declaration so lets  make some changes 

- Open AndroidManifest.xml and add the Internet permission , our app need Internet to work so we      have to add permission.INTERNET 

-Copy And Past this line as shown on the screen shoot below : 

<uses-permission android:name="android.permission.INTERNET" />

2: The folder that contain Java classes and Java activities , Now open you MainActivity.java and remove the following code lines :

FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
@Override public void onClick(View view) {
Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
.setAction("Action", null).show();
}
});

Now go to res/layout and open  app_bar_main.xml , and remove the following code lines :

<android.support.design.widget.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom|end" android:layout_margin="@dimen/fab_margin" app:srcCompat="@android:drawable/ic_dialog_email" />

- Open content_main.xml and replace the following lines :

<TextView    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:text="Hello World!" />

 with webview xml code as following :

<WebView    android:layout_width="match_parent"    android:layout_height="match_parent"    android:id="@+id/webview" />

- Open  menu/activity_main_drawer.xml and change the following words :

Import -> Home

Gallery -> All Source codes
Slideshow -> Mobile apps
Tools -> Android Games

(use CTRL+F to find words and replace with the words above)

 - Back To MainActivity.java and open it if not and initialize app variables as following : 

WebView myWebView; private String home="your page url 1"; private String all_apps="your page url 2";private String android_apps="your page url";private String android_games="";

- Add in  protected void onCreate(Bundle savedInstanceState)
The following code :

// CALL THE WEBVIEW
myWebView = (WebView) findViewById(R.id.webview);
// LOAD HOME URL WITH THE WEBVIEW
myWebView.loadUrl(home);
// SET WEBVIEW SETTINGS : enable java in webview , set support zoom
WebSettings webSettings = myWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
webSettings.setSupportZoom(true);
webSettings.setBuiltInZoomControls(true);
final Activity MyActivity = this;
myWebView.setWebChromeClient(new WebChromeClient() {
public void onProgressChanged(WebView view, int progress)
{
//Make the bar disappear after URL is loaded, and changes string to Loading... MyActivity.setTitle("Loading...");
MyActivity.setProgress(progress * 100); //Make the bar disappear after URL is loaded // Return the app name after finish loading if(progress == 100)
MyActivity.setTitle(R.string.app_name);
}
});

Now in NvigationItemSelected method add the following codes:

// Handle navigation view item clicks here.int id = item.getItemId();
if (id == R.id.nav_camera) {
// Load Home page url myWebView.setWebViewClient(new WebViewClient());
myWebView.loadUrl(home);
} else if (id == R.id.nav_gallery) {
myWebView.setWebViewClient(new WebViewClient());
myWebView.loadUrl(all_apps);
} else if (id == R.id.nav_slideshow) {
myWebView.setWebViewClient(new WebViewClient());
myWebView.loadUrl(android_apps);
} else if (id == R.id.nav_manage) {
myWebView.setWebViewClient(new WebViewClient());
myWebView.loadUrl(android_games);
} else if (id == R.id.nav_share) {
} else if (id == R.id.nav_send) {
}
DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
drawer.closeDrawer(GravityCompat.START);
return true;

- Now open res/drawable/side_nav_bar.xml and modify code color with your need , i will use my website color in this case , to do that make the following : 

Now We will customize our app header by adding logo ,slogan,app description , so open res/layout/nav_header_main.xml

to Generat predefined material icon using android studio : 
right click on drawable folder new -> image asset and Insert Icon type,action name,style as the following:

Now open nav_header_app.xml in design mode  and change icon and texts as shown below in the screen shot:

select ImageView(1) component in srcCompat (3) press button shown on green square and select drawable -> ic_action_appslogon

Click on each Text View and modify the text in the text box properties panel 

Watch Youtube video Tutorial
At This moment we have an application capable to run our website , lets build and clean the project and generate our first APK see result in screen shoot below

 in the next part we will learn how to add an animated splash screen on our app , and learn how to add Responsive admob banner and Link our app to firebase .


For any lazy click download source code of this tutorial