With the help of this question I built a Floating Action Button to add elements to my Listview
The code is easy:
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
app:backgroundTint="#color/spg_rosa"
app:borderWidth="0dp"
app:elevation="4dp"
app:fabSize="normal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_add_white_48dp"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
/>
The thing is
app:elevation="4dp"
is not working, I can't see any shadow!
I grab the icon from Google : https://www.google.com/design/icons/
Any idea?
EDIT: I'm using it in Samsung S3 Mini ( API 16 )
I just tested your sample on a Samsung S3 Mini (API 16).
For me the elevation works.
because the elevation value is so small it's not very visible, try to increase the value. As BrentM says the elevation is not working if app:borderWidth="0dp" is not added.
Your problem is the "android:layout_alignParentBottom="true", that means your button is right at the bottom edge, try adding at least 10dp of margin at the bottom and it will fix your problem.
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
app:backgroundTint="#color/spg_rosa"
app:borderWidth="0dp"
app:elevation="4dp"
app:fabSize="normal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_add_white_48dp"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_marginBottom="10dp"
/>
Regards!
Thing was My Listview were black!
I changed color theme to white, and I could see the shadow !
Related
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 am getting light grey color below the FloatingActionButton as shown in image. Any one know how to remove it. I tested it on Lollipop version.
My xml code
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:src="#drawable/ic_add_black"
app:borderWidth="0dp"
app:fabSize="mini"
app:rippleColor="#color/colorPrimaryDark" />
Try set elevation:
app:elevation="0dp"
It happens when you set an elevation and the fab element has not space enough to display the "shadow".
Then you can set the elevation as 0dp as suggested above, or set a margin like
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_build_white_36dp"
android:id="#+id/build"
app:elevation="4dp"
android:clickable="true"
android:layout_margin="10dp"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true" />
In this way the "elevation-effect" will appear correctly
I tried to used android.support.design.widget.FloatingActionButton with this XML.
<android.support.design.widget.FloatingActionButton
android:id="#+id/FAB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_done"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_margin="16dp" />
On API 22 it looks great, but shadow is missing
But on API 16 it is acting weird
Am I using this control correctly?
Ok it's turns out that this is a bug in Android Support Design in API 16.
More about it
Workaround for now is to set app:borderWidth="0dp"
I am using FloatingActionButton for api 21+ its showing perfectly ok but if i look it in api 20- then it has four lines in the background.
Below is the xml code of my FloatingActionButton
<android.support.design.widget.FloatingActionButton
android:id="#+id/bt_ok"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="10dp"
android:src="#drawable/ic_done"
app:backgroundTint="#color/primary"
app:borderWidth="0dp" />
The screen for api 21+
The screen for api 20-
Just look at the four thick lines below the FloatingActionButton in the second screen and give me a solution for removing that.
I got the answer for my own question just change the height and width to wrap_content and the problem is solved.
<android.support.design.widget.FloatingActionButton
android:id="#+id/bt_ok"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="10dp"
android:src="#drawable/ic_done"
app:backgroundTint="#color/primary"
app:borderWidth="0dp" />
As the title says, my FloatingActionButton has some weird lines coming out of it only on 4.4 or lower. On Lollipop it works fine.
This is a picture of the issue:
The play image doesn't have those lines in it. My xml:
<android.support.design.widget.FloatingActionButton
android:id="#+id/play"
android:layout_width="48dp"
android:layout_height="48dp"
android:src="#drawable/ic_av_play_arrow"
app:borderWidth="0dp"
app:elevation="6dp"
app:layout_anchor="#+id/image"
app:layout_anchorGravity="center_vertical|right|end"
app:rippleColor="#color/color_primary_light" />
So what am I doing wrong?
EDIT: goes away if I set my elevation to 0dp so I think I'll do that just for older phones
Your problem here is that you're making the FloatingActionButton an unexpected size. The FloatingActionButton in the support library only supports two sizes, and it must be set using the fabSize attribute.
You should change:
<android.support.design.widget.FloatingActionButton
android:id="#+id/play"
android:layout_width="48dp"
android:layout_height="48dp"
to be:
<android.support.design.widget.FloatingActionButton
android:id="#+id/play"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
If you want a smaller version:
<android.support.design.widget.FloatingActionButton
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/play"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:fabSize="mini"
Source: http://developer.android.com/reference/android/support/design/widget/FloatingActionButton.html