How to Convert a Website into an Android App – Android Studio tutorial

Howdy, code-geeks, Today we are going to learn how to build a simple Android application using Android Studio to display your mobile-friendly website.

Following this simple tutorial, you will learn how to do that.

Step 1 –

  • Create a new Android project
  • You can choose the activity name as you like but for this guide, I will be using activity name as NiceTechGuy


Step 2 –

Add a WebView to your activity_main.xml. Refer to the image below.

Path: app\src\main\res\layout\activity_main.xml

If you are unable to see the design view, Refer to the image below.

You can copy and paste below codes into your project but don’t forget to change the values as you want

Path: app\src\main\res\layout\activity_main.xml

<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”
tools:context=”.MainActivity”>

<WebView
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”
android:id=”@+id/webView”
android:layout_alignParentLeft=”true”
android:layout_alignParentStart=”true”
android:layout_alignParentTop=”true”
android:layout_alignParentRight=”true”
android:layout_alignParentEnd=”true” />
</RelativeLayout>

Path: app/src/main/AndroidManifest.xml

<?xml version=”1.0″ encoding=”utf-8″?>
<manifest xmlns:android=”http://schemas.android.com/apk/res/android”
package=”com.example.nicetechguy.nicetechguy” >
<uses-permission android:name=”android.permission.INTERNET”></uses-permission>
<application
android:allowBackup=”true”
android:icon=”@drawable/ic_launcher”
android:label=”@string/app_name”
android:theme=”@style/AppTheme” >
<activity
android:name=”com.example.nicetechguy.nicetechguy.MainActivity”
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>

Path: app\src\main\java\com\example\nicetechguy\nicetechguy

package com.example.nicetechguy.nicetechguy;

import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class MainActivity extends ActionBarActivity {
private WebView myWebView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
myWebView = (WebView)findViewById(R.id.webView);
WebSettings webSettings = myWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
myWebView.loadUrl(“http://nicetechguy.com”);
myWebView.setWebViewClient(new WebViewClient());
}

@Override
public void onBackPressed() {
if(myWebView.canGoBack()) {
myWebView.goBack();
} else {
super.onBackPressed();
}
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
int id = item.getItemId();
if (id == R.id.action_settings) {
return true;
}

return super.onOptionsItemSelected(item);
}
}

Path: app\src\main\res\menu

<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=”.MainActivity”>
<item android:id=”@+id/action_settings” android:title=”@string/action_settings”
android:orderInCategory=”100″ app:showAsAction=”never” />
</menu>

Voilà! Once you follow these simple steps, you will see the following output

Don’t forget to change the code as you want.

Learn How to Rename Android Studio Package

Leave A Reply