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.
Related
I try to give my FloatingActionButton a background color different than that defined as accentColor in my style. So far I try to do this:
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/floatingActionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_marginEnd="16dp"
android:layout_marginBottom="#dimen/margin_bottom"
android:backgroundTint="#color/primaryColor"
android:clickable="true"
android:focusable="true"
app:srcCompat="#drawable/ic_baseline_add_24" />
Where this is inside a CoordinatorLayout. This is what i get:
As you can see there is a blue circle around the fab. I don't know how to get rid of it. I also tried to define a style for this fab, but then i got black and it messed up completely. I think it could have to do something with its shadow, but I also don't know how to change it without changing elevation.
Pleas Try this code its use full
<com.rey.material.widget.FloatingActionButton
android:id="#+id/user_add_item_to_card"
android:layout_width="wrap_content"
android:layout_height="60dp"
android:layout_gravity="end"
app:fab_iconSrc="#drawable/ic_add_circle_black_24dp"
app:borderWidth="0dp"
android:background="#FFF">
</com.rey.material.widget.FloatingActionButton>
After a little bit more trying out I got the solution:
You just need to add app:borderWidth="0dp" and it's gone.
Other way to do it is to use app:backgroundTint="".
I am trying to show textview on the top of Floating Action Button. Inside FrameLayout, I have 1 FAB and 1 TextView:
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|start"
android:padding="#dimen/fab_margin">
<android.support.design.widget.FloatingActionButton
android:id="#+id/fabAddSeller"
android:layout_width="70dp"
android:layout_height="70dp"
app:backgroundTint="#3780f4"
android:stateListAnimator="#null"/>
<TextView
android:id="#+id/tvSellRecordCount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/sell_record_counter"
android:layout_gravity="top|end"
android:text="12"
android:textColor="#FFFFFF"
android:textSize="10sp" />
</FrameLayout>
According to this answer, I have added
android:stateListAnimator="#null"
to FAB - no difference. I have put TextView after FAB - no effect.
How to show another view on top of FloatingActionButton?
In Android Studio, I could fix after adding an elevation to the text view:
android:elevation="6dp"
It seems that FAB has 5dp of elevation.
However, I'm not sure if this totally works to you since elevation is available for API>=21.
Try to make some tests in real devices...
Maybe, android:stateListAnimator="#null" is enough in real devices/emulator.
UPDATE
After adding app:elevation, this fix started to work with older APIs as well
app:elevation="6dp"
android:elevation="6dp"
Replace FrameLayout with RelativeLayout and add
<android.support.design.widget.FloatingActionButton
...
android:layout_below="#+id/tvSellRecordCount"
...
/>
When I use background and src in android.support.design.FloatingActionbutton it is not set correctly. Instead it is displayed as
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/pink"
android:src="#drawable/ic_action_barcode_2"
android:layout_gravity="bottom|right"
android:layout_marginBottom="16dp"
android:layout_marginRight="16dp" />
but when I use ImageView it appears correctly as
<ImageView
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/pink"
android:src="#drawable/ic_action_barcode_2"
android:layout_gravity="bottom|right"
android:layout_marginBottom="16dp"
android:layout_marginRight="16dp" />
why is FloatingActionButton is not displayed correctly? What should I change in my code?
Floating action button's background does not need to be changed, you just apply a tint and then add your icon as usual
<android.support.design.widget.FloatingActionButton
...
app:backgroundTint="#color/ic_action_barcode_2"
android:src="#drawable/ic_add" />
This provides you with a round button still but in the colour you desire.
In this case the app namespace is used for the support library features:
xmlns:app="http://schemas.android.com/apk/res-auto"
i faced the similar problem. I tried to set src or background of FloatingActionButton, but couldn't fill the button by src. following code solved problem for me.
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
.
.
.
android:background="#drawable/round_icon"
android:backgroundTintMode="src_over">
I've just started android development and trying the new material design. is a screenshot of my mainactivity which has a FloatingActionButton but it doesnt applying any elevation (no shadows).
How can I enable shadow on this new widget (android.support.widget.FloatingActionButton).
This is code from layout xml
<android.support.design.widget.FloatingActionButton
android:id="#+id/add_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:src="#drawable/ic_add_action"
android:layout_margin="16dp"
android:elevation="10dp"
android:padding="10dp"/>
Any help appreciated. Thanks
Please note I'd like to use android design library only not any other github libraries.
After a lot of research, I've found the proper way to use FAB with no issues. Use the code below as template:
<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" />
I'm just testing the floating action button now. And for me it works.
Try adding app:borderWidth="0dp" for your button, this might solve the problem.
I saw in some other posts that it might be a problem in the design library.
Your XML layout might missed these code:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
app:xmlns="http://schemas.android.com/apk/res-auto"
... >
<android.support.design.widget.FloatingActionButton
...
app:borderWidth="0dp"
app:elevation="4dp" />
...
</RelativeLayout>
EDIT
For more information about FloatingActionButton, see this post, which explains the issue and design guide.
Check the manifest file and delete the next properties:
android:hardwareAccelerated="false"
android:largeHeap="true"
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" />