Clojure Android Development

Clojure Dojo Liverpool - 2 September 2014

by Claudia Doppioslash

Overview

Tools

Lein droid

Neko

The wrapper for Android's Java API

A plugin for our trusty lein

"0.2.3"

"3.0.2"

Both developed by Alex Yakushev

Add to lein profiles.clj

Add to project.clj

Lein profiles

Add lein droid to your lein profiles:

{:user {:plugins [ [lein-droid "0.2.3"] ]

On unix-like systems the file is at 

~/.lein/profiles.clj

On Windows it should be at 

%USERPROFILE%\.lein\profiles.clj

Also the path to your Android sdk:

:android {:sdk-path "/path/to/androidsdk"}}}

Create new app

$ lein droid new AndroidClojureTutorial \
    com.doppioslash.androidtut \
    :activity Reader \
    :target-sdk 17 \
    :app-name AndroidClojureTutorial
com.doppioslash.androidtut

bundleID: a unique identifier for your app on the google play store

activities: units of functionality in android, roughly equivalent to views in ios

target sdk: the minimum version of the android os that the app will run on

app name: the name the app will show on the device home screen

Lein droid automatically added a whole bunch of things to the project.clj, including:

Project.clj

  • the newest version of Neko as a dependency
  • a release profile for Android
  • an android key for further options
  • the DEX options: since DEX for me crashes due to Out of memory I always uncomment the dex options.

Time to connect your device to the pc with the USB cable 

Whenever in doubt use DEBUG=1 before the lein droid command to see verbose output:

$ DEBUG=1 lein doall

Run REPL remotely on device

Use

$ lein droid doall


​to run the app on your device. The repl on the pc will execute the code on the actual device.

ADB troubleshooting

Setting up ADB for the first time might be troublesome. Some possible issues:

  • ADB can't find your device
  • ADB is not on the path

Connecting the REPL

If you have emacs with cider do M-x cider and answer 127.0.0.1 and 9999

Depending on what version of cider and cider nrepl you have there could be some trouble.

A lein repl :connect 9999 is the equivalent..

The code you're inputing is actually running on the Android device (magic! =))

So let's try to change the activity we see on screen.

Tip: minimal .emacs file that runs this project correctly (on Mac)

(require 'package)
(add-to-list 'package-archives
  '("melpa-stable" . "http://melpa-stable.milkbox.net/packages/") t)
(package-initialize)
(unless (package-installed-p 'clojure-mode)
  (package-refresh-contents)
  (package-install 'clojure-mode))
(unless (package-installed-p 'cider)
  (package-refresh-contents)
  (package-install 'cider))
(require 'cider)
(add-hook 'cider-mode-hook 'cider-turn-on-eldoc-mode)
(setq cider-repl-wrap-history t)
(add-hook 'cider-repl-mode-hook 'paredit-mode)
(setq nrepl-buffer-name-show-port t)
(setq cider-known-endpoints '(("android" "127.0.0.1" "9999"))) 

cider-nrepl

Add it to :plugins [[cider/cider-nrepl "0.7.0"]] in project.clj

=> (in-ns 'your-ns)

You can change the text in the text view, change the string and then C-x C-e on the ending parentesis of on-ui.

You should see it change it in real time on device.

A few Android programming concepts

Making layouts on Android looks like this:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical" >
    <TextView android:id="@+id/text"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text="Hello, I am a TextView" />
    <Button android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello, I am a Button" />
</LinearLayout>

Yes, it's as painful as it looks.

Luckily enough Neko makes it looks like this:

(def main-layout [:linear-layout {:orientation :vertical
                                 :id-holder true
                                 :def `mylayout}
                  [:edit-text {:hint "Write here",:id ::edit}]
                  [:button {:text "Add text" :on-click (fn [_](add-text))}]
                  [:text-view {:text @lines,:id ::articles}]])

No extra xml files sprinkled in a hundred directories,

easy map syntax.

Layout Types

  • Linear Layout
  • Relative Layout
  • ListView
  • GridView

We'll use linear layout, which:

"is a view group that aligns all children in a single direction, vertically or horizontally. You can specify the layout direction with the android:orientation attribute."

With Neko that would look like:

[:linear-layout {:orientation :vertical}]

Our first Layout

(declare ^android.widget.LinearLayout mylayout)



(def main-layout [:linear-layout {:orientation :vertical,
                                  :id-holder true
                                  :def `mylayout}])

an :id-holder flag

:def attribute

 

a forward declaration

(also for AOT compilation)

To access the layout by name we need:

(declare ^android.widget.LinearLayout mylayout)
(declare add-text)
(def lines  (atom ""))
(def main-layout [:linear-layout {:orientation :vertical
                                 :id-holder true
                                 :def `mylayout}
                  [:edit-text {:hint "Write here",:id ::edit}]
                  [:button {:text "Add text" :on-click (fn [_](add-text))}]
                  [:text-view {:text @lines,:id ::articles}]])

We'll use the neko.ui namespace which wraps the native android java api ui.

Let's make something useful

A basic text editor

...(make-ui main-layout)...

C-x C-e as before and it will show the new UI.

Helper functions

(defn get-elmt [elmt]
  (str (.getText (elmt (.getTag mylayout)))))

(defn set-elmt [elmt s]
  (on-ui (config (elmt (.getTag mylayout)) :text s)))

(defn update-ui []
  (set-elmt ::lines @lines)
  (set-elmt ::edit ""))

(defn add-text []
  (swap! lines str (get-elmt ::edit) "\n")
  (update-ui))

​

Result

Hopefully the basic editor works and you can see how interactive developing Android with Clojure is.

References

Clojure Android Development

By Claudia Doppioslash

Clojure Android Development

  • 4,173