I have implemented floating action with list item and setting elevation from layout and run time on bind data as well. Then following issues occur:
fab elevation showing on first item only that is from xml resource I think.
setElevation() not working run time.
fab show()/hide() also not working with scale animation.
xml code is here:
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab_btn_video"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_alignTop="#+id/parentLayout"
android:layout_marginEnd="#dimen/fab_margin"
android:layout_marginRight="#dimen/fab_margin"
android:src="#drawable/ic_av_videocam"
app:elevation="#dimen/fab_shadow"
tools:targetApi="lollipop" />
This worked for me to change elevation:
fab.setCompatElevation(8f); //API>=21
You can try to use com.google.android.material.floatingactionbutton.FloatingActionButton instead of android.support.design.widget.FloatingActionButton. This will allow you to use show() and hide() methods.
Related
I want to show an action menu when I Press the ExtendedFloatingActionButton as in the image. My menu has 4 items, but I can't figure out how to easily make the FAb expand to display the actions.
I know ExtendedFloatingActionButton is a child class of MaterialButton, rather than FloatingActionButton, therefore working with it slightly differs from using the normal FAB
<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="16dp"
app:backgroundTint="#color/colorAccent"
android:contentDescription="Menu"
android:text="Menu"
app:iconTint="#color/card_background"
android:textColor="#color/background_card"
android:textStyle="bold"
app:icon="#drawable/ic_menu_black_24dp" />
I want to have a result like this:
I have found an easy implementation for a FloatingActionButton, but not for an ExtendedFloatingActionButton.
FAB transformation | animaiton-samples by android at GitHub
I'm using the material components FloatingActionButton https://material.io/develop/android/components/floating-action-button/
In that, I can't able to add elevation for my fab I tried using the below code but it's not working
app:elevation="12dp"
app:borderWidth="0dp"
Here is my xml.
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/mfab"
style="#style/Widget.MaterialComponents.FloatingActionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/mainlay"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="-28dp"
app:elevation="12dp"
app:borderWidth="0dp"
app:fabSize="normal"
app:srcCompat="#drawable/ic_directions_walk_white_18dp" />
AFAIK fab overrides elevation value. So there are two possible solutions:
1. You get source code of fab and change value of elevation
2. You create your own implementation.
I'd suggest you to use first solution.
Have you tried defining a custom style inherited from Widget.MaterialComponents.FloatingActionButton with your desired elevation, and set the custom style on your FAB instance?
Halloo guys I have problem here with coordinator layout. I have TextInputLayout and inside it I have editText. What I want is to show it on click on FAB on the left side and hide on click on FAB.
But I have always problem with edit text going below FAB:
Only way I was able to somehow do it is with using marginRight, see xml below. But is there any way to do it without that I think there must be better way.
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="#dimen/fab_normal_size"
android:layout_height="#dimen/fab_normal_size"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
app:fabSize="normal"
android:src="#drawable/ic_add_black_24dp" />
<android.support.design.widget.TextInputLayout
android:id="#+id/input_layout_txt"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_anchor="#id/fab"
app:layout_anchorGravity="left|center_vertical"
android:layout_marginRight="#dimen/fab_normal_size">
<EditText
android:id="#+id/input_txt"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="banany"
android:text="testestes....." />
FAB is always over UI by design:
Floating action buttons are used for a special type of promoted
action. They are distinguished by a circled icon floating above the UI
and have special motion behaviors related to morphing, launching, and
the transferring anchor point.
I haven't checked how it is implemented so unless someone else come with better answer you can either check CoordinatorLayout and FAB sources to see what makes it hoovering over UI, or if time is short you simply put something that looks like FAB (either you use regular button with proper drawable, or 3rd party lib).
<android.support.design.widget.TextInputLayout
android:id="#+id/input_layout_txt"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_anchor="#id/fab"
app:layout_anchorGravity="left|center_vertical">
<EditText
android:id="#+id/input_txt"
android:layout_width="250dp"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_marginLeft="10dp"
android:hint="banany"
android:text="testestes....." />
</android.support.design.widget.TextInputLayout>
Just try the above code, hope it suffice the purpose to some extent
Is there any way to hide/disable Floating action button in Android via xml file without editing Java file? Just want to hide a share button in an app and I tried editing related xml file. Tried to set invisible, gone etc but none of these works. Button is still there. At least to reduce the size of button to almost invisible? I think we cant change fab:fab_size="normal" to other values. So that too didn't work. So is there any way??
Discussed already on this issue,
Main reason is
If you set a set a FloatingActionButton to be anchored, you lose control of the visibility.
So you have to remove layout_anchor attribute from FloatingActionButton first.
You have to use java somewhere at the point. Cant do it with only with XML The trick given is
To wrap your FAB in a coordinator layout that is not the root of your entire layout, but as a sort of overlay to everything. From there you can manage the visibility of the coordinator layout initially so it's invisible, then make it visible when you call fab.show().
<com.github.clans.fab.FloatingActionMenu
android:id="#+id/menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="10dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
fab:menu_animationDelayPerItem="50"
fab:menu_backgroundColor="#android:color/transparent"
fab:menu_colorNormal="#color/lightgrey"
fab:menu_colorPressed="#color/transparant"
fab:menu_colorRipple="#99FFFFFF"
fab:menu_fab_hide_animation="#anim/my_hide_animation"
fab:menu_fab_label=""
fab:menu_fab_show_animation="#anim/my_show_animation"
fab:menu_fab_size="normal"
fab:menu_icon="#drawable/plus"
fab:menu_openDirection="up"
fab:menu_showShadow="false"
android:visibility="gone">
I have two floating action buttons in one layout file, but only the last one gets the ripple effect applied. If I place them opposite, then it's also the last one getting the ripple. So no matter how they are placed in the layout file, the last one gets a ripple effect on touch and the other does not.
How can this be? Are there any solution to getting the ripple effect on both FABs?
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab_report"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_margin="16dp"
android:clickable="true"
android:src="#drawable/ic_fab_run"
android:elevation="8dp"
app:backgroundTint="#color/primary"
app:rippleColor="#color/blue" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab_run"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_margin="16dp"
android:clickable="true"
android:src="#drawable/ic_fab_run"
android:elevation="8dp"
app:backgroundTint="#color/primary"
app:rippleColor="#color/blue" />
TL;DR: Only the last one FAB in the layout gets the ripple effect, how to solve this?
I don't know the reason, but adding this attribute solved the problem:
app:theme="#style/Base.Widget.AppCompat.ImageButton"
I had a similar issue - turns out I was implementing a TouchListener for one FAB, and consuming the touch event by returning true from the listener callback. Once I changed this to return false, the FAB ripple effect started working again.