How can I add the new Floating Action Button between two widgets layouts

Question

I guess you have seen the new Android design guidelines  with the new  Floating Action Button  a k a  FAB   For instance this pink button     My question sounds stupid  and I have already tried a lot of things  but what is the best way to put this button at the intersection of two layouts   In the above exemple  this button is perfectly placed between what we can imagine to be an ImageView and a relativeLayout   I have already tried a lot of tweaks  but I am convinced there is a proper way to do it

User · Answer

Here is one aditional free Floating Action Button library for Android. It has many customizations and requires SDK version 9 and higher

enter image description here

Full Demo Video

dependencies {
    compile 'com.scalified:fab:1.1.2'
}

User · Answer

Now it is part of official Design Support Library   In your gradle   compile  com android support design 22 2 0    http   developer android com reference android support design widget FloatingActionButton html

User · Answer

Seems like the cleanest way in this example is to    Use a RelativeLayout Position the 2 adjacent views one below the other Align the FAB to the parent right end and add a right end margin Align the FAB to the bottom of the header view and add a negative margin  half the size of the FAB including shadow   Example adapted from shamanland implementation  use whatever FAB you wish   Assume FAB is 64dp high including shadow    lt  xml version  1 0  encoding  utf-8   gt   lt RelativeLayout     xmlns android  http   schemas android com apk res android      android layout width  match parent      android layout height  match parent      android orientation  vertical  gt        lt View         android id    id header          android layout width  match parent          android layout height  120dp        gt        lt View         android id    id body          android layout width  match parent          android layout height  match parent          android layout below   id header        gt        lt fully qualified name FloatingActionButton         android id    id fab          android layout width  wrap content          android layout height  wrap content          android layout alignParentRight  true          android layout alignBottom   id header          android layout marginBottom  -32dp          android layout marginRight  20dp        gt    lt  RelativeLayout gt

User · Answer

Keep it Simple Adding Floating Action Button using TextView by giving rounded xml background   - Add compile com android support design 23 1 1 to gradle file   Use CoordinatorLayout as root view  Before Ending the CoordinatorLayout introduce a textView  Inside Drawable draw a circle    Circle Xml is   lt  xml version  1 0  encoding  utf-8   gt   lt shape     xmlns android  http   schemas android com apk res android      android shape  oval  gt        lt solid         android color   color colorPrimary   gt       lt size         android width  30dp          android height  30dp   gt   lt  shape gt    Layout xml is   lt  xml version  1 0  encoding  utf-8   gt   lt android support design widget CoordinatorLayout     xmlns android  http   schemas android com apk res android      xmlns app  http   schemas android com apk res-auto      android layout width  match parent      android layout height  match parent  gt     lt LinearLayout     android layout width  match parent      android layout height  match parent      android orientation  vertical      android weightSum  5       gt        lt RelativeLayout         android id    id viewA          android layout height  0dp          android layout width  match parent          android layout weight  1 6          android background   drawable contact bg          android gravity  center horizontal center vertical           gt           lt  RelativeLayout gt        lt LinearLayout         android layout height  0dp          android layout width  match parent          android layout weight  3 4          android orientation  vertical          android padding  16dp          android weightSum  10           gt            lt LinearLayout             android layout height  0dp              android layout width  match parent              android layout weight  1               gt               lt  LinearLayout gt            lt LinearLayout             android layout height  0dp              android layout width  match parent              android layout weight  1              android weightSum  4              android orientation  horizontal               gt               lt TextView                 android layout height  match parent                  android layout width  0dp                  android layout weight  1                  android text  Name                  android textSize  22dp                  android textColor   android color black                  android padding  3dp                    gt                lt TextView                 android id    id name                  android layout height  match parent                  android layout width  0dp                  android layout weight  3                  android text  Ritesh Kumar Singh                  android singleLine  true                  android textSize  22dp                  android textColor   android color black                  android padding  3dp                    gt                lt  LinearLayout gt              lt LinearLayout             android layout height  0dp              android layout width  match parent              android layout weight  1              android weightSum  4              android orientation  horizontal               gt               lt TextView                 android layout height  match parent                  android layout width  0dp                  android layout weight  1                  android text  Phone                  android textSize  22dp                  android textColor   android color black                  android padding  3dp                    gt                lt TextView                 android id    id number                  android layout height  match parent                  android layout width  0dp                  android layout weight  3                  android text  8283001122                  android textSize  22dp                  android textColor   android color black                  android singleLine  true                  android padding  3dp                    gt            lt  LinearLayout gt              lt LinearLayout             android layout height  0dp              android layout width  match parent              android layout weight  1              android weightSum  4              android orientation  horizontal               gt               lt TextView                 android layout height  match parent                  android layout width  0dp                  android layout weight  1                  android text  Email                  android textSize  22dp                  android textColor   android color black                  android padding  3dp                    gt                lt TextView                 android layout height  match parent                  android layout width  0dp                  android layout weight  3                  android text  ritesh singh betasoftsystems com                  android textSize  22dp                  android singleLine  true                  android textColor   android color black                  android padding  3dp                    gt            lt  LinearLayout gt             lt LinearLayout             android layout height  0dp              android layout width  match parent              android layout weight  1              android weightSum  4              android orientation  horizontal               gt               lt TextView                 android layout height  match parent                  android layout width  0dp                  android layout weight  1                  android text  City                  android textSize  22dp                  android textColor   android color black                  android padding  3dp                    gt                lt TextView                 android layout height  match parent                  android layout width  0dp                  android layout weight  3                  android text  Panchkula                  android textSize  22dp                  android textColor   android color black                  android singleLine  true                  android padding  3dp                    gt            lt  LinearLayout gt        lt  LinearLayout gt    lt  LinearLayout gt         lt TextView         android id    id floating          android transitionName   string transition name circle          android layout width  100dp          android layout height  100dp          android layout margin  16dp          android clickable  false          android background   drawable circle          android elevation  10dp          android text  R          android textSize  40dp          android gravity  center          android textColor   android color black          app layout anchor   id viewA          app layout anchorGravity  bottom   gt            lt  android support design widget CoordinatorLayout gt    Click here to se how it Will look like

User · Answer

Try this library  javadoc is here   min API level is 7   dependencies       compile  com shamanland fab 0 0 8      It provides single widget with ability to customize it via Theme  xml or java-code      It s very simple to use  There are available normal and mini implementation according to Promoted Actions pattern    lt com shamanland fab FloatingActionButton     android layout width  wrap content      android layout height  wrap content      android src   drawable ic action my      app floatingActionButtonColor   color my fab color      app floatingActionButtonSize  mini        gt    Try to compile the demo app  There is exhaustive example  light and dark themes  using with ListView  align between two Views

User · Answer

