Android Studio Header

TUTORIAL: Change website into App

why wouldn’t you use an app generator?

We could use an app generator yes, but don’t you want to create your own app and earn the revenue yourself? Appsgeyser is one of the best, I got to give you that. Yet it isn’t that hard to create your own website app!

I created my own app with Appsgeyser. The problem was that they want some of the revenue & also had their own menu in my app. I don’t blame them for that of course, that’s how they get their money.

Anyway, I did some researching since I really wanted an app. I found out I couldn’t create an Iphone app on a windows device.

But with the Android Studio it was actually easier to create an ‘In-browser app’ to go to your Blog then I thought it would be.

This tutorial is for Android Apps only.


before we start

Before we start we going to need a few things.

install jdk

Now you’ve installed the Android Studio and Java Development kit we can start.


Change website into App… the start

Open Android studio and follow the screenshots.

Click on file > new > new Project.

new project

Give in an Application name, Company Domain, and Project location.
new project android studioSelect the form factors your app will run on.

The API 19: Android 4.4 (KitKat) is necessary to be able to create your app. minimum sdkYou can pick a ‘blank Activity’. The Adsense revenue you have on your blog will also be shown in the App. blank activityLeave the ‘Customize the Activity’ the way it is. It will be easier for you when you’re doing some research. main activity with menu


this was the easy part… now we’ve got some coding to do!

At the left of android studio you’ve got the content of your app.

From the Android Development page:

  1. src/main/java. Android Java source code.
  2. src/main/res. Resources used by the native application.
  3. src/main/res/drawable-type. Image resources used by the native application.
  4. src/main/res/layout. XML layout files that define the structure of UI components.
  5. src/main/res/values. Dimensions, strings, and other values that you might not want to hard-code in your application.
  6. src/main/AndroidManifest.xml. The manifest file defines what’s included in the application: activities, permissions, themes, and so on.

app content

Open the directories like I did. The AndroidManifest.xml, Mainactivity, and Activity_main.xml are the files we will be using.

Double click the files and click Select the ‘Text’ tab at the bottom of the of the activity_main.xml editor to see the XML markup.

In the XML pane, remove the self-closing slash from the end of the FrameLayout element, and add the <WebView> element and a new closing tag, as shown:

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

Here you can see how I did it:

activity_main_xml file

To use the WebView you need to reference it in the Activity. Open the MainActivity.java 

App > Java > Application name >  MainActivity.java 

Add the following lines:

private WebView mWebView;
mWebView = (WebView) findViewById(R.id.activity_main_webview);

Make sure you add them like I did: Private Webview mWebView; before the first @override

And add the mWebView = (WebView) findViewById (R.id.activity_main_webview); between the { } Like this:

    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);
 
    }

After adding the code, you’ll see some warning messages in the margin of the editor. This is because you haven’t imported the right classes for WebView. Luckily Android Studio can help you fill in the missing classes. The easiest way to do this is click and hover over an unknown class name and wait for a popup showing a “quick fix” — in this case, adding an import statment for the WebView class.

Remove the following line in the MainActivity.java 

//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
    return true;
}

This is how it should be now; Do not copy this! it will fail because it’s a differen project!

package com.baswijdenes.testproject;

import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;


public class MainActivity extends ActionBarActivity {

    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);

    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();



        return super.onOptionsItemSelected(item);
    }
}

WebViews don’t allow JavaScript by default. To run a web application in the web view, you need to explicitly enable JavaScript by adding the following lines to the onCreate method:

Add the following line to the MainActivity.java 

// Enable Javascript
WebSettings webSettings = mWebView.getSettings();
webSettings.setJavaScriptEnabled(true);

Your  MainActivity.java should be like this:

    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);

// Enable Javascript
        WebSettings webSettings = mWebView.getSettings();
        webSettings.setJavaScriptEnabled(true);

Oké we’re done with the  MainActivity.java file. go to the AndroidManifest.xml.

If you’re going to load data from a remote URL, your application needs permission to access the internet. This permission needs to be added in the application’s manifest file.

Here we only need to add  one line.

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

Add the line between </application> and </manifest> like this:

    </application>

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

</manifest>

The next step and last is to call the loadUrl method on the webview. Add the following line to the end of the MainActivity.java @override.

mWebView.loadUrl("https://www.baswijdenes.com/portfolio/");

Add it like this:

    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);
        mWebView.loadUrl("https://www.baswijdenes.com/portfolio/");

// Enable Javascript
        WebSettings webSettings = mWebView.getSettings();
        webSettings.setJavaScriptEnabled(true);

we’re done… or not.. do you use https with a 301 redirect? Stay tuned…

If your website is using http, please scroll to the next chapter.

If your website is using https with a 301 redirect the app will constantly ask you if you’d like to open the Smartphone browser.

Add this line to the MainActivity.java 

// Force links and redirects to open in the WebView instead of in a browser
mWebView.setWebViewClient(new WebViewClient());

Your MainActivity.java should look like this:

    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);
        mWebView.loadUrl("https://www.baswijdenes.com/portfolio/");

// Enable Javascript
        WebSettings webSettings = mWebView.getSettings();
        webSettings.setJavaScriptEnabled(true);


        // Force links and redirects to open in the WebView instead of in a browser
        mWebView.setWebViewClient(new WebViewClient());
    }

Lets continue.. adding an image to your app

You want your app to have a fancy image, don’t you?

Go to File > New > Image Asset

image assetThe Asset Studio speaks for itself, Click on the 3 dots and pick an image.

You can also play with the Additional Padding, Foreground Scaling, Shape, and background color.

asset studio


last but not least, lets generate an apk to upload to your google play development

If you did everything I told you to do, we don’t need to run your app and test it out, but if you still like to, click on Run > Run ‘App’.

Creating the APK goes as following

Click on build > Generate Signed APK

build app

If you click on ‘Create new’ first you can fill in the extra information for the ‘New Key Store’.

Generate Signed APK New Key Store

Don’t copy mine text tho..

Give in the master password one more time.

master password

Your APK file will be generated now and a network drive will be opened up.

Upload the ‘app-release.apk to the google play development.

Do not lose the keystore(jks) file! You cannot update your app if you don’t have this file!!

And of course I have generated an app as well find it in the Google Play Store!

Published by

Bas

My name is Bas Wijdenes and I'm working full time as a services engineer at Wortell. In my free time I like to write tutorials about computer problems I encounter on a daily basis. The main reason I started my blog is, because I wanted to work on my English vocabulary. If you've encountered a computer problem you can't get your head around, please do not hesitate to contact me.

4 thoughts on “TUTORIAL: Change website into App”

  1. its not working for me “Missing Gradle Project Information. Please check if the IDE successfully synchronized its state with the Gradle Project Model.” help me please

Leave a Reply

Your email address will not be published. Required fields are marked *