Categories Site Actions X

Creating a simple web app for Android (Part 1)

Posted on Monday, March 26th, 2012 in Uncategorized by Nick

In today’s tutorial, we will be making a web app for Android devices. The sample app will be for a restaurant called Veggies and will list information about the restaurant, a menu, and contact info.

What You Will Be Making:

 

Step 1: Included Files and Information

Step 2: HTML Framework:


The header contains the action bar with the app logo being floated left and the app navigation buttons floated right. In this case there are 3 navigation buttons. Your tabs (or pages) are located in the content div.

Step 3: CSS
body{ margin:0; padding:0; background:#FFF; font-family:'RobotoRegular', Courier New; font-color:#000; }
#header{ display:block; margin:0px; width:100%; height:65px; background:url(images/header.png) repeat; }
#header div.logo{ display:inline; float:left; margin-left:20px; padding-top:15px; width:92px; height:33px; }
#header div.nav{ display:inline; float:right; height:65px; }
#header div.nav ul{ margin:0; padding:0; list-style:none; height:65px; }
#header div.nav li{ display:inline; float:right; padding:20px 15px 0px 15px; height:45px; border-left:solid 1px #e2f0b6; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); }
#content{ display:block; clear:both; margin-top:20px; height:0px; width:100%; }
#content div.home{ display:block; padding-left:20px; }
#content div.list{ display:block; padding-left:20px; }
#content div.list ul{ margin:0; padding:0; list-style:none; }
#content div.list li{ margin-top:20px; }
#content div.contact{ display:block; padding-left:20px; }
.overthrow-enabled .overthrow { overflow: auto; -webkit-overflow-scrolling: touch; }

Nothing to difficult there. However, you’ll notice that the content height is set at 0px. We will be using javascript to set the height since Overthrow.js needs a set height.

Step 3: Javascript
$(document).ready(function() {
$('#content').children().hide();
$('#content div.home').show();
$('#header div.nav li').click(function() {
$('#content').children().hide();
var tab = $(this).attr("tab");
tab = '#content div.' + tab;
$(tab).show();
});
$('#header div.logo').click(function() {
$('#content').children().hide();
$('#content div.home').show();
});
var pageH = $("body").height();
pageH = pageH - '85';
$('#content').css('height',pageH);
$('.overthrow-enabled').css('height',pageH);
});

First off, every child div of content is hidden (all your tabs will be hidden) expect for the home div. If the user presses on any of the navigation buttons, it will open up the said tab (gets it from the tab attribute). If a user clicks on the logo, it will show the home tab. Lastly, it finds the page height, subtracts by 85px (the action bar is 65px and 20px for the margin), and then sets the content height and overthrow height.

Step 4: Final Code 


Veggies



Veggie is the new, hip place to get new and old American classics like our signature Veggie Supreme burger or the 2lb steak loaded with veggies and A1 sauce.
Prices and items subject to change

  • Veggie Supreme, $5.99
  • Veggie Supreme, $5.99
  • Veggie Supreme, $5.99
  • Veggie Supreme, $5.99
  • Veggie Supreme, $5.99
  • Veggie Supreme, $5.99
  • Veggie Supreme, $5.99
  • Veggie Supreme, $5.99
  • Veggie Supreme, $5.99
You can contact Veggies by either calling us or by visiting us

Phone: (123)-456-7890
Address: Some Place, State AreaCode
Hours: Mon thru Fri: 9 A.M - 10 P.M. | Sat & Sun: 11 A.M. - 10:00 P.M.


In the next article we will discuss how to do the native webview client

Leave a Reply

Join the forum to add your own thoughts!