Making an Android App is not as difficult as you think, especially when you are making a WebView Application, which is what I'll be teaching you.

The best about this tutorial is, you don’t need a Laptop or Desktop device to participate. In fact, what this article is going to teach is: How I made an Android web app that looks more than just a web app with the use of a tool called Sketchware.

What is Sketchware?

Sketchware is an integrated development environment (IDE) inspired by the language Scratch, which allows you to develop, compile, and build an Android application directly on your smartphone, without any help from a PC. This is Application is just like the Android version of Android Studio, lol, and the best thing about it is that you don’t need any coding knowledge to be able to develop good stuff.

This tool is potential, and it was the only thing I used in making my first App which is currently on Google Play Store, you can view my App in the Google Play Store here >> AYO BLOG.

Sketchware lets you build mobile apps using lego-like blocks that look more like LEGO blocks. Block language lets you go beyond prebuilt widgets, allowing your application to be flexible and scalable. From design to programming, you can create a completely native Android application by simply drag and dropping

Creating A Simple Webview App from Scratch with Sketchware

Please before going any further, make sure you have downloaded and installed Sketchware on your mobile device, if you haven’t, you can get it through this link.

We have to first create the application and make sure it’s fully functional before we try adding any Ads. This is will make it easier for you to debug any errors you face.

So open the Sketchware and create a new project.

The next page is the one where you would see options to set your Application Name, Toolbar Color, AppIcon, Project Name and Package Name (you can learn more about these credentials here, click this link)

Now you will arrive at the main page of the newly created project.

Preparing the layout and design of the App’s homepages in Sketchware

So it’s time for us to make a simple homepage for the Application. The homepage is only going to show the Categories of the Blog (Remember: I am making a “Blog” (website) App), so I already have some images prepared;

So, go back to Sketchware and open your newly created project. In your screen, locate the ScrollV, drag it and drop.

Click that Width in the image and Make it match_parent.

And locate Padding in your screen, tap it and change the figure to 0. Now right from you collected the ScrollV, look closely, you’ll see a Linear(v), drag it on drop on your screen and set it both it’s height and width to match parent and also set it’s Padding to 0.

Now gradually, drag and drop, 4 Linear(H) in the previously inserted LinearV, after done it will look like this:

After this is done, insert two ImageViews in each of the LinearH. This ImageView will be used to display our Images and make them clickable.

Note: To make our Images perfect, it needs to aligned in the center, to ensure this, tap on each LinearH, tap on it’s gravity and tick center_horinzontal and center_vertical.

Now it’s time to insert images in the ImageView, you can acheive by….see the screenshot below :).

Now select the specific image for that ImageView, I’ll repeat that step for all the ImageView and this is the final result:

Now we have to change the Background Colour of the ScrollV. This is to make everything in the app match together.

So just select the ScrollV.

Click on “See All” and then, click on “Background Colour”

Now in the Background Colour Page, you can select any colour you want, I personally is gonna blue so it can match with the Category Images.

Bingo!

Now we done with the App’s Homepage design, you can see for that it wasn’t that hard?. We are gonna move to forward now to the Activity.java of the Homepage, this is the field where you can define the functions of the application.

Programming the MainActivity.java (Function of the Homepage)

Now it’s time to program how the main functions of the application. We just have to modify the onCreate Activity of the App and the onClicked event for all the Categories images we previously inserted.

So, we start by clicking on Events as seen in your screen.

And then Go to MoreBlock > Shared MoreBlocks and search for Actionbar Subtitle.

So import the MoreBlock into the App and head back to add it to the onCreate event of that Activity.

The result:

Easy as it sounds, we are done the onActivity of the homepage, we are going to move forward to the onClicked event of the category images.

Go to Views and click on the “+” button on the bottom of your screen.

Select all the Images which you’ll like to tag an action and add them..

Now we are going to:

• Create an Intent Component (Don’t know what Intent is? Read this)
• Set some specific data that will passed over to the next activity whenever the Image is clicked.
• Let’s go

Quick Reminder: We are an App for a Blog!.

We previously inserted Images for each category in that Blog. Now we are going to add an action that will happen whenever the image is clicked, stayed tuned!

Now, let me explain. We first insert a block:

The work of the first and second block is save a data for easy transfer between activity. What we are going to save with those is the Category link that will be loaded in the Content Page and the second one is the title of the category.

Don’t worry, I’ll still show you how to retrieve the data in any Activity you want.

