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"
Related
I'm setting an image to a FloatingActionButton, however the background tint is for some reason overwriting it.
<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="#drawable/ic_add_circle" />
ic_add_circle is just a simple round image with a cross.
Background tint is automatically set to FFFF4081 also named "colorAccent" in styles and it's shown on top of the image.
My initial ideas was to remove it completely but there's no option to do that. Or just set the tint to be transparent but then it's all white.
Is there a simple way to remove the tint on a FloatingActionButton?
You should use vector drawables in your project.
Click on File, New, Vector Assets and select your preferred vector drawable and OK. This will be added to your drawables folder.
In your FloatingActionButton you can do app:srcCompat="#drawable/ic_add_circle" and don't forget to add vectorDrawables.useSupportLibrary true in gradle default config.
This is what my floating action button is showing
rather that just showing the actual circle part of the image, it tries to fit the background of my .png file into the floating action button.
here is my xml code:
<android.support.design.widget.FloatingActionButton
android:id="#+id/addToKitchenButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:layout_gravity="bottom|end"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:src="#drawable/fab_icon"
/>
how do I get it to look like this?
I've given my .png file a transparent background already, so I don't know what else I need to do. Please Help.
Thank You.
(Assuming you are using Android Studio) -- Rather than using your own custom .png for the FloatingActionButton's src, create a new vector asset with that icon. Right click your res/drawable folder in Android Studio, and then click to New -> Vector Asset.
The icon you are using is built in to Android Studio, although you could import your own vector asset if you were doing something more custom. The XML it generates will look like this:
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0">
<path
android:fillColor="#FF000000"
android:pathData="M19,13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
and you can change the color in fillColor. Set your FloatingActionButton to this drawable in android:src and you're good to go.
Try overriding the "design_fab_image_size" in the dimens file
<dimen name="design_fab_image_size" tools:override="true">56dp</dimen>
Also, add
app:tint="#null"
inside your FAB button XML
You dont have to provide the rounded corner image.
I am using and I my xml looks like this
<android.support.design.widget.FloatingActionButton
android:id="#+id/addFolder"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:clickable="true"
android:src="#drawable/plus"
app:layout_anchor="#id/mainRl"
android:background="#ff0000"
app:layout_anchorGravity="bottom|right|end"
android:onClick="onAddFolderClick"
/>
I am using #ff0000(red) as background color, you use the pink you want. It works fine for me.
For a consistent look there are two tings that you need to do. This answer assumes that you really want the look in the link provide by you which is this
First Step - The background color is nothing but your app accent color you need not provide any specific color. So first make sure you have accent color set in your app theme.
Second Step - Once you have done that you need to use the xml code below. You don't even have to create a new png if you want the look in link. You can easily download one in white color add icon from this official google material icons link . You can use this links for most of standard material icons by google.
<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_white_24dp"/>
Hope this helps. Do let me know if it changed things for you.
EDIT:: If you wish to change the icon color and background to something completely different than your default accent color then you have to use these attributes-
//for custom background
app:backgroundTint="#color/yourCustomColor"
//for custom icon color
android:tint="#color/yourCustomColor"
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" />
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"
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: