I wanted to implement a floating action button in android studio and I followed all the steps: Adding dependencies, adding the xmlns to the layout and making the floatingbuttion in the xml as follows:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:fab="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.github.clans.fab.FloatingActionButton
android:id="#+id/fab"
android:layout_width="56dp"
android:layout_height="56dp"
android:layout_gravity="bottom|right"
android:layout_marginBottom="8dp"
android:layout_marginRight="8dp"
fab:fab_colorNormal="#color/primary"
fab:fab_colorPressed="#color/accent"
fab:fab_colorRipple="#color/primary_dark" />
</FrameLayout>
but in the preview I got a gray, empty square. What am I doing wrong?
I am not sure, but I think you have to include a src
Please reply if it helped you!
<android.support.design.widget.FloatingActionButton
android:layout_width="100dp"
android:layout_height="100dp"
android:id="#+id/fab"
android:src="#drawable/abc_ic_search_api_mtrl_alpha"
android:layout_alignBottom="#+id/recyclerview"
android:layout_alignRight="#+id/recyclerview"
android:layout_alignEnd="#+id/recyclerview" />
Please add the code "app:borderWidth="0dp" as property.
Related
i have problem with FloatingActionButton in RelatieLayout. I use DP for margin top and left. When i change device button is not on it's place. You can see on screens. First one is from editor, second from device.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="3dp"
android:paddingLeft="3dp"
android:paddingRight="3dp"
android:paddingTop="3dp">
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerViewFloor5"
android:layout_width="match_parent"
android:layout_height="match_parent"></android.support.v7.widget.RecyclerView>
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="430dp"
android:layout_marginLeft="300dp"
app:backgroundTint="#color/primaryColor"
android:src="#drawable/ic_action_calendar"
app:fabSize="normal"
android:id="#+id/floorActionButton"/>
</RelativeLayout>
[
I also tried android:gravity="center|bottom" but nothing happens.
I also tried android:gravity="center|bottom" but nothing happens.
Since you are using RelativeLayout - gravity won't work. Instead use android:layout_alignParentBottom along with the margins
<RelativeLayout
....
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_margin="16dp"
app:backgroundTint="#color/primaryColor"
android:src="#drawable/ic_action_calendar"
app:fabSize="normal"
android:id="#+id/floorActionButton"/>
</RelativeLayout>
Try this...Don't use margin to set FloatingActionButton position always use gravity.
Follow this tutorial from androidhive.
https://www.androidhive.info/2015/12/android-material-design-floating-action-button/
I have set layoutgravity but use appropriately according to the parentlayout properties for gravity.
If you follow the tutorial above it will be easy for in my case i placed the fab in a </android.support.design.widget.CoordinatorLayout> and included the layout inside it like in the tutorial.
Just follow it it will be easy just don't use margin to set its position it will break in different screens like your above error .
<android.support.design.widget.FloatingActionButton
android:id="#+id/floorActionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
app:backgroundTint="#color/primaryColor"
android:src="#drawable/ic_action_calendar"
app:fabSize="normal"/>
How make action float menu with android.support.design
I maked layout with these buttons, and then include to fragment layout. But maybe i make something wrong... And you have some ideas to help me.
fab.xml
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/fab_menu"
android:layout_margin="16dp"
android:src="#drawable/ic_add" />
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/fab_done"
android:layout_margin="16dp"
android:src="#drawable/ic_done" />
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/fab_cancel"
android:layout_margin="16dp"
android:src="#drawable/ic_cancel" />
And how make animation, when I click at the button to show another buttons?
There are lots of cool libraries that were designed to make it easy to create different FABs.
library by futuresimple
library by Clans
and library by makovkastar
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">
I've just started android development and trying the new material design. is a screenshot of my mainactivity which has a FloatingActionButton but it doesnt applying any elevation (no shadows).
How can I enable shadow on this new widget (android.support.widget.FloatingActionButton).
This is code from layout xml
<android.support.design.widget.FloatingActionButton
android:id="#+id/add_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:src="#drawable/ic_add_action"
android:layout_margin="16dp"
android:elevation="10dp"
android:padding="10dp"/>
Any help appreciated. Thanks
Please note I'd like to use android design library only not any other github libraries.
After a lot of research, I've found the proper way to use FAB with no issues. Use the code below as template:
<android.support.design.widget.FloatingActionButton
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/your_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="#dimen/floating_button_margin_bottom"
android:layout_marginRight="#dimen/floating_button_margin_right"
app:elevation="#dimen/floating_button_elevation"
app:borderWidth="0dp"
app:rippleColor="#color/your_ripple_color"
app:backgroundTint="#color/your_bg_color" />
I'm just testing the floating action button now. And for me it works.
Try adding app:borderWidth="0dp" for your button, this might solve the problem.
I saw in some other posts that it might be a problem in the design library.
Your XML layout might missed these code:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
app:xmlns="http://schemas.android.com/apk/res-auto"
... >
<android.support.design.widget.FloatingActionButton
...
app:borderWidth="0dp"
app:elevation="4dp" />
...
</RelativeLayout>
EDIT
For more information about FloatingActionButton, see this post, which explains the issue and design guide.
Check the manifest file and delete the next properties:
android:hardwareAccelerated="false"
android:largeHeap="true"
I just started to use the new Deisgn library from Google : 'com.android.support:design:22.2.0'
I use the FloatingActionButton and I have a small issue between Android below 5.0 and over 5.0.
Watch the screenshot :
Android 4.4 :
Android 5.0 :
As you can see, on Android 4.4, there is a margin around the FAB. I think this is for displaying the shadow. But IT'S OVERSIZED !
So is it a bug (or a forget of Google) or just the normal behavior ?
The xml of the view hosting he fabs :
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="fr.freemo.freemo.activities.ListFreemoCityActivity">
<include
android:id="#+id/toolbar"
layout="#layout/view_toolbar" />
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/toolbar">
</FrameLayout>
<ProgressBar
android:id="#+id/progressBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab_add"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="#dimen/margin_fab"
android:layout_marginRight="#dimen/margin_fab"
android:elevation="#dimen/fab_elevation_lollipop"
android:src="#drawable/ic_action_new"
app:backgroundTint="#color/color_app"
app:fab_type="normal" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab_display"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/fab_add"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="#dimen/margin_fab"
android:layout_marginRight="#dimen/margin_fab"
android:elevation="#dimen/fab_elevation_lollipop"
android:src="#drawable/ic_map_white"
android:tint="#color/color_app"
app:backgroundTint="#color/white"
app:fab_type="normal" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab_display_list"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/fab_display"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="#dimen/margin_fab"
android:layout_marginRight="#dimen/margin_fab"
android:elevation="#dimen/fab_elevation_lollipop"
android:src="#drawable/ic_action_list"
android:tint="#color/color_app"
android:visibility="invisible"
app:backgroundTint="#color/white"
app:fab_type="normal" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab_display_grid"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/fab_display_list"
android:layout_alignParentRight="true"
android:layout_marginBottom="#dimen/margin_fab"
android:layout_marginRight="#dimen/margin_fab"
android:elevation="#dimen/fab_elevation_lollipop"
android:src="#drawable/ic_view_module_white"
android:tint="#color/color_app"
android:visibility="invisible"
app:backgroundTint="#color/white"
app:fab_type="normal" />
</RelativeLayout>
It was an issue (check a bug report created by me: https://code.google.com/p/android/issues/detail?id=175330) and should be fixed in the future release of the support-design library.
Its a bug for API 21. You can make arrow visible by removing some margin.
Here is the way You can solve it and after testing on different devices it seems to work:
https://stackoverflow.com/a/31337162/3173384
Edited
Bug has already been fixed. Just update all support libraries to v 22.2.1
compile 'com.android.support:design:22.2.1'
compile 'com.android.support:appcompat-v7:22.2.1'
compile 'com.android.support:cardview-v7:22.2.1'
compile 'com.android.support:recyclerview-v7:22.2.1'
This has been specified to not being an actual bug. Instead, this is the expected behavior.
Quoting a google dev answer:
This isn't a bug and is working as intended, in the sense that it's something that which is completely unavoidable. Within a CoordinatorLayout we have some control and can detect certain situations (edges) where it can offset the FAB. This is a hack though.
If you don't like it, set elevation to 0dp and be done with it.
As someone other stated here, we should define
xmlns:app="http://schemas.android.com/apk/res-auto"
app:borderWidth="0dp"
app:elevation="0dp"
or, even better, define your elevation in dimens.xml based on the API version you are working with.
Most common case would be:
<!-- dimens.xml(v21) -->
<dimen name="custom_fab_elevation">#dimen/fab_elevation</dimen>
<!-- dimens.xml(lower) -->
<dimen name="custom_fab_elevation">0dp</dimen>