Now put those block in the onClicked Event of all the Images, the only thing that needs to be modified for each Category Image is the value of Intent Key –  “pagetitle” and “link“.

For example, the previous screenshot was for the Entertainment Category, this one is for Themes:

And that’s all concerning the MainActivity.java, now we are going to create a content page where all the links can be loaded.

Creating a Second Activity as a content area for the Application 

This one, we are gonna do step by step;

• Creating the Content Layout
• Adding Events to the Webview for better performance
• Adding multiple Activity Events: OnCreate and onBackButtonPressed

But before proceeding, just make sure you have created another Activity / View, see how to do it below:

Creating the Content Layout

This step is plain easy – just insert a ProgressBar and Webview and we done.

Adding Events to the Webview for better performance

In this step, we are going to add an Event for when the Webview starts the loading the url and when it finishes loading.

Go to Events > Views > Add new, and select Webview onPageStarted and onPageFinished. Add this in the onPageStarted event:

And then, add this to the onPageFinished event:

That little piece of work will make the Progress at visible only when the Webpage is loading.

Adding multiple Activity Events: OnCreate and onBackButtonPressed

This is part where we can use data from the previous activity. This data is we are going to use for the title of the page and the content. Remember the Intent data we previously set? :

Take a note of the keys which we will use to recall the value.

Open the onActivity create of this Main2Activity.java and input the following blocks below:

Here is what that piece of blocks is gonna do:

1. Collect the value for Intent Key – “pagetitle” and set it as the ActivityTitle.
2. Collect the url from the value of the Intent Key – “link” and load it in the Webview.
3. Make the progressbar invisible at the initial start up of the Activity.

And that it’s for that. Now we move to the onBackPressed event, kindly add the following blocks:-

That will check if the Webview can go back to it’s previous webpage and if it can’t, the Activity will be terminated. But it works when the back button is pressed.

Now we are done with the Content Area (Main2Activity), maybe we can test it. Check our results below:

You can see for yourself that it works perfectly.

[Optional] Creating a Flash/Splash Screen for the Application

Splash Screen is most commonly the first startup screen which appears when App is opened. In other words, it is a simple constant screen for a fixed amount of time which is used to display the company logo, name, advertising content etc.

Normally it shows when app is first time launched on android device or it may be some kind of process that is used to show screen to user just before the app loads completely.

If you want to add it to your application, just follow these steps.

Step 1: Create a new view & Activity

Step 2: Design the layout to your taste, this is mine:

Step 3: Add an OnCreate event to the Activity

Step 4: Modify the On Activity Create of the App’s Homepage

And that’s all about adding Splash Screen in Sketchware.

Easy way to Integrate Admob Ads to the Application in Sketchware (Banner and Interstitial Ads)

I know this is the part of this tutorial you might find interesting. Adding Admobs Ads in Sketchware is way easier than you can ever imagine.

Make sure you have Firebase set up in your application. Here are the steps to add Firebase in your project.

Next you need to sign up for an AdMob account. If you don’t have an AdSense account, you will need to create it before creating an AdMob account. Here are all the possible cases to create AdSense and AdMob account.

Follow the steps in the below image to add your Ad unit ID in Sketchware:

Banner Ads in Sketchware

We are gonna add a Banner Ad in the content area (Second Activity). This is how we do it:

Basically what we did there is to add an Adview in the layout and call it to load in the Activity PostCreate event (when the Activity has fully started).

Interstitial Ads

The case of Interstitial Ads is different.

In compliance to Admob policies, we can only use Interstitial Ads when the user navigates between different Activities. So we are going to display the Interstitial Ads once – on the Activity PostCreate event!

This image will help you understand how to add an Interstitial Ad to Sketchware:-

This is an overview on how we added the Interstitial to the App (inline with the above image): 

• We created a Interstitial Ad component.
• We added a block to immediately display the Ad once it is loaded. This was added in the in the onAdLoaded event of the Interstitial Ad component.
• We added blocks to make the Interstitial Ad to create and load, in the onActivityPostCreate event.

This is pretty much everything you need to know about how we added Ads to the Android application.

Wrapping it Up

Now I’m sure this tutorial helped you learned how we can add or integrate Google AdMob ads in our android applications to generate revenue online. People this days thinks that Android apps development is tough and not easy to learn, but that’s not true. What you truly need is time and dedication, then you can acheive anything.

Please if you think tutorial was useful and helpful, do not hesitate to send it to your various friends. And if you ever feel lost in any part of the article, do no hesitate to use the comment section to get to us and we will be happy to solve all of your problems.