Where can I find the plus sign at the center of a Floating Action Button?
Is it made by Android or do I need to do it by my self?
You can find the plus icon on the Vector Asset Studio.
In Android Studio, open an Android app project.
In the Project window, select the Android view.
Right-click the res folder and select New > Vector Asset.
Click the Android icon Button and look for the plus sign
More info here: https://developer.android.com/studio/write/vector-asset-studio.html#materialicon
You can get the Material Icons:
1.Online - from the Material Design Website. The plus icon is called 'add'. Select the icon, pick a colour & size and download the png or svg resource.
2.From Android Studio - using Vector Asset Studio. Check the link for more information. (as suggested by Wilder Pereira in the post below)
based on #Dagnogo's answer, I found this is the simplest way.
<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"
app:srcCompat="#android:drawable/ic_input_add"
android:tint="#android:color/white"/>
The key is using tint property
If you need to change the color change the tint method on the fab. For example I needed the "white plus" in my fab so I did that :
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:tint="#android:color/white" //put your colors here
android:src="#drawable/ic_add_black_24dp"
android:layout_height="wrap_content" />
I think you are searching for this.
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="#dimen/fab_margin"
app:srcCompat="#android:drawable/ic_input_add" />
In 2021, if you want to change the colour of the button, then you need to use the app:tint property over android:tint.
Also, I recommend using app:srcCompat over android:src for better support of vectors.
For better accessibility support, it's important to use the android:contentDescription attribute.
Finally, you can use built-in drawables by using the #android:drawable/ prefix.
Putting it all together:
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="32dp"
android:contentDescription="Add a new item"
app:tint="#android:color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:srcCompat="#android:drawable/ic_input_add" />
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 am trying to change the default FloatingActionButton icon to a add circle icon. I have downloaded the icon ic_add_circle_white_18dp from material.io and added it to the drawable directory inside the andorid project. However when I try to use it inside my activity it displays as a black inner icon as in image
However I want the FAB icon to look like
My FAB icon xml looks like
<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"
app:srcCompat="#drawable/ic_add_fab"
app:elevation="8dp"
app:backgroundTint="#android:color/holo_blue_light"
app:rippleColor="#android:color/white"/>
I have tried setting the app:backgroundTint value but it doesn't effect the inner icon style
Thanks for any help
Importing Clipart corresponding to the add icon from image asset works:
Steps:
1. Right Click on res.
2. Select New->Image Asset
3. In Icon type, select Action Bar and Tab Icons
4. Provide a name
5. Select ClipArt in Asset type and the click on the Clip Art icon.
6. From the content section select add button
7. In theme set HOLO_DARK
6. Click Next and then finish
In order to use this as an icon, include the following in your XML. Note that to use the icon as source android:src="#drawable/ic_add_fab" is used
<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:src="#drawable/ic_add_fab" />
Try downloading and using icon with name "add" instead of "add circle"
This worked for me
<android.support.design.widget.FloatingActionButton
android:id="#+id/logout_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#mipmap/logout"
app:rippleColor="#null"
app:backgroundTint="#null"
app:fabSize="normal"
android:layout_gravity="bottom|center_horizontal"
android:scaleType="center"/>
Also src icon should be the same according to the requirement.
I used 140x140 for xhdpi drawable
Instead of app:srcCompat= use app:src= for images.
Or use fab.setImageResource(R.drawable.ic_add); to programatically set the image.
You need to set scaleType for it to be rendered properly:
android:scaleType="center"
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.
I am trying to learn to work on scrolling activity (android studio) but I am unable to change the default Fab Icon provided by the activity itself. Can someone please provide some guidance about changing the Fab icon to another icon image?
(In short: How to change "mail" Icon to "+" icon)
in your xml change src drawable:
android:src="#android:drawable/ic_dialog_email"
to your desirable icon.
Plus Icon Image add into Drawble folder
Here is image.
Write in your xml
<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:background="#C2185B"
android:src="#drawable/ic_action_add" />
change your android:src="#android:drawable/your_image.png"
where your_image is your image in drawable folder
It took me a while to find the solution a easyone for this simple problem,in .java(Scrolling activity)you will be able to locate
fab,Right click it -->Go to--> Declaration-->The page you land is the page you need to edit for changing the Fab icon.
Upload the fab icon Image you have in
*android:src="#drawable/*****"*.
and the fab icon will be changed
It should be noted that ic_input_add is found in the R.drawable reference at https://developer.android.com/reference/android/R.drawable.html#ic_input_add
In Android Studio 3.3.2 in a new Kotlin program, this setting is found in the activity_main.xml file. The default FloatingActionButton settings are:
<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"
app:srcCompat="#android:drawable/ic_dialog_email"/>
The last line of this code block is being changed to:
app:srcCompat="#android:drawable/ic_input_add"/>
You will notice a preview of the drawable image next to the line number if you are editing in Android Studio 3.3.2. Click this image and you can open the resource. Here you will see a full view of the image and the path to the image. In my case it's in the ~\plugins\android\lib\layoutlib\data\res\drawable-ldpi directory. It may be different for you, but easy enough to determine from there. Other compatible drawables are found there as well.
Here is a list of other drawables from the reference (be sure to check the reference as it may change):
ic_btn_speak_now
ic_delete
ic_dialog_alert
ic_dialog_dialer
ic_dialog_email
ic_dialog_info
ic_dialog_map
ic_input_add
ic_input_delete
ic_input_get
ic_lock_idle_alarm
ic_lock_idle_charging
ic_lock_idle_lock
ic_lock_idle_low_battery
ic_lock_lock
ic_lock_power_off
ic_lock_silent_mode
ic_lock_silent_mode_off
ic_media_ff
ic_media_next
ic_media_pause
ic_media_play
ic_media_previous
ic_media_rew
ic_menu_add
ic_menu_agenda
ic_menu_always_landscape_portrait
ic_menu_call
ic_menu_camera
ic_menu_close_clear_cancel
ic_menu_compass
ic_menu_crop
ic_menu_day
ic_menu_delete
ic_menu_directions
ic_menu_edit
ic_menu_gallery
ic_menu_help
ic_menu_info_details
ic_menu_manage
ic_menu_mapmode
ic_menu_month
ic_menu_more
ic_menu_my_calendar
ic_menu_mylocation
ic_menu_myplaces
ic_menu_preferences
ic_menu_recent_history
ic_menu_report_image
ic_menu_revert
ic_menu_rotate
ic_menu_save
ic_menu_search
ic_menu_send
ic_menu_set_as
ic_menu_share
ic_menu_slideshow
ic_menu_sort_alphabetically
ic_menu_sort_by_size
ic_menu_today
ic_menu_upload
ic_menu_upload_you_tube
ic_menu_view
ic_menu_week
ic_menu_zoom
ic_notification_clear_all
ic_notification_overlay
ic_partial_secure
ic_popup_disk_full
ic_popup_reminder
ic_popup_sync
ic_search_category_default
ic_secure
Change the keyword as given below will show you the add button.
app:srcCompat="#android:drawable/ic_input_add"
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.