Float Frame Layout Example

Android App Polishing – FloatFrameLayout is a Simple way to Polish Android Apps

A couple of weeks ago, Chril Mottier posted some neat animation examples on how he polished his current Android project Capitaine Train.  A little after this Chris Banes shared a gist with example code on how to do this exact effect.  Apparently this is Chril’s code but for some odd reason he couldn’t share it?

 

Floating Label Layout Example

This code inspired me to create another example for app polishing called FloatFrameLayout.  The concept is based off of how FloatLabelLayout was created so if you understand that code, this will be super easy for you.  If both are new from you, no problem… you should be able to use this code very easy.  This example is just one little way of using this code but could be used for Android App Polishing for any views of choice!  Code could easily be tweaked to something different as well.

 

Float Frame Layout Example

Example Layout

The main idea behind these examples is how the views are added to the window.  Here is how FloatFrameLayout calls the animation frames:

FloatFrameLayout’s addView

Take note that when I addView I search the child’s parent to see if its a LinearLayout.  This is so inside the frame you can group multiple views (TextView’s for example) and have them animated together.  Each child view will animate one after another to provide a nice “friction free” animation effect.

The animation effect itself is a slide and fade animated together using nine old android library for backwards compatibility.  I created some attributes so you can control the duration of the slide and fade seratally.  By default I have the slide set to 1000 and the fade to 900.  Slightly different values here provides a smoother transition IMO.

Attributes to Modify

Animation Code

Even if you don’t use this particular example you may be able to at least get something out of the animation code itself.  Here is an example of using multiple ObjectAnimator’s and in my case, which use nine old androids from Jake Wharton

 

If you need anything more explained please comment below and I would be more than happy to expand the post in more detail.  As always you can Fork Me and grab the full code example.  Extra bonus I provided the inspiration project that is from Chyril Motter’s code.  Please do yourself a favor and check out his personal blog too!  It’s a fabulous resource of knowledge.

FloatFrameLayout

FloatLabelLayout

  • http://geeznblogged.wordpress.com sud007

    Flaot label I used once recently, but layout is awesome!

    • http://codeversed.com/ Steve Albright

      If you have any good ideas to expand this let me know. I may do some listview examples in the near future but in theory you could do a lot with what’s already here.

      • http://geeznblogged.wordpress.com sud007

        Absolutely!