Attend XDA's Second Annual Developer Conference, XDA:DevCon 2014!
5,730,444 Members 44,122 Now Online
XDA Developers Android and Mobile Development Forum

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

Tip us?
 
Faiz Malkani
Old
#1  
Faiz Malkani's Avatar
Forum Moderator / XDA Portal Team - OP
Thanks Meter 1807
Posts: 7,518
Join Date: Feb 2012
Location: Mumbai
Default [Library] Floating Action Button from Android L on Kitkat and below

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 22 Users Say Thank You to Faiz Malkani For This Useful Post: [ Click to Expand ]
 
behelit
Old
#2  
behelit's Avatar
Senior Member
Thanks Meter 11
Posts: 221
Join Date: Sep 2008
Location: Melbourne
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?
 
Quinny899
Old
(Last edited by Quinny899; 15th July 2014 at 08:51 AM.)
#3  
Quinny899's Avatar
Recognized Contributor
Thanks Meter 3825
Posts: 6,213
Join Date: Jan 2011
Location: Bolton le Sands, Near Lancaster, UK

 
DONATE TO ME
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):

 
Devices:
Nexus 5
Galaxy Nexus
Nexus 7 FHD
Archos 80 G9
LG GT540
The Following 2 Users Say Thank You to Quinny899 For This Useful Post: [ Click to Expand ]
 
Jeeko
Old
#4  
Jeeko's Avatar
Senior Member
Thanks Meter 6062
Posts: 654
Join Date: Feb 2013

 
DONATE TO ME
Thanks Faiz!
One question: it auto-hides while scrolling the page? (the sample app doesn't let me be sure of that)
Everything borns from passion.

Samsung Galaxy S II I9105P - Developer - PureSeries™Admin

Now Browser, the lightest browser on the market, MATERIAL DESIGNED, Now Browser Engine (170kb)
Thread // Play Store link
 
Quinny899
Old
#5  
Quinny899's Avatar
Recognized Contributor
Thanks Meter 3825
Posts: 6,213
Join Date: Jan 2011
Location: Bolton le Sands, Near Lancaster, UK

 
DONATE TO ME
Quote:
Originally Posted by Jeeko View Post
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

 
Devices:
Nexus 5
Galaxy Nexus
Nexus 7 FHD
Archos 80 G9
LG GT540
The Following 2 Users Say Thank You to Quinny899 For This Useful Post: [ Click to Expand ]
 
Laur3nt1u
Old
#6  
Senior Member
Thanks Meter 79
Posts: 161
Join Date: Feb 2011
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
 
Sahaab
Old
#7  
Sahaab's Avatar
Recognized Contributor
Thanks Meter 2886
Posts: 3,234
Join Date: May 2013
Location: Islamabad

 
DONATE TO ME
Quote:
Originally Posted by Laur3nt1u View Post
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
My First APP : Muslim Zone : XDA Link
No SHARING Of My Work Is Allowed, Thank You


My Contributions
 
invaderjohn
Old
#8  
invaderjohn's Avatar
Senior Member
Thanks Meter 19
Posts: 239
Join Date: Jun 2009
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
LG G2 Mini d620r
stock 4.4.2,
Status: rooted
 
ivan moreno
Old
#9  
Junior Member
Thanks Meter 0
Posts: 1
Join Date: Jul 2014
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
 
Faiz Malkani
Old
#10  
Faiz Malkani's Avatar
Forum Moderator / XDA Portal Team - OP
Thanks Meter 1807
Posts: 7,518
Join Date: Feb 2012
Location: Mumbai
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: [ Click to Expand ]
Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes