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"
Related
I have an app with an expanded button implemented.
The button shrinks and expands perfectly fine in constraint layout or any other layout except in motion layout.
In which the button does not get expanded after shrink and in the extended state when the state of the button change to shrink on the click of a button then the text gets disappears but the size remains the same.
Version of material design link "implementation 'com.google.android.material:material:1.3.0-beta01'"
<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
android:id="#+id/btn_call_helpline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/dimen_20dp"
android:text="#string/txt_emergency"
android:textColor="#color/color_white"
app:backgroundTint="#color/red"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:cornerRadius="#dimen/dimen_20dp"
app:elevation="#dimen/dimen_10dp"
app:icon="#drawable/ic_baseline_call_24"
app:iconTint="#color/color_white"
app:rippleColor="#color/color_white" />
I have verified the code and it does not have any such constraint that prevents shrinking and expanding.
The FAB seems to be having trouble with being measured twice. (motionLayout needs to do that)
A Simple work around is to wrap the fab in a container
Like linearLayout
put the LinearLayout in MotionLayout
<LinearLayout
android:id="#+id/fabwrap"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
>
<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="hello"
android:textColor="#color/white"
app:backgroundTint="#F00"
app:icon="#drawable/ic_battery"/>
</LinearLayout>
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 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.
In my app I am using a material design floating action button. Whenever I change the backgroundTintColor property of the button to something with an alpha below 255, it creates this strange circle within the button. I have provided a picture of the button below with my xml code... Any help would be greatly appreciated.
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right|end"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true">
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="55dp"
android:layout_height="55dp"
android:clickable="true"
android:layout_margin="12dp"
android:src="#drawable/ic_play"
app:backgroundTint="#64a9a9a9"
android:layout_gravity="center"
/>
</FrameLayout>
Its most likely because background is used to create shadow or elevation and src to show the main content of fab but you are changing it take a look at this source code of fab https://android.googlesource.com/platform/frameworks/support/+/master/design/src/android/support/design/widget/FloatingActionButton.java?autodive=0%2F%2F
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"
...
/>