Android Floating Action Button (aka FAB)

This year at Google I/O, Google pulled the curtain back on its new Android “L” Release. “L” introduces many exciting new features to both users and developers. One of the more noticeable features is the use of material design, Google’s new unified solution to design that adapts to many different devices.

Recently, I’ve been looking into some of the new design patterns within material design. I found that the new “Floating Action Button” or FAB for short could be a very valuable interaction to an apps user experience.

What is the Floating Action Button?

Floating action buttons (via Google) are:

“A special case of promoted actions. They are distinguished by a circled icon floating above the UI and have special motion behaviors, related to morphing, launching, and its transferring anchor point.”

The floating action button as seen in an email app.

Note: The floating action button should only represent the primary action in an application. More info and use cases of the FAB button can be found in Google’s official design specs found here.

Quick and Dirty Implementation

I wanted to come up with a quick way to add a very basic floating action button to our own Android applications, with support back to API 14 (Ice Cream Sandwich). I included a reveal/hide animation and a small amount of customization for the button.

Full Code in GitHub Gist (drop the class into your project):

While creating the button in xml, I found some difficulties positioning the view above the other views in the hierarchy (specifically NavDrawer). I decided to implement the button programmatically and go with a builder approach that would place the FAB above the other contents of the activity’s views when the call to .create() is made.

Great…How Do I Add it to My App?

Adding the FAB to your layout is fairly straightforward.

FloatingActionButton fabButton = new FloatingActionButton.Builder(this) 
    .withDrawable(yourDrawable) 
    .withButtonColor(Color.WHITE) 
    .withGravity(Gravity.BOTTOM | Gravity.RIGHT) 
    .withMargins(0, 0, 16, 16) 
    .create();

The button size can be modified by adding .withButtonSize(int size). By default this is set to 72dp.

Conclusion

The Floating Action Button is a nice interaction to add to your application and can really add some polish. It also looks like Google will be using this pattern in many of their own apps. There is still no word yet if Google will be adding an actual floating action button to the support library or if they will be backporting some of Android L’s view shadows and animation functionalities but for the time being feel free to use this. We at Prolific love creating brilliant interactions within our apps and the floating action button is one interaction that helps us engage our users.

  • John Hogan

Why we love Parcelable

I recently got into a discussion with a fellow Android developer about passing data between activities. He mentioned that he passes his models around by serializing them with gson. After having this discussion, I got curious and decided to explore and benchmark a few different serialization standards to see how they stack up.

The methodology for this experiment is largely based on a blog post by Philippe Breault. I used the same models and methodology so that I could expand upon his initial comparison.

Serializable
Incredibly easy to integrate into your application and requires no maintenance but it is memory intensive and very slow.

see code

  public class Developer implements Serializable {
    public String name;
    public int yearsOfExperience;
    public List skillSet;
    public float favoriteFloat;

    public static class Skill implements Serializable {
      public String name;
      public boolean programmingRelated;
    }
  }

Gson (Out of the box configuration + JsonSerializer + TypeAdapter)
Also very easy to integrate but is equally if not slower than serializable. You can optionally provide serializers and deserializers give gson an inexpensive way to work with your models. Using custom serializers and deserializers requires a bit of maintenance.

see code

  public static class Developer {
    public String name;
    public int yearsOfExperience;
    public List skillSet;
    public float favoriteFloat;

    public static class Skill {
      public String name;
      public boolean programmingRelated;
    }
  }

Parcelable
Extremely fast and efficient but requires maintenance.

