Arnaud Camus

A Tale of Two Platforms: Keeping Android & iOS in Sync

Fri, 16 Mar 2018 00:00:00 +0000

Over its 4 first years, Impraise’s mobile applications have grown with various updates, refactoring and feature changes. While being a young startup allowed us to “move fast and break things”, we grew to a stage where we had to invest more on testing, stability and future proof implementations. We evaluated the pros and cons of various architectures & frameworks, for both our Android and iOS applications.

Our goal was to find an Architecture: – Easily testable and maintainable – Easily adaptable to Android and iOS – Adoptable without massive refactoring needed – With an unidirectional flow of events

We adopted Clean Swift as a base for our iOS architecture, and adapted it to Android. In this talk, I share with Guilherme, our lead mobile developer, the similarities and differences of our implementations, as well as their advantages and drawbacks.

The video is hosted on Vimeo by Appdevcon .

Building mobile sign up flows @ Droidcon Berlin

Wed, 10 Jun 2015 00:00:00 +0000

Last week I went to Berlin to attempt to #DroidconDe where I gave my first public talk. It was a great experience, slightly stressful but I got some good feedback afterward. And eh, I love to receive feedback.

This year the event was really well organized and 3 of the 4 stages were recorded and you can find all talks on the Droidcon Berlin youtube channel.

Here’s my talk, entitled Build a Sign up flow that doesn’t suck with tips to improve your sign up and login screens on Android.

Many good talks have been given during this 2 days conference, here’s a small collection of presentation I liked:

The Cognitive Abilities of the Human Mind - Janne Jul Jensen (UX)
Dismantling droids for breakfast - Siegfried Rasthofer (Security / Reverse-engineering)
Recyclerview to the rescue - Brett Duncavage (Dev)
Layout traversals on Android - Lucas Rocha (Dev)
Android @ Dropbox - Aakash Kambuj (Dev / PM)
Kotlin: the swift of Android - Svetlana Isakova (Dev)

Combining Glide and Stetho to easily debug your image loading system

Sun, 10 May 2015 00:00:00 +0000

Downloading, managing and displaying efficiently images on Android can be a difficult task. Luckily, libraries like Glide or Picasso made it really handy for any developer. While they both are really easy to implement and integrate perfectly within the Activity and Fragment lifecyle; Glide proposes also a killing feature: letting the developer choose his network stack.

On its side, Stetho is an Android debug bridge tool which bring View hierarchy, Network & DB inspection and more into your Chrome Developer Tools. It is really handy and comes almost for free in terms of implementation. (Here’s a good tutorial to only use it with your Debug builds)

So we have 2 good libraries, and both of them support OkHttp as a networking client.

Now let’s see how can we combine them to see every HTTP requests from Glide into your Developer Tools.

1. Setting up the Network inspection via Stetho

First, in your gradle file you should have:

debugCompile 'com.facebook.stetho:stetho:1.1.0'
debugCompile 'com.facebook.stetho:stetho-okhttp:1.1.0'

Then in your Application class you enable the webkit inspector:

Stetho.initialize(Stetho.newInitializerBuilder(context) .enableWebKitInspector(Stetho.defaultInspectorModulesProvider(context)) .build()); You finally just need to add a StethoInterceptor to your OkHttpClient and ta-daaa!

OkHttpClient okClient = new OkHttpClient(); okClient.networkInterceptors().add(new StethoInterceptor());

2. Configuring Glide to use OkHttp and Stetho

Glide provides also a basic GlideModule to directly use OkHttp. I recommend you to read how to integrate it directly in their page.

But this is not enough to make it work. The OkHttpGlideModule does not allow you to configure the OkHttpClient. You do need to compile the okhttp-integration library but you will have to create your own GlideModule.

public class StethoOkHttpGlideModule  implements GlideModule {
    @Override
    public void applyOptions(Context context, GlideBuilder builder) { }

    @Override
    public void registerComponents(Context context, Glide glide) {
        OkHttpClient client = new OkHttpClient();
        client.networkInterceptors().add(new StethoInterceptor());
        glide.register(GlideUrl.class, InputStream.class, new OkHttpUrlLoader.Factory(client));
    }
}

And do not forget to reference you module in your AndroidManifest.xml file:

 <meta-data android:name="utils.glide.StethoOkHttpGlideModule"
            android:value="GlideModule" />

3. Try it!

Material design, extended Toolbar and scrolling

Mon, 23 Feb 2015 00:00:00 +0000

OBSELETE: With the Design Support Library announced during IO15 comes the CollapsingToolbarLayout which is much more powerful, elegant and easier to use. Use it!

The ToolBar is a widget introduced by Google through the app-compat version 21 last fall. It basically replaces the good old ActionBar and bring much more controls on it. Styling and customisation is also much easier because you directly integrate the ToolBar into your view hierarchy, giving you all the benefits of the View class.

One issue with this extended version of the action bar is the height it can takes on the screen. And collapsing the toolbar’s content while scrolling a list is tricky.

Objectives:

Fade out the white text when we start scrolling and display the toolbar’s title. Reverse it when the we scroll up to the top. Make the Floating Action Button follow the edge of the header. Support properly the elevation on Lollipop.

TL;DR: The whole source code is available on my github.

First step, from a layout perspective, it is pretty simple and straight forward: I use a ToolBar, a ListView and a Floating Action Button:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
xmlns:fab="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:elevation="4dp"
    android:background="?attr/colorPrimary"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>

<ListView
    android:id="@+id/listview"
    android:layout_below="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>


<com.getbase.floatingactionbutton.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/favorite"
    android:layout_alignBottom="@+id/toolbar"
    android:layout_alignParentRight="true"
    android:layout_alignParentEnd="true"
    android:layout_marginRight="8dp"
    android:layout_marginEnd="8dp"
    android:elevation="8dp"
    android:layout_marginBottom="-32dp"
    fab:fab_icon="@drawable/ic_favorite_outline_white_24dp"
    fab:fab_colorNormal="@color/accent"
    fab:fab_size="mini"
    />
</RelativeLayout>

Then, I use another layout containing the header’s TextViews. I inflate it in my Activity and attach it to the ListView using mListView.addHeaderView(view);.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="4dp"
android:background="?attr/colorPrimary">
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/container"
    android:orientation="vertical"
    android:paddingLeft="16dp"
    android:paddingRight="16dp"
    android:paddingBottom="16dp" >

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="@color/icons"
        android:textSize="24sp"
        android:text="@string/title"/>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:textColor="@color/icons"
        android:textSize="14sp"
        android:text="@string/description"/>

</LinearLayout>
</FrameLayout>

To react on the scroll event, we need to listen to the AbsListView.OnScrollListener. In the method onScroll. we simply check if the top position of the first list item visible and if it is the item #0. Finally, if its Y position is more than -16dp, we display the header’s content and hide the ActionBar’s title. Otherwise, it is the opposite.

if (view != null && view.getChildCount() > 0 && firstVisibleItem == 0) {
    if (view.getChildAt(0).getTop() < -dpToPx(16)) {
        toggleHeader(false, false);
    } else {
        toggleHeader(true, true);
    }
}

The toggleHeader function is shown below. It starts an ObjectAnimator controlling the alpha property from the current opacity and toggle the visibility of the title.

private void toggleHeader(boolean visible, boolean force) {
if ((force && visible) || (visible && mContainerHeader.getAlpha() == 0f)) {
    fade.setFloatValues(mContainerHeader.getAlpha(), 1f);
    fade.start();
} else if (force || (!visible && mContainerHeader.getAlpha() == 1f)){
    fade.setFloatValues(mContainerHeader.getAlpha(), 0f);
    fade.start();
}
// Toggle the visibility of the title.
if (getSupportActionBar() != null) {
    getSupportActionBar().setDisplayShowTitleEnabled(!visible);
}
}

To polish the effect, you can coordinate the ToolBar and headerView’s elevation and update the Y position of the FAB so it always follow the edge of our header. Here’s a last snippet of code to do so:

public void onScroll(AbsListView view,
                    int firstVisibleItem,
                    int visibleItemCount,
                    int totalItemCount) {
   if (view != null && view.getChildCount() > 0 && firstVisibleItem == 0) {
       int translation = view.getChildAt(0).getHeight() + view.getChildAt(0).getTop();
       mFab.setTranslationY(translation>0  ? translation : 0);
   }

   if (isLollipop()) {
       if (firstVisibleItem == 0) {
           mToolbar.setElevation(0);
       } else {
           mToolbar.setElevation(dpToPx(4));
       }
   }
}

And this is the result:

Open Sourcing the Droidcon Netherlands app

Sun, 30 Nov 2014 00:00:00 +0000

Droidcon is a global developer conference series which takes place every year in a dozen of different cities around the world. The quality of the talks is really impressive, every time I go to one of these events I learn a lot on various technical and design points.

This year, I had the chance to make the conference app for the Dutch edition. Droidcon NL took place in Amsterdam between the 23rd and 25th of November.

The application

The goal of this app was not to be the best conference app ever but a simple and easy to use application. I chose to follow the Material Design guidelines which give a really nice look & feel, and allows doing some nice effects really efficiently.

The app lists the schedule in the home screen, and you can get more information for each conference, such as the description, location and speaker. I also implemented a simple Floating Action Button to favorite a talk, this simply highlights it on the main screen.

The source code

During the event, I talked to many people about the app, and besides some tips for improvement, few developers asked me if the source code will be available. So I decided to clean it, refactor a few classes and here we go. You can browse / fork / download the source code from my github. It’s released under Apache v2 license.

The app

If you just want to try it, the application is still available on the Google Play, maybe I will update it for next year ;)

3 ways Gradle can help in your daily work

Wed, 15 Oct 2014 00:00:00 +0000

This post is the first one of a small series of tips to optimize your development environment. And to start from the beginning, why not talking about our dear friend Gradle?

Here I will show you 3 easy customizations that make your daily life easier. I will explain you how to:

Create multiples Build Variants
Auto-increment your app’s version code and name after a build release
Sign your application from a configuration file or from a prompt

Create multiples Build Variants

Gradle allows you to easily manage build variants. These ones are composed by a build type (Debug, Release) and product flavor you have created. Different product flavors can be used to build a free and pro version of your application, or different APKs according to the Android version, for example.

I use these build variants to create different APKs for my applications in development and release mode. The apps have a different applicationId, different resources such as the launcher and the app name (helpful to know which variant you are using). They also connect to different web services and log the errors to the console or send them to Crashlytics, according to the flavor.

In your build.gradle:

    android {
      productFlavors {
        prod {
            applicationId "com.example.myapplication"
        }
        staging {
          applicationId "com.example.myapplication.dev"
        }
      }
    }

Once your project has been synced in Android Studio, you will be able to choose the Build Variant on the bottom right of your IDE.

Don’t forget to create your prod/ and staging/ sub-folders in order to compile different source code and resources into your APK.

Auto-increment your app’s version code and name

In order to not forget to increment the versionCode attribute in my AndroidManifest.xml before submitting an app on the Play Store, I have found and adapted the following solution to handle it automatically after each Release build.

To do so, first, include on the top of your build.gradle file the following import:

import java.util.regex.Pattern

Then, copy this task and read the comment to understand it!

task('increaseVersionCodeRelease') << { //create a new task
    def manifestFile = rootProject.file("app/src/main/AndroidManifest.xml") //locate your Manifest
    def manifestText = manifestFile.getText() //get the file's content
    //search for the current versionCode
    def pattern = Pattern.compile("versionCode=\"(\\d+)\"")
    def matcher = pattern.matcher(manifestText)
    matcher.find()
    // increment it and update the file
    def versionCode = Integer.parseInt(matcher.group(1)) +1
    def manifestContent = matcher.replaceAll("versionCode=\"" + versionCode + "\"")
    manifestFile.write(manifestContent)
    // get the new content
    manifestText = manifestFile.getText()

    // search for the current versionName
    def pattern2 = Pattern.compile("versionName=\"(\\d+).(\\d+).(\\d+)\"") //I use Semantic Versioning
    def matcher2 = pattern2.matcher(manifestText)
    matcher2.find()
    def versionCodeName = Integer.parseInt(matcher2.group(1))
    def versionCodeName2 = Integer.parseInt(matcher2.group(2))
    // increment it and update the file
    def versionCodeName3 = Integer.parseInt(matcher2.group(3)) +1
    def manifestContent2 = matcher2.replaceAll("versionName=\"" + versionCodeName +"." + versionCodeName2 +"." + versionCodeName3 + "\"")
    manifestFile.write(manifestContent2)
}

In order to get this task executed when the ProdRelease build processes, add this:

tasks.whenTaskAdded { task ->
    if (task.name == 'assembleProdRelease') {
        task.dependsOn 'increaseVersionCodeRelease'
    }
}

Note: It only increments the latest number of the version and you could create another flavor with its own task to increment the first number of the version, when you are building a new major release.

Sign your application from a configuration file or from a prompt

There are many ways to sign your application APK. And I will describe below 2 of them. The first one uses a configuration file. Create a file containing the following:

storeFile=/path_to_your/keystore
storePassword=p@ss
keyAlias=MyAliasName
keyPassword=p@ssw0rd

And then add this in your build.gradle.

signingConfigs {
release {
    def propsFile = rootProject.file('app/keys.properties')
    def props = new Properties()
    props.load(new FileInputStream(propsFile))

    storeFile file(props['storeFile'])
    storePassword props['storePassword']
    keyAlias props['keyAlias']
    keyPassword props['keyPassword']
}
}

Note that in this example my configuration file is named keys.properties and located into the app sub-directory.

If you don’t want your password to be saved in a file, another solution is ask the user to input it from the console:

signingConfigs {
  release {
     storeFile file(System.console().readLine("\nEnter keystore path:"))
     storePassword System.console().readLine("\nEnter keystore password:")
     keyAlias System.console().readLine("\nEnter key alias: ")
     keyPassword System.console().readLine("\nEnter key password:")
  }
}

If you want to learn more about Gradle you can read the official guide. Do you have some other tips to share? Feel free to comment below!