Tutorial – Android Float Label binding for Xamarin.Android

We all enjoy animated, seamless and, in some way, intriguing experience in mobile apps.

One of the patterns we recommend to follow is a UX pattern called “Float Label pattern”.

If you want to use it in your iOS application, check out this component or this (if you are using Xamarin.iOS, this one)

As for Android, there is one for Java-based applications but there is nothing you can use in Xamarin.Android

So lets’s build one or (better) reuse existing!

Float Label Pattern example

Float Label Pattern example

Step 1 – get sources

Clone the repo by running

git clone --recursive git@github.com:IanGClifton/AndroidFloatLabel.git

Step 2 – compile java project

After clone, do following in the terminal:

cd AndroidFloatLabel
./gradlew

For me this command produced several errors, for example:

FAILURE: Build failed with an exception.

* What went wrong:

A problem occurred configuring project ':FloatLabel'.

> Failed to notify project evaluation listener.

   > SDK location not found. Define location with sdk.dir in the local.properties file or with an ANDROID_HOME environment variable.

   > Cannot call getBootClasspath() before setTargetInfo() is called.

* Try:

Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.

BUILD FAILED

Regarding this one, you need to open Xamarin Studio, then use menu “About Xamarin Studio” and in the dialog press button “Show details”.

Look for Xamarin.Android section and you will find:

Xamarin.Android
Version: 5.1.0.113 (Business Edition)
Android SDK: /Users/theusername/Library/Developer/Xamarin/android-sdk-macosx

Next, go back to the terminal and execute

declare -x ANDROID_HOME="/Users/theusername/Library/Developer/Xamarin/android-sdk-macosx"

Running ./gradlew again showed me following:

* What went wrong:

A problem occurred configuring project ':FloatLabel'.

> Failed to notify project evaluation listener.

   > failed to find Build Tools revision 19.1.0

   > Cannot call getBootClasspath() before setTargetInfo() is called.

* Try:

Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.

BUILD FAILED

 

Now we have to install Android Build Tools 19.1. Do this from Xamarin Studio, menu Tools-> Open Android SDK Manager.

Make sure you check only that one package “Android SDK Build-tools” version 19.1, it’s right at the top of the list.

Screenshot 2015-04-20 16.24.38

Next try brought another error:

* What went wrong:

A problem occurred configuring project ':FloatLabelExample'.

> Could not resolve all dependencies for configuration ':FloatLabelExample:_debugCompile'.

   > Could not find com.android.support:support-v4:21.0.3.

     Searched in the following locations:

         https://repo1.maven.org/maven2/com/android/support/support-v4/21.0.3/support-v4-21.0.3.pom

         https://repo1.maven.org/maven2/com/android/support/support-v4/21.0.3/support-v4-21.0.3.jar

     Required by:

         com.iangclifton.android:FloatLabelExample:1.0.3

For building bindings we don’t need “FloatLabelExample” project, so we can open file settings.gradle and delete following line

include ':FloatLabelExample'

Save changes to the file, then run ./gradlew:

Welcome to Gradle 2.2.1.

To run a build, run gradlew  ...

To see a list of available tasks, run gradlew tasks

To see a list of command-line options, run gradlew --help

BUILD SUCCESSFUL

In order to get android library compliled in Release mode, you have to run actually ./gradlew assembleRelease.

This command will produce something like

:FloatLabel:compileLint
........................
:FloatLabel:bundleRelease UP-TO-DATE
:FloatLabel:assembleRelease UP-TO-DATE

BUILD SUCCESSFUL

File we need to proceed is the one in the folder  FloatLabel/build/outputs/aar and it's named FloatLabel-release.aar

Step 3 – Building the bindings for Xamarin.Android

There is a great tutorial is provided by Xamarin on binding Java libraries to Xamarin.Android.

In our case we don’t need to follow the tutorial, creating binding for FloatLabel is very simple.

First, create an Android Java Binding Library project.

Create an Android Java Binding Library project in Xamarin Studio

Then add FloatLabel-release.aar file from previous step to the folder Jars of that new project:

Adding .aar file to Java Bindings project

Done! Let’s do the final part and use that new control in our Xamarin.Android application.

Step 4 – using the control in Xamarin.Android app

Reference that new project in your Xamarin.Android application and use new control in layout:

Screenshot 2015-04-20 16.15.16

Run the app and voila!

Preview of control in Xamarin.Android app

(btw, runs very smooth on an emulator and device, it’s just gif recording is little bit jerky).

Summary

Using Java components in Xamarin.Android is often very easy. Don’t be afraid and build good UX for your lovely users. Feedback and downloads will follow!

Have a good day!