see code

  public class Developer implements Parcelable {
    public String name;
    public int yearsOfExperience;
    public List skillSet;
    public float favoriteFloat;

    public Developer() {}

    public Developer(Parcel in) {
      name = in.readString();
      yearsOfExperience = in.readInt();
      skillSet = new ArrayList();
      in.readTypedList(skillSet, Skill.CREATOR);
      favoriteFloat = in.readFloat();
    }

    @Override public void writeToParcel(Parcel dest, int f) {
      dest.writeString(name);
      dest.writeInt(yearsOfExperience);
      dest.writeTypedList(skillSet);
      dest.writeFloat(favoriteFloat);
    }

    @Override public int describeContents() { return 0; }

    static final Creator CREATOR = new Creator() {
      @Override public Developer createFromParcel(Parcel in) { return new Developer(in); }

      @Override public Developer[] newArray(int size) { return new Developer[size]; }
    };

    public static class Skill implements Parcelable {
      public String name;
      public boolean programmingRelated;

      public Skill() {}

      public Skill(Parcel in) {
        name = in.readString();
        programmingRelated = (in.readInt() == 1);
      }

      @Override public void writeToParcel(Parcel dest, int f) {
        dest.writeString(name);
        dest.writeInt(programmingRelated ? 1 : 0);
      }

      @Override public int describeContents() { return 0; }

      static final Creator CREATOR = new Creator() {
        @Override public Skill createFromParcel(Parcel in) { return new Skill(in); }

        @Override public Skill[] newArray(int size) { return new Skill[size]; }
      };
    }
  }

Parceler An optional library that generates all of your parcelable models essentially giving you the benefits of parcelable without the overhead of maintaining it.

see code

  @Parcel public static class Developer {
    public String name;
    public int yearsOfExperience;
    public List skillSet;
    public float favoriteFloat;

    @Parcel public static class Skill implements
        Serializable {
      public String name;
      public boolean programmingRelated;
    }
  }

The Methodology (Same as Philippe Breault)
Loop over the serialization process 1000 times.
Do this 10 times to get a nice average.
Run on multiple devices using both dalvik and ART

Parcelable is clearly the fastest here. What actually surprised me was that gson is slower than serializable. The slowness is expected because it relies on reflection but I wasn’t expecting it to be slower than serializable.

Just to see what happened, I graphed the same tests but this time comparing dalvik to ART.

The one thing that we can take from this is that parcelable is clearly the fastest way to serialize your data. If you are looking to easily supercharge your app with the least amount of overhead, use parceler. We at Prolific love parcelables and encourage everyone to use them.

  • Ben Lee

Why we love SpriteKit

SpriteKit is an Apple framework originally designed for 2D video games, with a physics
engine, sprites, particles and sound effects. This framework, largely inspired by Cocos2D, is a great tool to design and create a game app. It is easy to use, the Apple documentation is (as usual) comprehensive, and you can find tons of tutorials on the internet.

