Android for the web developer

Oh, hi there, I just noticed you there. Wathche doin? Working on JavaScript? Cool. What am I doing? Oh, just some stuff you wouldn’t be interested in. Honestly, I feel a little awkward talking about it. No you can’t see. DON’T LOOK NO DON’T.

ALRIGHT I’M WRITING JAVA OKAY!?

Are you happy now? I’m writing an app in Java. Java 6. Yes, from like a thousand years go, with Factories upon Factories upon Factories. Why? Cuz that’s what you do when you want to write an Android app. Here, let me show you.

Android for the web developer. (Part 1?)

Getting started

Can I use vim/emacs?

You can, but don’t punish yourself. Use Android Studio until you get comfy.

Okay, it’s installed, now what? Do I need a device?

Technically no, but if you want to stay sane, yes.

Does it have MVC?

Kinda, sorta. Remember the days before Ember and Backbone.js? When all you had was a big slimy ball of jQuery and everything seemed to glom itself together? Welcome back.

This jQuery metaphor has got legs, let’s run with it.

HTML => XML

On the web, we have HTML, it looks like this:

<!doctype html>
<html>
    <head><title>meow</title></head>
    <body>
        <p id=”oh_hi_there”></p>
    </body>
</html>

In Android, we have something similar for describing view layouts. This time it’s in XML:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_weight="match_parent"
    android:layout_height="match_parent">

 <TextView
    android:id="@+id/oh_hi_there"
    android:layout_weight="match_parent"
    android:layout_height="wrap_content" />

</LinearLayout>

More verbose, sure, but not so bad right?

CSS => styles.xml

In CSS, we declare styles and apply them to selectors:

<style type="text/css">
  #oh_hi_there {
      color: red;
  }
</style>

<p id="oh_hi_there">I'm red n stuff.</p>

In Android, it’s backwards, we define styles that the views will reference.

<resources>
    <style name="we_dont_have_selectors">
        <item name="android:textColor">#F00</item>
    </style>
</resources>

<TextView
    android:layout_weight="match_parent"
    android:layout_height="wrap_content"
    style="@styles/we_dont_have_selectors"
    android:text="I'm also red, n stuff." />

JavaScript => Java

It’s all similar, just less flexible and more verbose.

var foo = new Foo(); // JavaScript
Foo foo = new Foo(); // Java

Setting text dynamically:

// JavaScript
var view = document.getElementById("oh_hi_there");
view.textContent = "that was easy.";
// Java
TextView view = (TextView) findViewById(R.id.oh_hi_there);
view.setText("that was... something.");

Adding a click handler

In JavaScript we have anonymous functions for working with callbacks. In Java, we have anonymous classes that match an interface:

// JavaScript
view.on("click", function() {
  causeAHugeMemoryLeak();
});
// Java
view.setOnClickListener(new View.OnClickListener() {
 @Override
  public void onClick(View v) {
   causeAHugeMemoryLeak();
 }
});

There are 3 things that you need to learn immediately and accept.

  1. You must only do fast, drawing related work on the “Main” or “UI” thread.
  2. In order to do this you must learn at least a little about Threads and Threading.
  3. Many of tools that the framework gives you are broken and filled with lies.

More on that next time!