when I set Image for FloatingActionButton it will be margin at all directions .so I want the ActionButton to be filled with image without any margin.
Use the attribute
android:src="YOUR_DRAWABLE"
in your android.support.design.widget.FloatingActionButton block of XML layout.
Also in you styles.xml, under the style you are using (normally it is AppTheme) use
<item name="colorAccent">#android:color/transparent</item>
I think this is what you want to achieve. Use this code.
<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"
android:fitsSystemWindows="true"
android:cropToPadding="true"
android:background="#android:color/primary_text_dark"
android:src="#drawable/zvam" />
You will get something like this.
http://i.stack.imgur.com/FC4xg.png
Sorry that I do not answer your question directly (I would comment if I could), but I don't think that this is a good idea.
It seems to me that you just want to have a done/check-image on the FAB. If that's the case, you should use the "done" icon from google's material-icons page: https://design.google.com/icons/#ic_done
Also, have a look at google's designguidelines for FABs: https://www.google.com/design/spec/components/buttons-floating-action-button.html.
Related
As title says, I don't know how to fix this issue. I read this problem but that was in 2018, I'm not very familiar with all those libraries and dependencies how it all works. But judging from my Declared Dependencies, from Android Studio, this is what I got:
I would like to add some kind of "Attach document" icon/image to the FAB. I tried to do this by adding a New Vector asset, but images do not appear in my drawable folder. How can I add a nice icon/image to my project, and set it to a FAB?
Here is XML:
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:icon="#drawable/attache_file">
</com.google.android.material.floatingactionbutton.FloatingActionButton>
I found the solution, just add this below statement inside dimens.xml
<dimen name="design_fab_image_size" tools:override="true">56dp</dimen>
And must need to add app:tint="#null" inside your FAB design xml
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_anchor="#id/bottomBar"
app:srcCompat="#drawable/ic_logo"
app:tint="#null" />```
Happy to help :)
To use the com.google.android.material.floatingactionbutton.FloatingActionButton add the Material Components library:
implementation 'com.google.android.material:material:1.1.0'
Then use the app:srcCompat attribute:
<com.google.android.material.floatingactionbutton.FloatingActionButton
style="#style/Widget.MaterialComponents.FloatingActionButton"
app:srcCompat="#drawable/..."
.../>
Per the documentation you have to use android:src="#drawable/attache_file"
I would like to design this layout on my project:
as many googleing AFIAK is some library to can design that on Android but I can't find it, I take this screen shot from Android material website. Can anybody help me to design that? thanks in advance
At the bottom of the material design page there's a link on how you can implement that on Android, Flutter, iOS, etc.
As for Android, you'll have to use the BottomAppBar widget to achieve what you want. You can also read more about it on the docs.
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- Other components and views -->
<com.google.android.material.bottomappbar.BottomAppBar
android:id="#+id/bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:navigationIcon="#drawable/ic_menu_24"/>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_anchor="#id/bar"/>
</android.support.design.widget.CoordinatorLayout>
Taken from here.
You can change the FAB position by using the method setAnchorId(int) with the following parameters:
FAB_ALIGNMENT_MODE_CENTER
FAB_ALIGNMENT_MODE_END
Alternatively you can set that in the XML using the app:layout_anchor attribute.
P.S.: As stated on the docs, to change the BottomAppBar background use the app:backgroundTint attribute instead of the default android:background.
I am trying to make a button that has a shadow using elevation with a background image being my sign in with gmail png. The button is contained within a relative layout. The elevation won't show no matter what I try to do. I tried solutions from other forum questions and none worked.
Here is my code for the button
<Button
android:id="#+id/google"
android:layout_width="270dp"
android:layout_height="38dp"
android:layout_marginTop="30dp"
android:layout_centerHorizontal="true"
android:background="#drawable/google"
android:elevation="10dp"
android:layout_below="#id/slogan"/>
The google drawable is a png image that I exported from Adobe XD.
Could someone please give me a pointer on what I am doing wrong? Thanks.
Additionally, I realize that if I set the background of the button to android:color/white the shadow appears. So I think the issue is with the png drawable? Does elevation not work with png images? Is there a workaround?
Use below the line of code to show an elevation in button
android:outlineProvider="bounds" – K. Sopheak
That works, thanks!
try this I hope it helps, because another view or layout just after your button is hiding shadow
android:layout_marginBottom="16dp"
For Material Button, I tried the following and it worked
android:translationZ="5dp"
Since you're using an image, replace the <Button> tag with that of an <ImageButton>. So, your workaround code would be:
<ImageButton
android:id="#+id/google"
android:layout_width="270dp"
android:layout_height="38dp"
android:layout_marginTop="30dp"
android:layout_centerHorizontal="true"
android:src="#drawable/google"
android:elevation="10dp"
android:layout_below="#id/slogan"/>
Take note that the android:src attribute is being used here rather than the android:background attribute.
This one worked for me!
try this , I hope this help you ||
android:layout_margin="5dp"
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:
The title is pretty self explaining.
The following code does not render shadow below the Floating Action Button. What can be done to render shadow? Is this feature really not supported even on API 21+?
<android.support.design.widget.FloatingActionButton
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="#drawable/ic_add"
android:clickable="true" />
Note: Adding android:elevation does not add shadow on API 21.
Screenshot taken from the example by dandar3:
https://github.com/dandar3/android-support-design
Simply setting app:borderWidth="0dp" resolve this issues for me.
Note: don't forget to add xmlns:app="http://schemas.android.com/apk/res-auto" to your root layout.
This issue should be fixed in next release of android design library.
For API 21+ you need to set app:borderWidth="0dp" and app:elevation="[number]dp". Setting elevation you are giving the size of shadow that you want:
Here is an example of code for API 21+:
<android.support.design.widget.FloatingActionButton
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/locate_user_FAB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/location_off"
app:elevation="6dp"
app:borderWidth="0dp"
android:layout_above="#+id/take_taxi_FAB"
app:backgroundTint="#color/colorAccentGrey">
One important thing to remember for APIs below to 21 (Android 4), is for terms of compatibility FAB will put a margins around your button to draw the shadow. Then you should do something like that (I'm currently using this code and works):
<android.support.design.widget.FloatingActionButton
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/locate_user_FAB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/location_off"
app:elevation="6dp"
app:borderWidth="0dp"
android:layout_above="#+id/take_taxi_FAB"
android:layout_alignParentRight="true"
android:layout_marginRight="#dimen/map_FAB_marginRight"
android:layout_marginBottom="#dimen/locate_user_FAB_marginBottom"
app:backgroundTint="#color/colorAccentGrey">
I prefer to put xmlns:app="http://schemas.android.com/apk/res-auto" at the beginning of the XML, but I put there just to remind you ;]
I was experiencing this same issue and I got it to work by deleting this tag from my AndroidManifest.xml.
android:hardwareAccelerated="false"
I initially added it, together with android:largeHeap="true", because I thought I needed it for a HeatMap in which a large number of points where shown, but then I realized it could work just with android:largeHeap="true".
If this still isn't working for some, there is a significant difference between:
app:elevation="6dp"
app:borderWidth="0dp"
and
app:borderWidth="0dp"
app:elevation="6dp"
Order seems to matter for some reason (The first order works, second doesn't) and this is from the support library 23.3.0
Check manifest in project or libraries in Application tag and delete them
android:hardwareAccelerated="false"
android:largeHeap="true"
But if you need these options then shadows and transformation animations will not work
In case it help, I was using
android:tint="#color/myColor"
instead of
android:backgroundTint="#color/myColor".
Replacing tint by backgroundTint brought back the shadow.