current FAB
I would like to know how to change the icon color of the FAB (Floating Action Button) widget supplied by the 'com.android.support:design:22.2.0' library from green to white.
style.xml
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/color_primary</item>
<item name="colorPrimaryDark">#color/color_primary_dark</item>
<item name="colorAccent">#color/accent</item>
</style>
<color name="color_primary">#00B33C</color>
<color name="color_primary_dark">#006622</color>
<color name="accent">#FFB366</color>
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<include android:id="#+id/toolbar" layout="#layout/toolbar" />
<TextView android:id="#+id/text"
android:text="#string/hello_world"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:paddingTop="16dp"
android:textSize="20sp" />
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:scrollbars="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="8dp"
android:paddingRight="8dp"
android:paddingTop="8dp"
android:paddingBottom="16dp" />
</LinearLayout>
<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:src="#android:drawable/ic_input_add"
android:layout_margin="24dp"
app:elevation="6dp"
app:pressedTranslationZ="12dp"
app:borderWidth="0dp" />
UPDATE 2
If you are using com.google.android.material.floatingactionbutton.FloatingActionButton, use app:tint
app:tint="#android:color/white"
UPDATE
Refer to the answer of #Saleem Khan which is the standard way to set the app:tint using:
android:tint="#android:color/white"
via XML on FloatingActionButton.
OLD (June 2015)
This answer was written before October 2015, when android:tint on FloatingActionButton was supported only with API >= 21.
You can change it programmatically using ColorFilter.
//get the drawable
Drawable myFabSrc = getResources().getDrawable(android.R.drawable.ic_input_add);
//copy it in a new one
Drawable willBeWhite = myFabSrc.getConstantState().newDrawable();
//set the color filter, you can use also Mode.SRC_ATOP
willBeWhite.mutate().setColorFilter(Color.WHITE, PorterDuff.Mode.MULTIPLY);
//set it to your fab button initialized before
myFabName.setImageDrawable(willBeWhite);
Using android:tint property you can set the color like this
<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:tint="#android:color/white"
android:src="#android:drawable/ic_input_add"
/>
If you are using Material Components
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:layout_gravity="bottom|end"
app:fabSize="normal"
app:tint="#color/colorAccent"
app:srcCompat="#drawable/ic_google"/>
If you want to use icon default color, change app:tint="#null"
You have to change app:tint for that to work. android:tint didn't do any change for me.
It's easier than get the drawables, you only need to access to the color filter and set it to the color that you want.
FloatingActionButton myFab = (FloatingActionButton) findViewById(R.id.myfabid);
myFab.setColorFilter(Color.WHITE);
Since FloatingActionButton extends ImageView we can use ImageViewCompat to tint the icon:
ImageViewCompat.setImageTintList(
floatingActionButton,
ColorStateList.valueOf(Color.WHITE)
);
Use the white version of ic_add from the google design site.
android:tint looks like a clean solution but it is not supported below API level 21
Using a bitmap adds less complexity to your app than attempting to change the color of an existing icon programmatically. Less complexity means fewer things to test :)
Try this code
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:backgroundTint="#color/sm_blue"
app:tint="#color/white"
android:layout_margin="#dimen/fab_margin"
app:srcCompat="#android:drawable/ic_input_add" />
Result
If you are using material FAB use app:tint to change the color of the icon instead of android:tint
If you want to change the color of the icon in CollapsingToolbarLayout use the following code
app:tint="#color/white"
Use the app instead of Android
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/add_loan"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/medium"
android:layout_marginBottom="16dp"
android:backgroundTint="#color/ci_blue"
android:theme="#style/fabtheme"
app:srcCompat="#drawable/ic_baseline_add_24"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1"
app:layout_constraintStart_toStartOf="parent"
app:rippleColor="#color/white" />
theme
<style name="fabtheme" parent="Widget.Design.FloatingActionButton">
<item name="colorOnSecondary">#color/white</item>
</style>
or
use the attribute
app:tint="#color/white"
For API >= 21
My Solution to change FloatingActionButton icon color programmatically
val fab = FloatingActionButton(requireContext())
fab.apply {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
imageTintList = ColorStateList.valueOf(Color.WHITE)
}
You can make your custom style:
<style name="FloatingButton" parent="Widget.MaterialComponents.FloatingActionButton">
<item name="colorSecondary">#color/red</item>
<item name="colorOnSecondary">#color/white</item>
</style>
Where colorSecondary is the background and colorOnSecondary is the color of the drawable of the button.
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_phone"
android:theme="#style/FloatingButton" />
If you are using com.google.android.material.floatingactionbutton.FloatingActionButton
Then
To change Background Color of Floating Action Button, use app:backgroundTint
To change Floating Action Button's Icon's color, use app:tint
To change Floating Action Button's Icon Drawable, use app:srcCompat
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:backgroundTint="#color/white"
app:srcCompat="#drawable/fb_icon"
app:tint="#android:color/black" />
If you are using material FAB, you can style it programmatically using the below code in Kotlin.
fab.supportImageTintList = ContextCompat.getColorStateList(context, R.color.fab_icon_tint)
If you use Extended, set app:iconTint you can do like this:
<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
android:id="#+id/fAB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginBottom="16dp"
android:clickable="true"
android:focusable="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:icon="#drawable/d0"
app:iconTint="#color/white"
app:shapeAppearanceOverlay="#style/ShapeAppearanceOverlay.Material3.FloatingActionButton"
tools:ignore="SpeakableTextPresentCheck" />
This will keep the original color of the icon.
app:tint="#null"
or
android:tint="#null"
In Java
private FloatingActionButton login;
login = findViewById(R.id.loginbtn);
login.setColorFilter(android.R.color.white);
In XML
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/loginbtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:backgroundTint="#color/colorPrimaryDark"
android:src="#drawable/loginicon"
app:rippleColor="#color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/pass_l" />
Related
I am using a FAB widget and I want to add a 2 coloured icon in it. Is that possible? This is my current code right now:
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/notificationFAB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:fabSize="mini"
android:tintMode="multiply"
android:backgroundTint="#color/colorWhite"
android:layout_marginTop="5dp"
app:tint="#color/colorPrimaryLight"
app:rippleColor="#color/colorPrimary"
android:layout_marginHorizontal="10dp"
android:src="#drawable/active_notif_final"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:borderWidth="0dp"
/>
I did a workaround: made the colors of the icon light and added tintMode as multiply to get the original color. But it still doesn't look good.
workaround
Original
<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
android:id="#+id/notificationFAB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:backgroundTint="#color/colorWhite"
android:layout_marginTop="5dp"
app:rippleColor="#color/colorPrimary"
android:layout_marginHorizontal="10dp"
app:icon="#drawable/active_notif_final"
app:iconTint="#color/colorPrimaryLight"
app:iconTintMode="multiply"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:borderWidth="0dp"
/>
with extended FAB:
By default, the icon (app:srcCompat) is tinted with the app:tint color as per the FloatingActionButton documentation.
You can disable this behavior by adding app:tint="#null" to your fab:
<com.google.android.material.floatingactionbutton.FloatingActionButton
app:srcCompat="#drawable/..."
app:tint="#null"
.../>
In the ExtendedFloatingActionButton the app:icon is tinted with the app:iconTint:
<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
app:icon="#drawable/...."
app:iconTint="#null"
.../>
Using google.android.material:
Is it possible to make action button rectangle ?
Is it possible to move it a little higher / lower ?
I am talking about the middle circle button.
You can use the app:shapeAppearanceOverlay attribute to achieve a square button and the app:fabCradleVerticalOffset attribute to change the distance of the FAB to the BottomAppBar.
Something like:
<com.google.android.material.bottomappbar.BottomAppBar
app:fabCradleVerticalOffset="16dp"
app:fabCradleRoundedCornerRadius="0dp"
app:fabCradleMargin="0dp"
..>
<com.google.android.material.floatingactionbutton.FloatingActionButton
app:shapeAppearanceOverlay="#style/SquareFloatingShapeOVerlay"
../>
with:
<style name="SquareFloatingShapeOVerlay" parent="">
<item name="cornerSize">0dp</item>
</style>
If you want a rectangular shape you can use a ExtendedFloatingActionButton instead of the FloatingActionButton.
Something like:
<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
app:layout_anchor="#id/bottom_app_bar"
app:shapeAppearanceOverlay="#style/ShapeAppearanceOverlayExtended"
../>
with:
<style name="ShapeAppearanceOverlayExtended" parent="">
<item name="cornerFamily">rounded</item>
<item name="cornerSize">0dp</item>
</style>
Note: it requires the version 1.1.0 of the Material Components Library.
Try this: If you are using FloatingActionButton
app:borderWidth="0dp"
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_add"
android:layout_marginRight="20dp"
app:fabSize="normal"
android:elevation="#dimen/fab_elevation"
android:background="#000000"
app:borderWidth="0dp"
android:stateListAnimator="#animator/fab_anim"
android:layout_gravity="center_horizontal"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true" />
Hope this will help !
To change the shape of the Floating Action Button, you can create a separate resource file in the drawable folder for eg: shape.xml as-
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#color/colorAccent" />
and then in Floating Action Button add the following property:
android:background="#drawable/shape"
Also, you can use margin to move it higher.
Use elevation attribute to FAB
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottomNavigationView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="?android:attr/windowBackground"
app:menu="#menu/nav_items" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/floatingActionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center_horizontal"
android:layout_marginBottom="40dp"
android:clickable="true"
app:elevation="8dp"
app:srcCompat="#android:drawable/ic_input_add" />
I'm using latest material components - 1.1.0-beta01.
When ExtendedFloatingActionButton expands, its height also reduces.
Here is how xml layout looks:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
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:id="#+id/main_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="56dp"
android:text="Text"
android:textColor="#02220D"
android:backgroundTint="#F2C203"
style="#style/Widget.MaterialComponents.ExtendedFloatingActionButton"
android:textSize="15sp"
android:fontFamily="sans-serif-medium"
android:textStyle="normal"
android:layout_marginBottom="16dp"
android:layout_marginEnd="16dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:iconTint="#02220D"
app:icon="#drawable/ic_camera"
app:iconPadding="10dp"
android:insetLeft="0dp"
android:insetBottom="0dp"
android:insetTop="0dp"
android:insetRight="0dp"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
I tried to set min and max height, but it didn't work. Any idea how to achieve the same height when button is expanded and shrank?
Thanks.
The ExtendedFloatingActionButton is a MaterialButton.
You can use the android:minHeight attribute:
<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
android:minHeight="56dp"
../>
Otherwise you can define a custom style:
<style name="CustomExtendedFloating" parent="Widget.MaterialComponents.ExtendedFloatingActionButton.Icon">
<item name="android:minHeight">56dp</item>
</style>
Try setting app:collapsedSize property with your required size
app:collapsedSize="56dp"
Instead of hardcoded value use the one provided by the material library :
<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
android:minHeight="#dimen/design_fab_size_normal"
It's worth noting, according to the spec for FAB and Extended FAB, in the extended state, it's not as tall. https://material.io/components/buttons-floating-action-button/#specs
I have tried this solution: https://stackoverflow.com/a/54074154/10299002
which works great as long as the FAB is over a dark background. However, it seems to break when it passes over a white background. What might be the issue?
Here is my FAB:
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:theme = "?appAccentStyle"
android:id="#+id/button_fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="invisible"
android:layout_margin="16dp"
app:backgroundTint="?colorFloatingActionButtonBorder"
android:src="#drawable/ic_arrow_downward_24dp"
android:tint="?colorAccent"
android:backgroundTint="?colorFloatingActionButtonBackground"
tools:visibility="visible"
android:layout_gravity="end|bottom" />
This is the style being applied:
<style name="LimeColorAccent">
<item name="colorAccent">#color/Lime</item>
<item name="appAccentStyle">#style/LimeColorAccent</item>
<item name="colorFloatingActionButtonBorder">#color/LimeTranslucentBorder</item>
<item name="colorFloatingActionButtonBackground">#color/LimeTranslucent</item>
</style>
And here are the colors used:
<color name="Lime">#FFCDDC39</color>
<color name="LimeTranslucentBorder">#4cCDDC39</color>
<color name="LimeTranslucent">#26CDDC39</color>
Output:
Edit:
Tried this solution: https://stackoverflow.com/a/57307389/10299002
My fab.xml:
(Same as in Solution)
My FloatingActionButton:
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/button_fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_arrow_downward_24dp"
android:background="#drawable/fab"
android:layout_margin="16dp"
android:layout_gravity="end|bottom"
app:fabSize="normal"
app:backgroundTint="#55990000"
app:borderWidth="0dp"
app:elevation="2dp"
tools:visibility="visible" />
Output: (Inner Circle Still Broken)
I used you code and directly used color. and found two result with black background and white background .
and the code:
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/button_fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="visible"
android:layout_margin="16dp"
app:backgroundTint="#4cCDDC39"
android:src="#drawable/ic_action_profile"
android:tint="#color/colorAccent"
app:borderWidth="2dp"
android:backgroundTint="#26CDDC39"
tools:visibility="visible"
android:layout_gravity="end|bottom" />
You should create your own FAB style extending com.google.android.material.floatingactionbutton.FloatingActionButton as parent, to properly custom your button.
Check out this answer, it should help you. The idea is to create your own border.
FloatingActionButton only provides app:borderWidth to play with border thickness.
I have created a floating action button, and made my own image (at each of dpi sizes), but there is a red circle around it (image below). Here is my xml defining the button
<android.support.design.widget.FloatingActionButton
android:id="#+id/addplant"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="#dimen/fab_margin"
android:src="#mipmap/add_plant"/>
Here is my source image (#192x192), and a screenshot of what i'm seeing in android studio.
You can try the below -
<android.support.design.widget.FloatingActionButton
...
...
android:src="#drawable/icon" // change backgroung icon
app:backgroundTint="#android:color/transparent" // change background color
/>
setting tint to transparent will override that primary color pink you have given in styles.
Try using XML attribute app:backgroundTint
<android.support.design.widget.FloatingActionButton
android:id="#+id/addplant"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="#dimen/fab_margin"
app:backgroundTint="#color/orange" // -----> your background color
android:src="#mipmap/add_plant" />
EDIT 2
No need to use app:backgroundTint juse USE android:scaleType="center" in your FloatingActionButton it will work
<android.support.design.widget.FloatingActionButton
android:id="#+id/addplant"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="#dimen/fab_margin"
android:scaleType="center"
android:src="#mipmap/add_plant" />
OUTPUT
Try this
<android.support.design.widget.FloatingActionButton
android:id="#+id/addplant"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="#dimen/fab_margin"
android:src="#drawable/add_plant"/>
android:src="#drawable/add_plant"
<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="#FFFFFF"
android:pathData="M19,13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
</vector>
OUTPUT
EDIT
To support vector drawablea add this in your build.gradle file
defaultConfig {
vectorDrawables.useSupportLibrary = true
}
Use this
app:useCompatPadding="true"
Just use the + symbol alone as source. You need not pass the whole image with green background. To set the green background color use app:backgroundTint="#color/green"
Change your code like this and use green color for backgroundTint and plus icon as source:
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:backgroundTint="#color/green"
android:src="#drawable/ic_plus" />
You can use background color
app:backgroundTint="#color/green"
remove background color from image, use image without background https://cdn.pixabay.com/photo/2016/10/10/01/49/plus-1727487__340.png
<android.support.design.widget.FloatingActionButton
android:id="#+id/addplant"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="#dimen/fab_margin"
app:backgroundTint="#color/green"
android:src="#mipmap/add_plant"/>
Because Floating action button is colored by the colorAccent attribute in your theme. you can set the background tint to green. I have updated your code.
<android.support.design.widget.FloatingActionButton
android:id="#+id/addplant"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="#dimen/fab_margin"
android:backgroundTint="#4CAF50"
android:src="#mipmap/add_plant"/>