FORUMS

[Library] Floating Action Button from Android L on Kitkat and below

7,611 posts
Thanks Meter: 1,906
 
By Faiz Malkani, XDA Portal Team / Retired Forum Moderator on 3rd July 2014, 09:59 PM
Post Reply Email Thread
FABulous

So, Material Design is here and its beautiful. But wait. Its not here yet. And its not for everyone either. So while Google does its thing and squashes bugs and whatnot, why not give your pre-L apps a Material look? Making the ActionBar 56dp high is the most obvious way to go. But why not take it a step further and add the floating action button like the one that the Google+ app has? Too complicated? This library has got you covered. With just a few lines of code, FABulous allows you to add the button and customize its color and drawable too.




Download

https://github.com/FaizMalkani/FloatingActionButton




Instructions:
  1. Place the FAB in a FrameLayout and add your layouts above the FAB view. For best results, keep the FAB height and width at 72dp and in the bottom right of the FrameLayout

    Code:
     <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
          xmlns:tools="http://schemas.android.com/tools"
          android:layout_width="match_parent"
          android:layout_height="match_parent">
    
          <!--
    
                 Your layouts here. Do not put anything below the FAB layout
    
          -->        
    
         <com.faizmalkani.floatingactionbutton.sample.Fab
             android:id="@+id/fabbutton"
             android:layout_width="72dp"
             android:layout_height="72dp"
             android:layout_gravity="bottom|right"
             android:layout_marginBottom="16dp"
             android:layout_marginRight="16dp" />
    
     </FrameLayout>
  2. Initialize your FAB in your activity's onCreate()

    Code:
     Fab mFab = (Fab)findViewById(R.id.fabbutton);
  3. Initialize your FAB in your activity's onCreate()

    Fab mFab = (Fab)findViewById(R.id.fabbutton);
  4. If needed, call the other methods of the FAB

    Code:
     mFab.hideFab();
     mFab.showFab();
     mFab.setAlpha();
     mFab.setOnClickListener();
The Following 37 Users Say Thank You to Faiz Malkani For This Useful Post: [ View ] Gift Faiz Malkani Ad-Free
5th July 2014, 09:11 AM |#2  
behelit's Avatar
Senior Member
Flag Melbourne
Thanks Meter: 14
 
More
Nice one, what's holding this back from being used on pre jb devices?
Can Sherlock be used to solve some of the comparability dependencies?
14th July 2014, 10:53 AM |#3  
Quinny899's Avatar
Recognized Developer / Recognized Contributor
Flag Salford, Greater Manchester, UK
Thanks Meter: 7,010
 
Donate to Me
More
Hi @Faiz Malkani

I managed to backport this to 2.1+, sources are here:
https://github.com/Quinny898/Floatin...nButton-Compat

Here's what the sample project looks like (not included, it's the same + AppCompat, which is complicated to add):
The Following 5 Users Say Thank You to Quinny899 For This Useful Post: [ View ]
14th July 2014, 06:07 PM |#4  
Jeeko's Avatar
Senior Member
Thanks Meter: 7,369
 
Donate to Me
More
Thanks Faiz!
One question: it auto-hides while scrolling the page? (the sample app doesn't let me be sure of that)
The Following User Says Thank You to Jeeko For This Useful Post: [ View ] Gift Jeeko Ad-Free
14th July 2014, 07:27 PM |#5  
Quinny899's Avatar
Recognized Developer / Recognized Contributor
Flag Salford, Greater Manchester, UK
Thanks Meter: 7,010
 
Donate to Me
More
Quote:
Originally Posted by Jeeko

Thanks Faiz!
One question: it auto-hides while scrolling the page? (the sample app doesn't let me be sure of that)

You can do something like this, with a scrollview or a list view if you like:
http://android-ed.blogspot.co.uk/201...scrolling.html
Replace the setVisibility calls with show and hide though
The Following 3 Users Say Thank You to Quinny899 For This Useful Post: [ View ]
14th July 2014, 11:21 PM |#6  
Senior Member
Thanks Meter: 80
 
More
I don't know how Google came with this button but this app had it before them https://play.google.com/store/apps/d...droid.arvutaja
15th July 2014, 02:25 AM |#7  
Sahaab's Avatar
Senior Member
Flag London ON
Thanks Meter: 3,530
 
Donate to Me
More
Quote:
Originally Posted by Laur3nt1u

I don't know how Google came with this button but this app had it before them https://play.google.com/store/apps/d...droid.arvutaja

tho that button looks bad XD, google does copy a lot of stuff from different sources so dont worry bout it
15th July 2014, 07:03 AM |#8  
invaderjohn's Avatar
Senior Member
Thanks Meter: 432
 
More
Wink
this is probably a dumb question, but could somebody give me a easier tutorial on how to do this? i would really like to try it but i dont really understand how it should be done. im all new to android again after som years with crapple.

thanks in advanced
15th July 2014, 01:10 PM |#9  
ivan moreno's Avatar
Junior Member
Flag Murcia
Thanks Meter: 0
 
Donate to Me
More
Thumbs up
Thanks for the library, the sample apk looks great.

Importing in Android Studio (I tried many ways) I always have this error, looks like corrupted .png's

Someone else?

h**p://i.gyazo.com/2d17ddabae4e5502bd6fed109e788d68.png
15th July 2014, 09:04 PM |#10  
Faiz Malkani's Avatar
OP XDA Portal Team / Retired Forum Moderator
Flag Mumbai
Thanks Meter: 1,906
 
More
Try copying the FAB Class to your projects src.
Alternatively, if you can wait a few days, I'll be merging a pull request that adds Gradle support
The Following User Says Thank You to Faiz Malkani For This Useful Post: [ View ] Gift Faiz Malkani Ad-Free
16th July 2014, 06:55 AM |#11  
Pankaj Rai's Avatar
Senior Member
Flag mumbai
Thanks Meter: 381
 
Donate to Me
More
Quote:
Originally Posted by Quinny899

Hi @Faiz Malkani

I managed to backport this to 2.1+, sources are here:
https://github.com/Quinny898/Floatin...nButton-Compat

Here's what the sample project looks like (not included, it's the same + AppCompat, which is complicated to add):

great work
Post Reply Subscribe to Thread

Guest Quick Reply (no urls or BBcode)
Message:
Previous Thread Next Thread
Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes