How to create a Browser app

Hello guys, in this tutorial I will show you how to create a browser app like UC Browser etc. So before I get started, I am making this app with Makeroid but you can also create this app with Thunkable and Appybuilder. So now let’s get started.

First you need to create a new project and I named it TSBrowser. So now to look your app beautiful and attractive design a Splash Screen. To design a splash screen first add a new screen, named as Screen2 (which is main screen). After splash screen time over it will go to Screen2, that’s why you have to create a new screen. So now to create a splash screen drag and drop clock (from Sensor) and drag and drop image if you want to show an image logo of you app to the splash screen (it looks your app more professional) or you may drag and drop a Label (from user interface) to write your app name (I did this as an example). Now, click on Screen1 from Components and design your splash screen. Now click on Clock1 from Components and set timer interval to 3000(ms) or as you want. Now go to Blocks and create blocks

when Screen1 initialize

do {set Clock1. Timer Enabled to (true)}

 

when Clock1 timer

do{set Clock1 Timer Enabled to (false)}

{open another screen screenName(Screen2)}

Now blocks are ready. Now let’s create main page, that is the browser.

Now go to Screen2 and here you have to create a lots of blocks (not a lot). First design Screen2 as you want and drag and drop a vertical arrangement from Layout and rename it as main_arrangement and set width as fill parent and height as automatic. Now you have to create an url input box to go to a website. So drag and drop a horizontal arrangement from Layout and set height as automatic and width as fill parent. Now drag and drop a Text Box from User Interface into horizontal arrangement named Text_Box1 and set height automatic and width fill parent and at Hint type enter url here. Now drag and drop a button from User Interface into horizontal arrangement and rename it as go_btn and set height as automatic and width as 30 percent. Now drag and drop Space arrangement from Layout, below the horizontal arrangement to make some space and set height as 2 percent.

Now if you want add some social links like UC Browser’s home page then drag and drop a Table Arrangement from Layout named Table_Arrangement1 after the space. Now set Table arrangement’s column to 3 and rows to 2 and height as automatic and width as fill parent and add six buttons. First row has 3 buttons and second row has also 3. Set all buttons width as 30 or 33 percent and height as automatic. Now rename all buttons’ text as social websites like Google, Facebook, Twitter, Youtube etc. and rename buttons as google_btn, fb_btn, twitter_btn, yt_btn etc. Remember, all the things should be in the main_arrangement.

Now to show web page, drag and drop a new vertical arrangement and rename it as web_arrangement after the main_arrangment done. Now set web_arrangement‘s height as 100 percent and width as fill parent. Now drag and drop a horizontal arrangement into it and add 3 buttons, back button (<–), Home button and Forward button (–>). Now after this add Web viewer from user interface and set height and width as fill parent. Now set web_arrangement as invisible (untick the visible option) and go to blocks.

(before invisible)

 

Now the blocks are little big so I’m adding images except writing.

First create this blocks for main_arrngements. And also here you can see only 2 social links, but you have to repeat this block for all social button you created

 

And this is for the web_arrangement

 

Now the Browser app is completed. I am giving you the aia file of this project, so you can modify it and you can add ads to this app and earn from this app.

One thought on “How to create a Browser app

Leave a Reply

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