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.

=> (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

https://github.com/clojure-android/lein-droid/wiki/Tutorial

https://github.com/krisc/events/blob/master/tutorial.md