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.
Related
I have a contraint.Group inside my item_layout that I will use it in a recyclerView:
<android.support.constraint.Group
android:id="#+id/constraintGroup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:constraint_referenced_ids="imageView, textView" />
I also set the onClickListener for this group in the activity that works perfectly. The problem is that every time I tap on the group, the ripple effect isn't there.
Anyone knows what should I do to have that effect in a constraint.Group?
I tried adding the attribute android:foreground="?selectableItemBackground" to the parent and the constraint.Group but it didn't work :(
A Group is only for controlling visibility. You cannot control arbitrary UI attributes of the members of a group, such as the background. Instead, you would need to put your background on the actual widgets.
You can try using androidx.constraintLayout.widget.Group. It is an updated version of android.support.constraint.Group.
The following code adds the ripple effect
android:clickable="true"
android:focusable="true"
android:background="?attr/selectableItemBackground"
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.
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
I cannot find a way to get a FAB with no border. For example when I try:
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/fab"
android:background="#android:color/transparent"
android.support.design:fabSize="normal"
android:adjustViewBounds="true"
style="#style/Fab"/>
I get:
Notice the border still around the FAB. I have tried adjustViewBounds="true" and android:background="#android:color/transparent" both of which are the suggested solutions for getting rid of the border on an ImageView (which FAB extends) but neither work. How can I get rid of this border?
Note: all #style/Fab does is position the button, nothing to do with border.
Just add app:borderWidth="0dp" in your layout file:
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/fab"
app:borderWidth="0dp"
android:background="#android:color/transparent"
android.support.design:fabSize="normal"
android:adjustViewBounds="true"
style="#style/Fab"/>
There is also added advantage of adding this, it fixes the problem of square FAB in API<15.
Update: The latest update for android support does not need borderwidth=0dp to fix the square FAB.
Answer to comment by #Zvi
To make background of the button transparent, use this line :
app:backgroundTint="#00FFFFFF"
The hash code for transparent background is : #00FFFFFF
To change the color of the icon inside the button, use this :
android:tint="#800080"
#800080 is the hash code for purple
For accessing hash codes for different colors, go here: http://www.color-hex.com/color-palettes/
Just copy the hash codes and paste it wherever you want it.
Turns out it was
app:borderWidth="0dp"
How stupid of me. Thank you #Ranjith.
This somehow also added a shadow under the button:
I think the title is pretty explicit about my problem... So here is my layout :
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:id="#+id/button_action"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Login" />
<ProgressBar
android:id="#+id/progress_bar"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_centerInParent="true"/>
</RelativeLayout>
On android SDKs < 21, no problem, the ProgressBar is correctly displayed over the Button and centered in the Button. But on Android 5.0, the ProgressBar is displayed behind the Button.
So you can see it's correctly positionned it when you activate the option "Show layout bounds" in Developer Options settings, but you can't see anything on the screen without that option.
Would anybody know how to fix this? I guess it's a matter of elevation recently introduced, but I really don't know how to take care of it.
For the record, I'm using the recently released Theme.AppCompat style from the support.v7.
EDIT:
I also tried to apply setElevation(0) and setTranslationY(0) to the Button programmatically but it didn't change anything. So I wonder if it has to deal with the elevation.
You can add the android:translationZ attribute to the ProgressBar:
<ProgressBar
android:id="#+id/progress_bar"
android:layout_width="50dp"
android:layout_height="50dp"
android:translationZ="2dp"
android:layout_centerInParent="true"/>
Same issue here, my simple "hack" was too wrap the Button into another FrameLayout.
This way I don't care about the api version and other elevation issue ;)
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" >
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:id="#+id/button_action"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Login" />
</FrameLayout>
<ProgressBar
android:id="#+id/progress_bar"
android:layout_width="50dp"
android:layout_height="50dp" />
</FrameLayout>
Same question being asked here, with a better explanation of the issue:
https://stackoverflow.com/a/27216368/235910
To quote #CommonsWare:
The problem appears Android 5.0's elevation property. Apparently,
the RelativeLayout Z-axis ordering is tied into elevation. If both
widgets have the same elevation, the RelativeLayout will determine
the Z-axis order -- you can see that if you were to switch your layout
to be both Button widgets, for example. However, if one widget
(Button) has an elevation, and another widget (ImageView) does
not, the elevation will take precedence.
You can remove the Button elevation via
android:stateListAnimator="#null" or by defining your own custom
animator. Or, you can add some elevation to your ImageView to
get it to be higher on the Z axis than is the Button.
It is better to set android:translationZ more than 2dp. Your view/widget will disappear when you press the button. I explained the reason here.
<!-- Elevation when button is pressed -->
<dimen name="button_elevation_material">1dp</dimen>
<!-- Z translation to apply when button is pressed -->
<dimen name="button_pressed_z_material">2dp</dimen>
Button have these two values and defined in the framework.
If you add 'androidx.core:core' to your build.gradle, you can use this code for API < 21:
ViewCompat.setTranslationZ(viewToElevate, 5);
By default, if you want to show a view on top of a Button, it should have an elevation of at least 2dp.
This is caused by the fact that the elevation of a button is governed by their stateListAnimator. So long as it has one, setting the elevation to the button itself doesn't do anything. The stateListAnimator of Widget.MaterialComponents.Button has a default elevation of #dimen/mtrl_btn_elevation (2dp), so that's the elevation you have to take into account.
Doing android:stateListAnimator="#null" will also work, but that will get rid of any shadow effects at the button.