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="".
Related
I'm working on a camera app that simply takes pictures. I've decided to go with a FloatingActionButton anchored to a bottom app bar for the camera capture action. Everything works great, however I'm having a bit of difficulty with the FloatingActionButton itself. When I press and hold the button there is a shadow with a hexagon that appears. I don't want this animation at all. How do I remove this?
Here are images of the exact problem: The Issue
Here is the code:
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/capture_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:backgroundTint="#android:color/transparent"
android:clickable="true"
android:contentDescription="#string/shutter"
android:focusable="true"
android:soundEffectsEnabled="true"
android:tint="#color/white"
app:backgroundTint="#color/white"
app:borderWidth="3dp"
app:elevation="0dp"
app:fabCustomSize="90dp"
app:rippleColor="#null"
android:scaleType="fitXY"
app:layout_anchor="#id/bottom_app_bar" />
You can try to set a background or stateListAnimator="#null"
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.
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"
...
/>
I don't know why there is a ripple effect even in the resting state of my FAB(FloatingActionButton).
This is how it looks:
This is my implementation in xml:
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:src="#drawable/white_plus"
android:id="#+id/plusIcon"
android:padding="0dp"
app:pressedTranslationZ="12dp"
app:elevation="6dp"
app:paddingEnd="0dp"
app:paddingStart="0dp"
android:clickable="true"/>
This problem was coming because I had set the colorAccent to #af18cccc and, hence, it was not completely opaque.
After changing the colorAccent to #ff18cccc, it was working perfectly.
For bringing the transparency effect, I called setAlpha(0.8) from the java code.
Now, it works like a charm! :)
In addition to Sid's answer, you can also call
android:alpha = "0.8"
directly in XML.
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">