Today, I will tell you, How we can make Android Mobile In Html, Css and JavaScript.

Android Mobile in a browser? 

yes, Android Mobile in Browser! you might be thinking what is he talking about ?

Let me Explain you, We will make a simple Android Mobile prototype in Html,Css and JavaScript. In which we are going to make layout of Menu, Notification Panel and Home Screen.

It will look like this,

Android Layout CodeparadoxI will not delay too much Let’s start,

Home Screen 

Home screen is going to be the First Screen which will appear in a browser,

In Home Screen, there will be a notification panel which will be allocated at the top of the screen and in it we will show time.

Some Useful apps like call, contacts, message app etc in the bottom and below we will add two buttons  back and menu.

I took wallpaper from Wall Bucket App,  where you can find amazing wallpapers, which you can download from play Store and  developer of Wall Bucket App,  write blogs about Android Development you can check this out. visit TheDynamicProgrammer.info

Html

Notification Bar :

Drawer Apps:

 

Bottom Panel:

Lets add Css on it.

Css

Container which will contain the Screen

Notification bar which will be at top of the screen.

 

Time which will be appear in notification bar

Now lets prettify our Wallpaper.

 

Bottom Panel which will be allocated at the bottom of the screen.

Drawer apps which will be allocated just little above the bottom panel.

JavaScript

Add Time in Notification bar.

Reset Everything after click on the wallpaper.

Reset Everything after Click on the Back Button.

 

Output :

Android Layout Codeparadox

 


 

Notification Panel

This panel contains the wifi button, DND , hotspot etc. which we can access after clicking the notification bar.

HTML

 

 

Css

JavaScript

Handling the events after click on the Notification Panel.

Output :

Android Mobile codeparadox

 

Menu 

Menu Screen holds the Menu Apps.

HTML

Css

 

JavaScript

Output:

Android Mobile codeparadox

You can check the App in codepen, try to view in Desktop full view for good experience.

Desktop View check this out in codepen.

 

 

See the Pen Android Mobile Prototype by Suraj Sharma (@codeparadox) on CodePen.

 

We can add new features in this project like Lock screen, make layout for your favorite apps which we can access by their icons in menu  etc etc. we can use Jquery where we can add animations and transition instead of vanilla JavaScript.

 

 


Suraj Sharma

Developer who never forgets semicolon.

Leave a Reply

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

%d bloggers like this: