Develop Reference

Floating Action Button appearing as a square

I am currently working on an Android app and using the latest addition of the Floating Action Button. However, after compiling the necessary libraries and adding the fab into my xml file, it appears as a square while I am expecting it to be a circle, just like everywhere else.
I use the same basic code to implement the fab as found online and my result is a square and theirs is a nice circle fab.
Here is my code:
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="16dp"
android:src="#drawable/ic_person_add_black_24dp" />
Here is an screenshot of what is displayed:
How to display the fab (add contact here) as a circle?
Thank you,

Try to set one of appcompat themes for your fab or either for the parent layout: android:theme="#style/Theme.AppCompat"

I don't know if this is what solved it but I stopped working on this project for another one for a little bit & I didn't have this problem on my other project.
AndroidStudio seems to create a square fab if your activity extends Activity and not AppCompatActivity.

Even if your activity extends AppCompatActivity you may also need to build the project (Ctrl+F9) before you can see the preview properly rendered.

Try this XML code, This is auto-generated code by Android studio from the template
<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:layout_margin="#dimen/fab_margin"
app:srcCompat="#android:drawable/ic_dialog_email" />
Hope this helps.

You can use material FAB with Theme.MaterialComponents
<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
android:id="#+id/fab_Send"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:contentDescription="#string/app_name"
android:gravity="center"
android:text="#string/send"
android:theme="#style/Theme.MaterialComponents"
android:textAllCaps="false"
android:textColor="#color/colorWhite"
android:textSize="#dimen/_12sdp"
app:backgroundTint="#color/colorPrimary"
app:borderWidth="0dp"
android:fontFamily="#font/play_fair_display_black"
app:useCompatPadding="true"
tools:ignore="RelativeOverlap" />
Here is the result
The reason why this happens is that, you are using a different theme for you app other than that is used by the FAB. In my case I am using Theme.AppCompat.Light.NoActionBar for my app but FAB does not supported by this.

My FloatingActionButton has some weird lines coming out of it on 4.4 and lower

As the title says, my FloatingActionButton has some weird lines coming out of it only on 4.4 or lower. On Lollipop it works fine.
This is a picture of the issue:
The play image doesn't have those lines in it. My xml:
<android.support.design.widget.FloatingActionButton
android:id="#+id/play"
android:layout_width="48dp"
android:layout_height="48dp"
android:src="#drawable/ic_av_play_arrow"
app:borderWidth="0dp"
app:elevation="6dp"
app:layout_anchor="#+id/image"
app:layout_anchorGravity="center_vertical|right|end"
app:rippleColor="#color/color_primary_light" />
So what am I doing wrong?
EDIT: goes away if I set my elevation to 0dp so I think I'll do that just for older phones

Your problem here is that you're making the FloatingActionButton an unexpected size. The FloatingActionButton in the support library only supports two sizes, and it must be set using the fabSize attribute.
You should change:
<android.support.design.widget.FloatingActionButton
android:id="#+id/play"
android:layout_width="48dp"
android:layout_height="48dp"
to be:
<android.support.design.widget.FloatingActionButton
android:id="#+id/play"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
If you want a smaller version:
<android.support.design.widget.FloatingActionButton
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/play"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:fabSize="mini"
Source: http://developer.android.com/reference/android/support/design/widget/FloatingActionButton.html

Square FloatingActionButton with Android Design Library [duplicate]

This question already has answers here:
FloatingActionButton, square button below API level 17
(6 answers)
Closed 3 years ago.
The new android design library provides the android.support.design.widget.FloatingActionButton to make it easier to implement a floating action button.
But the button is always a circle.
I received from the company designer a square floating button concept, but I can't find any reference to change the background of the android.support.design.widget.FloatingActionButton to have a square background.
Note: If I use a custom custom drawable the background still have the circle, like this:
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/button_filter"
app:layout_anchor="#+id/appbar"
app:layout_anchorGravity="bottom|right|end" />
I try to use a simple Button, but it seems to break the toolbar size when it was collapsed:
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:elevation="10dp"
android:background="#drawable/button_filter"
app:layout_anchor="#+id/appbar"
app:layout_anchorGravity="bottom|right|end" />
Is possible to have a square button using the FloatingActionButton with the new Android Design Library?

The problem is the "android:background", look at the template below and notice the "app:backgroundTint", use it as template and it should work:
<android.support.design.widget.FloatingActionButton
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/your_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="#dimen/floating_button_margin_bottom"
android:layout_marginRight="#dimen/floating_button_margin_right"
app:elevation="#dimen/floating_button_elevation"
app:borderWidth="0dp"
app:rippleColor="#color/your_ripple_color"
app:backgroundTint="#color/your_bg_color" />

Alright, using use the attribute app:borderWidth="0dp" in the FloatingActionButton solved the problem.
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/button_filter"
app:layout_anchor="#+id/appbar"
app:borderWidth="0dp"
app:layout_anchorGravity="bottom|right|end" />