here is working code   i use appBarLayout to anchor my floatingActionButton  hope this might helpful   XML CODE    lt  xml version  1 0  encoding  utf-8   gt   lt android support design widget CoordinatorLayout xmlns android  http   schemas android com apk res android      xmlns tools  http   schemas android com tools      xmlns app  http   schemas android com apk res-auto      android layout width  match parent      android layout height  match parent  gt        lt android support design widget AppBarLayout         android id    id appbar          android layout height  192dp          android layout width  match parent  gt            lt android support design widget CollapsingToolbarLayout             android layout width  match parent              android layout height  match parent              app toolbarId    id toolbar              app titleEnabled  true              app layout scrollFlags  scroll enterAlways exitUntilCollapsed              android id    id collapsingbar              app contentScrim   attr colorPrimary  gt                lt android support v7 widget Toolbar                 app layout collapseMode  pin                  android id    id toolbarItemDetailsView                  android layout height   attr actionBarSize                  android layout width  match parent  gt  lt  android support v7 widget Toolbar gt           lt  android support design widget CollapsingToolbarLayout gt       lt  android support design widget AppBarLayout gt        lt android support v4 widget NestedScrollView         android layout width  match parent          android layout height  match parent          app layout behavior  android support design widget AppBarLayout ScrollingViewBehavior  gt            lt android support constraint ConstraintLayout             android layout width  match parent              android layout height  match parent              tools context  com example rktech myshoplist Item details views  gt               lt RelativeLayout                 android orientation  vertical                  android focusableInTouchMode  true                  android layout width  match parent                  android layout height  match parent  gt                     lt  --Put Image here -- gt                   lt ImageView                     android visibility  gone                      android layout marginTop  56dp                      android layout width  match parent                      android layout height  230dp                      android scaleType  centerCrop                      android src   drawable third    gt                     lt ScrollView                     android layout width  match parent                      android layout height  match parent  gt                        lt RelativeLayout                         android layout width  match parent                          android layout height  match parent                          android layout gravity  center                          android orientation  vertical  gt                            lt android support v7 widget CardView                             android layout width  match parent                              android layout height  match parent                              app cardCornerRadius  4dp                              app cardElevation  4dp                              app cardMaxElevation  6dp                              app cardUseCompatPadding  true  gt                                lt RelativeLayout                                 android layout width  match parent                                  android layout height  match parent                                  android layout margin  8dp                                  android padding  3dp  gt                                     lt LinearLayout                                     android layout width  match parent                                      android layout height  match parent                                      android orientation  vertical  gt                                         lt TextView                                         android id    id txtDetailItemTitle                                          style   style TextAppearance AppCompat Title                                          android layout width  match parent                                          android layout height  wrap content                                          android layout marginLeft  4dp                                          android text  Title    gt                                        lt LinearLayout                                         android layout width  match parent                                          android layout height  match parent                                          android layout marginTop  8dp                                          android orientation  horizontal  gt                                            lt TextView                                             android id    id txtDetailItemSeller                                              style   style TextAppearance AppCompat Subhead                                              android layout width  wrap content                                              android layout height  wrap content                                              android layout marginLeft  4dp                                              android layout weight  1                                              android text  Shope Name    gt                                            lt TextView                                             android id    id txtDetailItemDate                                              style   style TextAppearance AppCompat Subhead                                              android layout width  wrap content                                              android layout height  wrap content                                              android layout marginRight  4dp                                              android gravity  right                                              android text  Date    gt                                         lt  LinearLayout gt                                        lt TextView                                         android id    id txtDetailItemDescription                                          style   style TextAppearance AppCompat Medium                                          android layout width  match parent                                          android minLines  5                                          android layout height  wrap content                                          android layout marginLeft  4dp                                          android layout marginTop  16dp                                          android text  description    gt                                        lt LinearLayout                                         android layout width  match parent                                          android layout height  wrap content                                          android layout marginBottom  8dp                                          android orientation  horizontal  gt                                            lt TextView                                             android id    id txtDetailItemQty                                              style   style TextAppearance AppCompat Medium                                              android layout width  wrap content                                              android layout height  wrap content                                              android layout marginLeft  4dp                                              android layout weight  1                                              android text  Qunatity    gt                                            lt TextView                                             android id    id txtDetailItemMessure                                              style   style TextAppearance AppCompat Medium                                              android layout width  wrap content                                              android layout height  wrap content                                              android layout marginRight  4dp                                              android layout weight  1                                              android gravity  right                                              android text  Messure in Gram    gt                                       lt  LinearLayout gt                                         lt TextView                                         android id    id txtDetailItemPrice                                          style   style TextAppearance AppCompat Headline                                          android layout width  match parent                                          android layout height  wrap content                                          android layout marginRight  4dp                                          android layout weight  1                                          android gravity  right                                          android text  Price    gt                                   lt  LinearLayout gt                                lt  RelativeLayout gt                           lt  android support v7 widget CardView gt                       lt  RelativeLayout gt                   lt  ScrollView gt               lt  RelativeLayout gt            lt  android support constraint ConstraintLayout gt        lt  android support v4 widget NestedScrollView gt        lt android support design widget FloatingActionButton         android layout width  wrap content          app layout anchor   id appbar          app fabSize  normal          app layout anchorGravity  bottom right end          android layout marginEnd   dimen  6sdp          android src   drawable ic done black 24dp          android layout height  wrap content    gt    lt  android support design widget CoordinatorLayout gt    Now if you paste above code  you will see following result on your device

