Resource : Tab Widget

UI:

Android Tab Widget

Android Tab Widget

Advertisements

Android Application Design/Dev Basics : 1

Do check out Android UI guidelines and their notion of Applications, Activities & Tasks

Do read Hello World as well

Install Eclipse IDE, Android SDK Plugin for Eclipse

Here are some rough notes:

Android Dev

Android Dev

  • All images should be placed under Res > Drawable.
  • If multiple devices and resolutions are targetted, images should be placed in the corresponding hi/low/med dpi folders.
  • Layout is specified under Res > Layout
  • Manifest is an important config file that should not be renamed.

  • Application tag is used to specify that this is an application and not a service.
  • App name is set here
  • “Android: Icon” sends pointer to the the app icon, which should be placed in the Drawables under Resources
  • Pre-defined category “launcher” is used to launch the app when the app icon gets clicked.
  • Layouts may contain views and sub views.
  • Android vs iPhone : Front End Dev

    On Android phones, to set the initial page zoom level and disable the user controlled zoom, add the following code.

    meta name=”viewport” content=”width=device-width; initial-scale=1.3; minimum-scale=1.3; maximum-scale=1.3;”/. Ensure that the scale have a min value of 1.3

    For iPhone, add this code
    meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;”/

    AHAH!

    AHAH = Asynchronous HTML and HTTP is a subset of AJAX without the X(XML)

    • Update web pages dynamically using JavaScript and XHTML, instead of XML.
    • Like in AJAX, use XMLHTTP to raise a Request.
    • The state-change of the request when the Response is received is directly passed on to a Function.
    • The response is directly fed into the intended target element (Div) of the document using the innerHTML attribute of elements.
    • Unlike AJAX, the response is not parsed at the client side.
    • Technically, its a subset of AJAX without the X (XML)
    • Works when you dont change the content structure of the XMLHTTP response.
    • Doesn’t work when you call HTML files with external .css and .js files.
    • Code is very simple (about 20 lines)
    • Was first used couple of years ago.

    Sample Code to send a AHAH Request

    function ahah(url,target) {
    // native XMLHttpRequest object
    document.getElementById(target).innerHTML = ‘sending…’;
    if (window.XMLHttpRequest) {
    req = new XMLHttpRequest();
    req.onreadystatechange = function() {ahahDone(target);};
    req.open(“GET”, url, true);
    req.send(null);
    // IE/Windows ActiveX version
    } else if (window.ActiveXObject) {
    req = new ActiveXObject(“Microsoft.XMLHTTP”);
    if (req) {
    req.onreadystatechange = function() {ahahDone(target);};
    req.open(“GET”, url, true);
    req.send();
    }
    }
    }

    Sample Code to receive a AHAH Request

    function ahahDone(target) {
    // only if req is “loaded”
    if (req.readyState == 4) {
    // only if “OK”
    if (req.status == 200) {
    results = req.responseText;
    document.getElementById(target).innerHTML = results;
    } else {
    document.getElementById(target).innerHTML=”ahah error:n” +
    req.statusText;
    }
    }
    }

    Example

    How to load a HTML file into a Div

    Used an “onclick function” and successfully loaded a HTML file into a Div.

    JavaScript: onclick=function(){ var el=document.getElementById("x") el.innerHTML="iframe src=\"http://muthuonline.com/about_muthu\" >"

    Wish there was an easier method like having a src for a div.

    However had issues setting the iframe width. After getting this done, i was told that iframe kinda outdated. Next, i guess i have to do the inevitable…