Home



My own basic Android Web app project


General info

Terms of use

Project steps

Commercial offer - (mainly) for non-programmers

General info

This is an Android Studio project for a practically usable basic Android Web app.
A full-fledged but basic Android Web browser app is one that provides minimal Web surfing starting from a given page (that's hard-coded into the app). Minimal surfing means just that, it's just one app window that shows the current page, which changes when links are pressed. There's also the standard Android back button, plus the standard Android touch-screen functions like zoom in / out, moving the page in the window, keyboard typing when an edit box is tapped etc. . And that's about it. Specifically, no additional browser windows or tabs, no history (other than said standard back button).
You can see exactly what I'm talking about by looking at my own 12-hour world clock app which you can find
here.


This project, as well as my own app, are based on a sample project from the Google Chrome development site, which can be found here.
Like the original project above, this project is also available under the CC-By 3.0 license.
The original project above is not intended to result in a practically usable app. On the contrary, mine does just that. To that end, I added 2 basic features that were missing in the original project, namely standard zoom support and a way to refresh the current page. See details below.
Other than that, besides some minor details and corrections all I did for version 1 was bring it to date, that is make it work under the current Android Studio version, which at the time (december 2016) was 2.2.2 .
As said, this was all that was needed for version 1, which was a full-fledged basic Web app and just that. In the meantime I wrote version 2, which adds the option to be placed on the Android lock screen. But it can still be used as a model for a basic Web app, especially since by default the show on lock screen option is unchecked.

Terms of use

Important: All this is on an as is basis. While I'm reasonably confident there aren't many errors in this project, probably close to none, in the programming world there are no guarantees. You use the project at your own risk. I'm in no way liable for any loss or problem you might have because of it. If you don't agree with this, you may not use the project.
(Main reasons for why I'm reasonably sure there aren't many errors in the project: 1. It's very small. The app is basically just an Android link to a website, practically all functionality of such a program is on the site. It's a light version of a cloud program, which is so trendy these days. 2.
My own 12-hour world clock app is more or less based on this project; at the time I'm writing this it's about 2 months old and seems to be working just fine. But, as I said, I make no guarantees.)

Project steps

Like the original sample project from Google mentioned above, this project doesn't contain any actual project archive or code sample files. It consists of an instruction list of how to set up an Android Studio 2.2.2 project for a minimal but practically usable Web app. The few snippets of code that are involved in it are hard-coded into the instructions list, you'll have to copy-paste them into the actual Studio project files.
I still like to use the term "project" for all this, and think it's appropriate, because it's very detailed and complete. In the end, by following it, you'll have a minimal Web app that, with a few tweaks, is ready to be entered into the Android Play store.

This project is intended to be used by people with practically no knowledge as Android developers, but with a general programming background.
If you run into problems: After double-checking that you read, understood and executed correctly what you're supposed to do, try a Web search for your problem first. That's what I did with the model project from Google, and I can say it generally works.
In any case, whether you think you found an error in the instructions or that the configuration of your PC is such that these don't work, I'd like to know about it
here. If you haven't found a solution to your problem, I might be able to help you. If you did find a solution, I'd still like to know about it. Please first search the blog entry comments to make sure nobody reported the same problem before.

  1. It's recommended that you have at least 2G of RAM on your machine. Also, about 10G of free space on the system volume. (That is, after you install Android Studio, if you don't already have it; if you're scarce with disk space on the system volume, you should probably install Studio on another volume.) I did it under much worse conditions, 1G of RAM and about 4G free on C: . It worked, but I had to be very patient.
    I worked under Windows 7 32 bit.
    Tip: If you're like me and don't have 2G or more of RAM, there's one thing you can do to make Studio a good bit faster. (Aside from, of course, closing any program that's not absolutely needed.) Change the Aero theme with a simpler and more efficient one, like Windows 7 classic. (That's if you're on Windows 7. I see now that Aero doesn't exist any more in Win 8 or later. Something similar might be useful in these OSs too, as well as on the Mac, I don't know.)
     
  2. If you don't have it already, install the latest Android Studio version from here.
    If you have an older version, it's strongly recommended that you update it.
    This project is tested under version 2.2.2 of Studio. Now, if you have a newer version, of course you shouldn't roll back to 2.2.2 . It will probably work under the newer version too, with maybe some minor issues. That's not to say that it's not possible that in a newer version serious problems occur. They might. If that's the case, a possible last-resort option is to indeed find Studio 2.2.2 and install it. But it should be used only as last-resort; especially if the app is to be used commercially, it's strongly recommended to be built with a Studio version close to the current one.
     
  3. Even with 2G of RAM and enough space on the system drive, the Studio is still Java so it's very slow.
    In my experience, the first compilation / Gradle sync and build took about 45 minutes. Under normal circumstances it's probably faster but you can expect 1/4 to 1/2 an hour. Subsequent builds usually take a few minutes, at most 10.
    (Gradle, if you're not familiar with Android Studio, is the name of their build utility. Similar to Make in MS development tools. When you open a project, a Gradle sync and then a build start automatically.)
    If you notice that Studio seems to have stopped working in the background for some time, like 10 minutes, but it shows that it's still working (but the status bar indication doesn't change), the thing to try first is to close the project and open it again. This will usually solve the problem. Otherwise, try closing Studio (from Task manager if necessary) and reopen it. If it still hangs, try restarting your system. Also, Clean project (from the Build menu) often fixes such situations.
    Another thing to do is to look at Studio's info. There are 2 tabs on the lower bar, at the right: Event Log and Gradle Console. Event log is what its name suggests, it lists the main build events with their times. Gradle console is also kind of an event log, but much more detailed and with inside info from the build process. If there are errors and exceptions in the various build programs, you will find them here with some accompanying info. This is not always very to-the-point but it's worth a close look, many times it's helpful. And anyway, even if you aren't very sure what to do with it, Google is your friend.
    Anyway, you are also welcome on my blog discussion about this topic (as indicated above). I've listed there a few problems I've had myself, with the solutions I've found. In time it might become more informative if others contribute to it.
     
  4. And now to the actual development steps.
    Open Android Studio and start a new project.
     
  5. It will ask for an application name and a company domain.
    The company domain is used to build the package name (as you can see in the Studio window), which is intended to be a string to uniquely identify your app, if for instance you want to send it to Google Play. Generally, an app will be developed by a company that owns (at least) a Net domain, so this way the identifier string based on it has a good chance of being unique (and if it's not, then that's probably someone else's fault, not of the company who owns the domain.)
    If you're about to write a Web app that points to a site, it's probably a good idea to use that site's URL (without the http:// part) as the company domain. Unless of course you want to point to a site that's not yours, but that would be strange; if that's so, you'll have to figure out for yourself what to use as company domain in Studio.
     
  6. The next screen asks for the target Android devices.
    My app is built only for phones and tablets. You can of course choose other devices too, but I don't know how that works, you could get errors. I'd recommend to build your app first just for phones and tablets, see that it works, then go back and add other devices if you need to.
    Also, it asks for the minimum supported SDK. I used 4.4 (KitKat), that's API 19. You can use whatever you think, but other versions, especially older ones, could bring you troubles I didn't have. Again, it might be a good idea to use 4.4 at first, then after making it work like this, modify it to your actual target.
     
  7. The next screen prompts you to add an activity. Leave the default in place, that's an empty activity.
    (As the guys from Google explained in their sample project: "An Android Activity can be viewed as a screen of an app. In this case, the application's main activity will hold the web view. If you're planning to venture further into native Android development, you can find more information in the Android Activities API guide.")
     
  8. The next screen wants you to customize the activity. Again, leave all defaults in place.
     
  9. Now press Finish to create the new project.
    Immediately after that, Gradle sync and afterwards Gradle build are executed automatically. As I said at begin of these instructions, this could take a lot of time, so go have a cup of coffee or something.
    (At this point, it might happen that Studio hangs. If it does, see point 3 above.)
    If you have Windows 32 bit, like I do, in all likelihood it will crash and indicate the error 216. (Unless the problem has been fixed in the meantime.) If that's the case, don't go for a cup of coffee since it will finish much quicker.
    You'll also get error 216 if you have too few RAM, usually 1G. Also, you might get it for other reasons, these are the only ones I know (I had them both).
    If you do get this error, the message will say "CreateProcess error=216, This version of %1 is not compatible with the version of Windows you're running." followed by some meaningless details. (Unless they improved it in the meantime.) As you can see, not very helpful.
    Fortunately, other people had the same problem before. You can see it in detail here.
    Answer no.2, of Siva Prakash, did it for me. But note that:
    You only need to change the JDK if you have Windows 32 bit.
    You only need to decrease the memory usage of Gradle if you have less than 2G of RAM, otherwise it should work fine.
    You need to install a JDK (and Java) if you don't already have them. If you have a lower version, you might need to update to JDK 1.8, as the first answer says. Or maybe not. I had 1.8 from the start so I don't know.
     
  10. At this point you should have everything in place.
    It will probably start Gradle sync and then Gradle build by itself. If it doesn't, or if it takes a lot of time, go see point 3. above for basic troubleshooting steps.
    After it finishes the build, try building the APK as it is at this point (an empty debug app), just to check everything works fine. You do this from the Build menu / Build APK. (Somewhat confusingly, Gradle build doesn't actually build the app.)
     
  11. Open the project view if it's not already open. You do this by pressing Alt + 1.
    After this you should see something very similar to this.
    From the 3 panes in the picture, the top left one is the project pane, where you can navigate your project structure.
    Go to the original Google project here if you want to see some explanations about the main structure and files of the project. Search the page for "project's structure". They're a bit old but largely still valid (and they said they could update the project at some point). There will also be some differences.
     
  12. To add the Webview:
    Double-click the activity_main.xml file to open it. You find it in the project pane, under app / src / main / res / layout.
    Press the Text tab at the bottom of the file pane.
    Insert the following XML code for the Webview element
    <WebView
        android:id="@+id/activity_main_webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    immediately before the </RelativeLayout> tag (the closing tag of the RelativeLayout element) at the end of the file. (You can leave some whitespace there to make it more readable.)
    Double-click the MainActivity class to open it. You find it in the project pane, under app / src / main / java.
    Add the lines shown in green:
    public class MainActivity extends AppCompatActivity {
        
        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);
    The code editor will signal an error, that the WebView class you just put there is not known in that context. That's because the needed import statement is missing (to indicate the namespace for the WebView class). The editor will at the same time make a suggestion, that you actually want to use the android.webkit.WebView class. Which you do. So, just accept the suggestion by pressing Alt + Enter (Option + Enter on Mac).
     
  13. These are the main lines of code for the WebView object (in the Java class and in the resource XML file). But a few other additional lines are needed.

    In the same onCreate method:

    After the mWebView creation line you just added, insert the following code:
        // Enable Javascript
        WebSettings webSettings = mWebView.getSettings();
        webSettings.setJavaScriptEnabled(true);
    
        // Enable zoom support
        webSettings.setBuiltInZoomControls(true);
        webSettings.setSupportZoom(true);
    
        // Force links and redirects to open in the WebView instead of in a browser
        mWebView.setWebViewClient(new WebViewClient());
    
        mWebView.loadUrl("http://www.google.com");
    As the comments say:
    The first group of 2 lines is for enabling JavaScript in your app. This is not done by default, for security reasons (to help you write code as secure as possible). You can omit these 2 lines if you're absolutely sure you'll never want your app to use JavaScript. Unfortunately, that's going to be very rare; normally you'll want to have them.
    The second group of 2 lines is for enabling standard (multi-touch) zoom support.
    The third group, of just 1 line, is for letting your app navigate as it normally should. For some strange reason, by default the WebView class opens links you press in the default external browser, instead of in the same app window. You fix this by adding the line shown above.
    Finally, the last line opens the start page of your app. I chose for this sample a neutral page; you will of course put there the actual page from which you want your app to start navigation.
    Again, the editor will likely make you some suggestions to import some classes you just used (to indicate the namespace of each), and you will accept them.
     
  14. To be able to navigate the Internet, your app must request permission from the system (which in turn requests it from the user, when it installs the app). You do that by adding a line in the AndroidManifest.xml file.
    Double-click this file, which you find under app / src / main, to open it.
    Insert the following line before the closing </manifest> tag:
    <uses-permission android:name="android.permission.INTERNET" />
  15. At this point you should have a Web app which lacks some basic functionality but still is something that can be tested and shown to do something useful. It's a good time to build the app and test it, to see what you have so far.
    Build again your app, by pressing Build APK in the Build menu.
    If everything works fine, you find the APK file in the app\build\outputs\apk subdirectory of your project directory. It should be called app-debug.apk (anyway, the extension is definitely .apk, the name might be different).
     
  16. There are basically 2 ways to test the APK: either on a physical device, if you have one available (which you should), or in an emulator.
    To test it on a physical device, the device needs to run a version of Android of at least 4.4 (KitKat). Or the one that you've indicated as the minimum supported SDK, if it's a different one.
    If you have it, it's pretty simple. Connect it to your computer with a standard USB-to-mini-USB cable.
    After a short time, a volume corresponding to the device will appear in your "My Computer" folder. (Assuming you're on Windows; something similar should happen on a Mac too.)
    Open that volume and choose a directory on it. Copy the APK file into that directory.
    On the device, open the File Manager app. Open the directory you put the APK in and tap on the APK file.
    It should offer to install it.
    At some point Android will warn you that the app is from a non-standard source (that is, not from Google Play) and there are risks in installing such apps. Of course you will tell it to go on with the installation. Important: be sure to allow Android to virus-test any app installed from alternative sources, if you haven't done that already.
     
  17. If everything works fine, you should now have an app installed that, when opened, displays the start page you've given it in the source file. Pressing on links should open them into the same app window. You also should be able to zoom in and out of any page in the standard way (as you normally would in a browser; some pages have limitations as to how much you can zoom into them) and move the pages around by touching and dragging them.
     
  18. Even if you did successfully test the app on a physical device, it's probably a good idea to test it in an emulator too. (You can leave this for later, of course.)
    I'm not going to give detailed instructions here as to how to do this. Main reason, it so happened that for testing my own app I used an emulator from the 0.3.2 version of Studio. Now, I'm not going to ask you to do the same, nor do I have the time to do a new testing in a 2.2.2 emulator (especially on my low-resource system). So I'm not sure how well my way of testing works in 2.2.2 . You can use the Android Studio help and the Web to find info, which is generally plentiful.
     
  19. Another dysfunctionality the WebView class has by default (as you might have noticed while testing your app) is the way it handles the Android back button. It closes the app and returns control to the OS, regardless how many links you've pressed since you've opened the app. Normally you'll want the Android back button to act like a browser back button, go back to the previous page.
    To do this, you need to change the way your app handles the Android back button.
    Add the following code in the MainActivity class, just after the onCreate method:
        @Override
        public void onBackPressed() {
            if(mWebView.canGoBack()) {
                mWebView.goBack();
            } else {
                super.onBackPressed();
            }
        }
    At this point you should have a functional Web app (which doesn't yet have a way to refresh the current page, but we'll add that in the next few steps).
     
  20. The final touch, adding a way to refresh the current page.
    I found that the best way is via a menu item. I like it better than a refresh button, because it's not visible, it's hidden in the app menu that only comes to light when you tap on it. It should be fairly rare that the current page has to be refreshed, so it's better that the GUI item that does it is usually hidden. Besides, of course, it's also easier to write.
    You have to do 2 things:
    First, add an XML file for the menu item. Go to the app\src\main\res subdirectory of your project directory. Add a subdirectory named "menu" to it. In it, create a main.xml file.
    The path of this file should be:
      <project dir>\app\src\main\res\menu\main.xml
    In this newly created file, which now is empty, enter the following content:
      <menu xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        tools:context=".MainActivity" >
        
          <item android:id="@+id/action_refresh"
            android:title="Refresh"
            android:orderInCategory="100"
            android:showAsAction="never" />
      </menu>
  21. Second, add the following 2 functions at the end of the MainActivity class (right after the onBackPressed method you added before):
        @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) {
            // 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.
            switch (item.getItemId()) {
                case R.id.action_refresh:
                    mWebView.loadUrl( "javascript:window.location.reload(true)" );
                    return true;
            }
            return super.onOptionsItemSelected(item);
        }
    (As usual, accept the editor's import suggestions.)
    Now you should have a fully functional minimal Web app with everything it needs.
     
  22. This concludes the main goal of this project. But the app you now have, though it's fully functional, is not yet ready to be put to Google Play. Even if it's not my purpose to show how to write such an app, I will give here some general indications.
     
  23. What you have is a debug app. You need a signed release app. It has to be signed, else Android won't install it.
    The reason why you didn't have to sign your debug app but could still install it, in case you're wondering, is that Studio automatically signs any debug app with a standard certificate. It doesn't do so with release apps. (That's one of the reasons you need a release app, and in case of a minimal Web app like this one it's probably the only reason. You want your app to show that it's developed by you. Otherwise you could have just used the debug version, the performance hit wouldn't have mattered for such a light app.)
    To build a release app, you go to the Build menu / Select build variant and select release. Then build the app again.
    The new app will be created in the same folder as the debug app.
     
  24. For instructions on signing your app, see the Android Studio online help page.
    Before testing your signed release app, you'll have to uninstall the debug app if there is one on the same device (or even emulator). That's because otherwise there's a signature mismatch, since the debug version appears to be the same app but has the standard debug signature.
     
  25. Now you should have an APK file that's ready to be published to Google Play.
    That's not to say you're done with it. Publishing an app is a rather lengthy and, shall I say, lightly difficult process. It should take you a few days to 1 - 2 weeks to do it right. You'll need to read and accept online agreements, create some text descriptions and sample images. You'll also need to add personalized icons to your app, you don't want it to show the standard Android icon. And a few other things. I won't tell you how all this is done, you're on your own from here. Just a tiny hint: start reading here.
    Good luck.
     
  26. If you read this up to this point and maybe found it useful, you're welcome to tell me about it here. Also, as I said before, if you have any kind of feedback about it.

Commercial offer

In addition to my project which as said I share freely, but you must be a programmer to be able to use it, I'm making to anybody in the world an offer to write a basic Android Web app based on the page of your choice. It will be similar to mine, except of course for the actual start page, name, icons, and other things that personalize the app. But you can see exactly what I'm talking about by looking at my own app which you can find here.

Details about the offer can be found here.



 

Copyright 2016-17 Vlad Simionescu