Is this a bug in Android support design Library?

I just started to use the new Deisgn library from Google : 'com.android.support:design:22.2.0'
I use the FloatingActionButton and I have a small issue between Android below 5.0 and over 5.0.
Watch the screenshot :
Android 4.4 :
Android 5.0 :
As you can see, on Android 4.4, there is a margin around the FAB. I think this is for displaying the shadow. But IT'S OVERSIZED !
So is it a bug (or a forget of Google) or just the normal behavior ?
The xml of the view hosting he fabs :
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="fr.freemo.freemo.activities.ListFreemoCityActivity">
<include
android:id="#+id/toolbar"
layout="#layout/view_toolbar" />
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/toolbar">
</FrameLayout>
<ProgressBar
android:id="#+id/progressBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab_add"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="#dimen/margin_fab"
android:layout_marginRight="#dimen/margin_fab"
android:elevation="#dimen/fab_elevation_lollipop"
android:src="#drawable/ic_action_new"
app:backgroundTint="#color/color_app"
app:fab_type="normal" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab_display"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/fab_add"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="#dimen/margin_fab"
android:layout_marginRight="#dimen/margin_fab"
android:elevation="#dimen/fab_elevation_lollipop"
android:src="#drawable/ic_map_white"
android:tint="#color/color_app"
app:backgroundTint="#color/white"
app:fab_type="normal" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab_display_list"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/fab_display"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="#dimen/margin_fab"
android:layout_marginRight="#dimen/margin_fab"
android:elevation="#dimen/fab_elevation_lollipop"
android:src="#drawable/ic_action_list"
android:tint="#color/color_app"
android:visibility="invisible"
app:backgroundTint="#color/white"
app:fab_type="normal" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab_display_grid"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/fab_display_list"
android:layout_alignParentRight="true"
android:layout_marginBottom="#dimen/margin_fab"
android:layout_marginRight="#dimen/margin_fab"
android:elevation="#dimen/fab_elevation_lollipop"
android:src="#drawable/ic_view_module_white"
android:tint="#color/color_app"
android:visibility="invisible"
app:backgroundTint="#color/white"
app:fab_type="normal" />
</RelativeLayout>

It was an issue (check a bug report created by me: https://code.google.com/p/android/issues/detail?id=175330) and should be fixed in the future release of the support-design library.

Its a bug for API 21. You can make arrow visible by removing some margin.
Here is the way You can solve it and after testing on different devices it seems to work:
https://stackoverflow.com/a/31337162/3173384
Edited
Bug has already been fixed. Just update all support libraries to v 22.2.1
compile 'com.android.support:design:22.2.1'
compile 'com.android.support:appcompat-v7:22.2.1'
compile 'com.android.support:cardview-v7:22.2.1'
compile 'com.android.support:recyclerview-v7:22.2.1'

This has been specified to not being an actual bug. Instead, this is the expected behavior.
Quoting a google dev answer:
This isn't a bug and is working as intended, in the sense that it's something that which is completely unavoidable. Within a CoordinatorLayout we have some control and can detect certain situations (edges) where it can offset the FAB. This is a hack though.
If you don't like it, set elevation to 0dp and be done with it.
As someone other stated here, we should define
xmlns:app="http://schemas.android.com/apk/res-auto"
app:borderWidth="0dp"
app:elevation="0dp"
or, even better, define your elevation in dimens.xml based on the API version you are working with.
Most common case would be:
<!-- dimens.xml(v21) -->
<dimen name="custom_fab_elevation">#dimen/fab_elevation</dimen>
<!-- dimens.xml(lower) -->
<dimen name="custom_fab_elevation">0dp</dimen>

No elevation For FloatingActionButton ( FAB ) in Support Material Design

With the help of this question I built a Floating Action Button to add elements to my Listview
The code is easy:
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
app:backgroundTint="#color/spg_rosa"
app:borderWidth="0dp"
app:elevation="4dp"
app:fabSize="normal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_add_white_48dp"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
/>
The thing is
app:elevation="4dp"
is not working, I can't see any shadow!
I grab the icon from Google : https://www.google.com/design/icons/
Any idea?
EDIT: I'm using it in Samsung S3 Mini ( API 16 )

I just tested your sample on a Samsung S3 Mini (API 16).
For me the elevation works.
because the elevation value is so small it's not very visible, try to increase the value. As BrentM says the elevation is not working if app:borderWidth="0dp" is not added.

Your problem is the "android:layout_alignParentBottom="true", that means your button is right at the bottom edge, try adding at least 10dp of margin at the bottom and it will fix your problem.
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
app:backgroundTint="#color/spg_rosa"
app:borderWidth="0dp"
app:elevation="4dp"
app:fabSize="normal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_add_white_48dp"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_marginBottom="10dp"
/>
Regards!

Thing was My Listview were black!
I changed color theme to white, and I could see the shadow !