FloatingActionButton example with Support Library

Question

Recently  I read these posts   Android Design Support Library Android Support Library  revision 22 2 0 FloatingActionButton  But  none of them give me a detail example about creating a new FloatingActionButton  It s so hard to understand  which is why I am asking this question  Can anyone give me an example about it  EDIT I just found some issues on FloatingActionButton  FAB   and I want to improve another answer  See my answer below

User · Answer

FloatingActionButton extends ImageView  So  it s simple as like introducing an ImageView in your layout  Here is an XML sample    lt android support design widget FloatingActionButton   xmlns app  http   schemas android com apk res-auto      android id    id fab      android layout width  wrap content      android layout height  wrap content      android src   drawable somedrawable      android layout gravity  right bottom      app borderWidth  0dp      app rippleColor   ffffff   gt    app borderWidth  0dp  is added as a workaround for elevation issues

User · Answer

So in your build gradle file  add this   compile  com android support design 27 1 1    AndroidX Note   Google is introducing new AndroidX extension libraries to replace the older Support Libraries   To use AndroidX  first make sure you ve updated your gradle properties file  edited build gradle to set compileSdkVersion to 28  or higher   and use the following line instead of the previous compile one   implementation  com google android material material 1 0 0    Next  in your themes xml or styles xml or whatever  make sure you set this- it s your app s accent color-- and the color of your FAB unless you override it  see below             lt item name  colorAccent  gt  color floating action button color lt  item gt    In the layout s XML    lt RelativeLayout       xmlns app  http   schemas android com apk res-auto  gt           lt android support design widget FloatingActionButton             android id    id myFAB              android layout width  wrap content              android layout height  wrap content              android src   drawable ic plus sign              app elevation  4dp                    gt    lt  RelativeLayout gt    Or if you are using the AndroidX material library above  you d instead use this    lt RelativeLayout       xmlns app  http   schemas android com apk res-auto  gt           lt com google android material floatingactionbutton FloatingActionButton             android id    id myFAB              android layout width  wrap content              android layout height  wrap content              android srcCompat   drawable ic plus sign              app elevation  4dp                    gt    lt  RelativeLayout gt    You can see more options in the docs  material docs here   setRippleColor  etc    but one of note is       app fabSize  mini    Another interesting one-- to change the background color of just one FAB  add       app backgroundTint   FF0000     for example to change it to red  to the XML above   Anyway  in code  after the Activity Fragment s view is inflated          FloatingActionButton myFab    FloatingActionButton   myView findViewById R id myFAB       myFab setOnClickListener new View OnClickListener             public void onClick View v                doMyThing                        Observations    If you have one of those buttons that s on a  seam  splitting two views  using a RelativeLayout  for example  with  say  a negative bottom layout margin to overlap the border  you ll notice an issue  the FAB s size is actually very different on lollipop vs  pre-lollipop   You can actually see this in AS s visual layout editor when you flip between APIs-- it suddenly  puffs out  when you switch to pre-lollipop   The reason for the extra size seems to be that the shadow expands the size of the view in every direction   So you have to account for this when you re adjusting the FAB s margins if it s close to other stuff  Here s a way to remove or change the padding if there s too much   if  Build VERSION SDK INT  lt  Build VERSION CODES LOLLIPOP        RelativeLayout LayoutParams p    RelativeLayout LayoutParams  myFab getLayoutParams        p setMargins 0  0  0  0      get rid of margins since shadow area is now the margin     myFab setLayoutParams p      Also  I was going to programmatically place the FAB on the  seam  between two areas in a RelativeLayout by grabbing the FAB s height  dividing by two  and using that as the margin offset   But myFab getHeight   returned zero  even after the view was inflated  it seemed   Instead I used a ViewTreeObserver to get the height only after it s laid out and then set the position  See this tip here   It looked like this       ViewTreeObserver viewTreeObserver   closeButton getViewTreeObserver        if  viewTreeObserver isAlive              viewTreeObserver addOnGlobalLayoutListener new ViewTreeObserver OnGlobalLayoutListener                  Override             public void onGlobalLayout                     if  Build VERSION SDK INT  lt  Build VERSION CODES JELLY BEAN                        closeButton getViewTreeObserver   removeGlobalOnLayoutListener this                     else                       closeButton getViewTreeObserver   removeOnGlobalLayoutListener this                                        not sure the above is equivalent  but that s beside the point for this example                    RelativeLayout LayoutParams params    RelativeLayout LayoutParams  closeButton getLayoutParams                    params setMargins 0  0  16  -closeButton getHeight     2       int left  int top  int right  int bottom                  closeButton setLayoutParams params                                     Not sure if this is the right way to do it  but it seems to work  It seems you can make the shadow-space of the button smaller by decreasing the elevation  If you want the FAB on a  seam  you can use layout anchor and layout anchorGravity here is an example    lt android support design widget FloatingActionButton     android layout height  wrap content      android layout width  wrap content      app layout anchor   id appbar      app layout anchorGravity  bottom right end      android src   drawable ic discuss      android layout margin   dimen fab margin      android clickable  true   gt     Remember that you can automatically have the button jump out of the way when a Snackbar comes up by wrapping it in a CoordinatorLayout   More    Google s Design Support Library Page the FloatingActionButton docs  Material Now  talk from Google I O 2015 - Support Design Library introduced at 17m22s Design Support Library sample showcase