If you want to learn more about how to create a video game with it, you can go to these tutorials from Ray Wenderlich:

  • SpriteKit Tutorial For Beginners
  • SpriteKit Space Shooter Tutorial
  • We all love games, but we decided to use SpriteKit to spice up one of our apps that’s intended for every day use, Foodtweeks.

    Foodtweeks helps people change the way they eat everyday by suggesting ways they can reduce calories from their meals without drastically changing what they eat. As an added incentive to help encourage removing calories, Foodtweeks will make a donation to food banks based on those calories. The amounts can add up over time and it can be fun to keep track of the results.

    We wanted to have something fun to reward users when they actually completed the tweek. The result is this:

    This final design is what we called the “Tetris Bag,” in which all the food is placed into a 3×5 grid. Each food item has a preset position and orientation chosen randomly with an algorithm, and is represented as a different sprite. The food texture is random, to make the user feel that the bag is dynamic and different every time. The animation we used is custom, based on a movement and a scale for the bounce effect. A sound is also played from SpriteKit as well.

    Why did we choose SpriteKit?

    There were some other options for this feature that we picked from:

  • Cocos2D – This is a great tool, but we didn’t want to add a large third party library just for this animation
  • UIView – The standard animations may have worked but are quite limited. They don’t provide the same physics engine as SpriteKit. They also don’t have a built-in, easy-to-use sound-effects system. And, if you want to animate a view with regular UIView animations, you have to do everything yourself. While with SpriteKit, you have methods to move, rotate and scale ready-to-use. So this framework was already too limited even when we were working on a prototype, because we could not create something really custom and different.
  • UIKit Dynamics – This new framework from Apple released with iOS 7 provides some interesting tools to play with UIViews (animations, small physics engine with gravity and collisions, etc.). Looking at the final result, we could have use this framework as well, but we had already started working with SpriteKit. However you should definitely consider using it for simple physics animations in your views. It’s very simple to create small animations, and you can find a lot of tutorials to create a simple app.
  • How We Built It

    At SpriteKit’s core it allows you to easily make an object, called Sprites, set properties on that object for how it moves on the screen, and then execute that movement.

    This is how you initialize the scene:

     // Configure the view. 
    SKView *skView = (SKView *)self.sceneView; 
    skView.showsFPS = NO; 
    skView.showsNodeCount = NO;
     
    // Create and configure the scene. 
    SKScene *scene = [[SKScene alloc] initWithSize:skView.frame.size];
    scene.delegate = self; 
    scene.scaleMode = SKSceneScaleModeAspectFill; 
    
    // Present the scene. 
    [skView presentScene:self.scene];
    

    This is how easy it is to move an object with SpriteKit:

    //First, create a sprite
    SKSpriteNode *food = [[SKSpriteNode alloc] initWithTexture:food_texture];
    
    //Then, create an action 
    SKAction *move = [SKAction moveTo:position duration:duration]; 
    
    //And finally you run the action 
    [food runAction:move];
    [self runAction:[SKAction playSoundFileNamed:soundName waitForCompletion:NO]];
    

    And this is how you can create a smooth bounce effect :

    CGFloat bounceDuration = 0.2f; 
    SKAction *resizeHeight = [SKAction resizeByWidth:0.0f height:40.0f duration:bounceDuration];
    SKAction *resizeAction = [SKAction sequence:@[resizeHeight, [resizeHeight reversedAction]]]; [self.brownBag runAction:resizeAction];
    

    And that’s it! You can also customize your actions, add bounce effects, pauses, scale, play with the alpha, etc. You can also create sound effects with just one line.

    The simplicity of this framework is that all of the physics, and animations are built in. You only have to pick which sort of movement you want your sprite to have, as opposed to having to do the math yourself.

    Our result is a cool feature with a lot of animations, a dynamic algorithm able to fill the bag with random food in random positions, sounds effects and a great user experience! With SpriteKit, the team was able to test different solutions very quickly and create a unique experience for the user, which is very valuable for all of our apps.

    • Thibault Klein

    10 Ways A WWDC Talk About Game Design Explains Other Apps Too

    A lot came out of WWDC, and even the fast-moving iOS development community will take a little while to incorporate all the new material into the culture of best practices. But one of the session videos I found most interesting was a little more high-level.

    The videos are all available here, and the material for the rest of this post is all from the talk Ingredients of Great Games with Geoff Stahl and Allan Schaffer.

    They start off by mentioning the massive success of games on the App Store, and the tools available in iOS, like SpriteKit, SceneKit, GameKit, etc.

    Then they go into some key elements that many games have in common. I think that many of these apply to Prolific’s new Friendwich game, but I also see helpful tips for all sorts of other apps in here too.

    As you read each of these, start from a perspective focusing on a mobile game, but then think how it could apply in a different sector like retail, news, education, etc.

    ————————-

    1. Remove Friction

    In the presentation, much attention is given to the user’s experience upon opening the app for the first time. Some games spend a long time loading assets right away, or make users create an account or allow permissions that are unexplained.

    That’s not fun at all! Instead, try to get your users in the game as fast as possible, then ask for the details once they have relevance. Try the steps in this post to more effectively explain and ask for permissions.

    Does your app bombard first-time users with boring steps like typing in email, etc., before they even fully understand what your app does? Or do you ask for permissions without explaining why?

    2. Be A Good Teacher

    Your app is a pattern, and you know it inside and out. But you’re the developer, you don’t count. When the user first opens it, they don’t see the pattern right away; all they see is noise.

    Good games cut through the noise step-by-step. Their “Level One” experiences are very simple, and then they introduce new concepts one at a time.

    Your app may be structured like other apps, so they might use navigation techniques already learned from other apps. We updated Friendwich with “coachmarks” to explicitly tell the user what to type, press, etc., and the game became easier to learn.

    Which one feature can you direct the user toward first, and which features can be held for later so the user is not overwhelmed by noise?

    coachmarks in action

    3. Tune Your Core Loop

    If a game ever stops engaging a player, they’ll simply stop playing it. There has to be an ongoing chain of actions, rewards, and expansion. As soon as the user’s understanding of your app moves from noise to an understood pattern, it starts to run the risk of being… BORING.

    Is there a way for your user to “beat the game” with your app, to the point at which they may not use it again?

    4. Design For Touch

    In a gaming context, many mobile games are ports from console or desktop. (My personal favorites are old SNES titles!) How can the controls be moved to a phone’s touchscreen?

    This is a pretty established issue with mobile app design vs. desktop web design. Is there a way your app is trying too hard to be “just like” a product for another platform?

    5. Foster Engagement

    A great way to keep your users from “beating the game” with an app is to constantly introduce fresh content and hold the user’s interest every step of the way.

    Is there something you can do to encourage your users to return to your app to see what’s new?

    6. Background Transfers

    Gamers especially may be used to a lot of loading bars greeting them at every level. The rest of your app is designed so tightly– it doesn’t make sense to let all that care go to waste by then forcing your user to do nothing.

    What sort of caching or asynchronous operations could you introduce to the app to reduce loading times?

    7. Optimize Graphics Performance

    There are a lot of tools to use for game graphics that don’t necessarily apply to non-game apps, but things like SpriteKit are so easy to use that you can make fun interactive interfaces with little effort.

    Meanwhile, concepts like a clean frame rate (60 frames per second!) apply to more usual app features like tables or collection views.

    Could you use SpriteKit to make your app more fun? Is your frame rate high at all times?

    8. Make a Good Preview Video

    Your user’s experience actually starts even before the first time they open the app– it starts on the App Store! Here are some tips on making good screenshots.

    And in iOS 8, you can include short videos of your app in the App Store! Use this ability to show the correct usage of your app.

    Have you included the App Store description, screenshots, and video in your app design?

    9. Localize

    From the App Store to the game content itself, it’s important to localize your content as much as possible!

    Even if your app is going to be in one language region, using NSLocalizedString is a good practice to keep all strings shown in the UI in one place (something Android already does in its strings.xml).

    Are you using NSLocalizedString for your UI strings? Are you proactively translating store entries and other assets?

    10. Target the State of the Art

    This is pretty clear– use the latest tools for the job! There is a point at which certain new things are just trendy and not of substance, so evaluate any new tools accordingly.

    Are you using legacy or deprecated tools for which a clearly better solution exists?

    ————————-

    Hopefully, these questions have helped you reflect on your app development!

    • Matt Luedke

    iOS 8 Preview

    With the release of iOS 8, developers have 4,000 new APIs that will enable a wide range of innovative features and functionalities. Here are a few that we’re excited about for our partners:

    Notification Center
    Widgets have finally arrived. Provide value to your users by giving them personalized information that’s actionable without having to open the app. Think about displaying a top featured product with the ability to add it to the user’s cart or touch to purchase it from the notification center. The notification center will also be available on your Mac to make it even easier to take action if your phone is in your pocket and you’re stationed at your computer.

    Touch ID
    Now, apps will have the “touch to buy” option. Imagine making express checkout even faster with the ability to scan your fingerprint and complete your purchase. This also gives apps the ability to lower the barrier to sign in or sign up for a user account. (We all know how big a pain that is.)

    Custom Actions
    The ability to create custom actions from other apps unlocks new kinds of potential. If a user is browsing your mobile site after being redirected from an email, she can now add to her cart or wishlist within the safari app — no switching required.

    Get a full overview of iOS 8 here: https://www.apple.com/ios/ios8/.

    Learn more about the latest developer features in iOS 8 here: https://www.apple.com/ios/ios8/developer/.