User · Answer

Add this to your gradle file  dependencies       compile fileTree dir   libs   include      jar        compile  com android support appcompat-v7 23 0 0      compile  com android support design 23 0 1      This to your activity main xml   lt android support design widget CoordinatorLayout         android layout width  match parent          android layout height  match parent  gt            lt LinearLayout android layout width  match parent              android layout height  match parent              android orientation  vertical  gt                lt LinearLayout                 android id    id viewOne                  android layout width  match parent                  android layout height  match parent                  android layout weight  0 6                  android background   android color holo blue light                  android orientation  horizontal   gt                lt LinearLayout                 android id    id viewTwo                  android layout width  match parent                  android layout height  match parent                  android layout weight  0 4                  android background   android color holo orange light                  android orientation  horizontal   gt            lt  LinearLayout gt            lt android support design widget FloatingActionButton             android id    id floatingButton              android layout width  wrap content              android layout height  wrap content              android layout margin  16dp              android clickable  true              android src   drawable ic done              app layout anchor   id viewOne              app layout anchorGravity  bottom right end              app backgroundTint   FF0000              app rippleColor   FFF    gt        lt  android support design widget CoordinatorLayout gt    You can find the full example with android studio project to download at http   www ahotbrew com android-floating-action-button

User · Answer

You can import the sample project of Google in Android Studio by clicking File   Import Sample       This Sample contains a FloatingActionButton View which inherits from FrameLayout   Edit With the new Support Design Library you can implement it like in this example   https   github com chrisbanes cheesesquare

User · Answer

Best practice     Add compile  com android support design 25 0 1  to gradle file Use CoordinatorLayout as root view  Add layout anchorto the FAB and set it to the top view Add layout anchorGravity to the FAB and set it to  bottom right end      lt android support design widget CoordinatorLayout     xmlns android  http   schemas android com apk res android      xmlns app  http   schemas android com apk res-auto      android layout width  match parent      android layout height  match parent  gt        lt LinearLayout         android layout width  match parent          android layout height  match parent          android orientation  vertical  gt            lt LinearLayout             android id    id viewA              android layout width  match parent              android layout height  match parent              android layout weight  0 6              android background   android color holo purple              android orientation  horizontal   gt            lt LinearLayout             android id    id viewB              android layout width  match parent              android layout height  match parent              android layout weight  0 4              android background   android color holo orange light              android orientation  horizontal   gt        lt  LinearLayout gt        lt android support design widget FloatingActionButton         android id    id fab          android layout width  wrap content          android layout height  wrap content          android layout margin  16dp          android clickable  true          android src   drawable ic done          app layout anchor   id viewA          app layout anchorGravity  bottom right end   gt    lt  android support design widget CoordinatorLayout gt

User · Answer

With AppCompat 22  the FAB is supported for older devices   Add the new support library in your build gradle app    compile  com android support design 22 2 0    Then you can use it in your xml    lt android support design widget FloatingActionButton     android id    id fab      android layout width  wrap content      android layout height  wrap content      android layout gravity  bottom end      android src   android drawable ic menu more      app elevation  6dp      app pressedTranslationZ  12dp    gt    To use elevation and pressedTranslationZ properties  namespace app is needed  so add this namespace to your layout  xmlns app  http   schemas android com apk res-auto

[android] How can I add the new "Floating Action Button" between two widgets/layouts

Examples related to android

Examples related to android-coordinatorlayout

Examples related to floating-action-button