User · Answer

If you already added all libraries and it still doesn t work use    lt com google android material floatingactionbutton FloatingActionButton     android layout width  wrap content      android layout height  wrap content      app srcCompat   drawable ic add     gt    instead of        lt android support design widget FloatingActionButton    android layout width  wrap content     android layout height  wrap content     app srcCompat   drawable ic add     gt    And all will work fine

User · Answer

for AndroidX use like   lt com google android material floatingactionbutton FloatingActionButton     android layout width  wrap content      android layout height  wrap content      app srcCompat   drawable ic add    gt

User · Answer

I just found some issues on FAB and I want to enhance another answer     setRippleColor issue  So  the issue will come once you set the ripple color  FAB color on pressed  programmatically through setRippleColor  But  we still have an alternative way to set it  i e  by calling   FloatingActionButton fab    FloatingActionButton  findViewById R id fab   ColorStateList rippleColor   ContextCompat getColorStateList context  R color fab ripple color   fab setBackgroundTintList rippleColor     Your project need to has this structure    res color fab ripple color xml     And the code from fab ripple color xml is    lt selector xmlns android  http   schemas android com apk res android  gt       lt item android state pressed  true  android color   color fab color pressed    gt       lt item android state focused  true  android color   color fab color pressed    gt       lt item android color   color fab color normal   gt   lt  selector gt    Finally  alter your FAB slightly    lt android support design widget FloatingActionButton     android id    id fab      android layout width  wrap content      android layout height  wrap content      android src   drawable ic action add      android layout alignParentBottom  true      android layout alignParentRight  true      app fabSize  normal      app borderWidth  0dp      app elevation  6dp      app pressedTranslationZ  12dp      app rippleColor   android color transparent   gt   lt  -- set to transparent color -- gt    For API level 21 and higher  set margin right and bottom to 24dp       android layout marginRight  24dp  android layout marginBottom  24dp    gt    FloatingActionButton design guides  As you can see on my FAB xml code above  I set                       android layout alignParentBottom  true          android layout alignParentRight  true          app elevation  6dp          app pressedTranslationZ  12dp                 By setting these attributes  you don t need to set layout marginTop and layout marginRight again  only on pre-Lollipop   Android will place it automatically on the right corned side of the screen  which the same as normal FAB in Android Lollipop       android layout alignParentBottom  true      android layout alignParentRight  true     Or  you can use this in CoordinatorLayout           android layout gravity  end bottom     You need to have 6dp elevation and 12dp pressedTranslationZ  according to this guide from Google

[android] FloatingActionButton example with Support Library

Examples related to android

Examples related to android-support-library

Examples related to floating-action-button

Examples related to android-design-library