Color of the floating button Frame color does not change

Question

I changed the background color of the Floating Action Button backgroundTintList using the following code:

 fab.setBackgroundTintList(ColorStateList.valueOf(mResources.getColor(R.color.fab_color))); 

But in the end, I get the following on API 4.4.2:

Everything looks great on API 21 <=, but everything below API 21, I have this problem for FAB.

I programmatically create a FAB like this:

  FloatingActionButton fab = new FloatingActionButton(this); CoordinatorLayout.LayoutParams layoutParams = new CoordinatorLayout.LayoutParams( ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT); fab.setLayoutParams(layoutParams); layoutParams.rightMargin = mResources.getDimensionPixelSize(R.dimen.activity_horizontal_margin); ((CoordinatorLayout) findViewById(R.id.coordinatorLayout)).addView(fab); CoordinatorLayout.LayoutParams p = (CoordinatorLayout.LayoutParams) fab.getLayoutParams(); p.setAnchorId(R.id.appBarLayout); p.anchorGravity = Gravity.BOTTOM | Gravity.END; fab.setLayoutParams(p); fab.setVisibility(View.VISIBLE); fab.setBackgroundTintList(ColorStateList.valueOf(mResources.getColor(R.color.fab_color))); fab.setImageDrawable(getResources().getDrawable(R.drawable.ic_button)); 

I also happened to run the official source code for the FloatingActionButton , and I saw that they were creating an instance of borderDrawable here:

  @Override void setBackgroundDrawable(Drawable originalBackground, ColorStateList backgroundTint, PorterDuff.Mode backgroundTintMode, int rippleColor, int borderWidth) { // Now we need to tint the original background with the tint mShapeDrawable = DrawableCompat.wrap(originalBackground.mutate()); DrawableCompat.setTintList(mShapeDrawable, backgroundTint); if (backgroundTintMode != null) { DrawableCompat.setTintMode(mShapeDrawable, backgroundTintMode); } final Drawable rippleContent; if (borderWidth > 0) { // BORDER DRAWABLE RIGHT HERE!! mBorderDrawable = createBorderDrawable(borderWidth, backgroundTint); rippleContent = new LayerDrawable(new Drawable[]{mBorderDrawable, mShapeDrawable}); } else { mBorderDrawable = null; rippleContent = mShapeDrawable; } mRippleDrawable = new RippleDrawable(ColorStateList.valueOf(rippleColor), rippleContent, null); mShadowViewDelegate.setBackgroundDrawable(mRippleDrawable); mShadowViewDelegate.setShadowPadding(0, 0, 0, 0); } 

Answer 1

just change coloraccent in stylesheet

 <item name="colorAccent">@color/colorAccent</item> 

add the color you want as background color for fab

EDIT: okk .. well here is an alternative what you can do .. define this FAB 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" app:backgroundTint="@color/fab_color" android:layout_margin="@dimen/fab_margin" android:src="@android:drawable/ic_dialog_email" /> 

and it will make the changes, and then you don’t have to do it programmatically.

Answer 2

I finished adding:

 app:borderWidth="0dp" 

this does not create borderDrawable and the border is not displayed.

Answer 3

To simply change the background color, use: app:backgroundTint="#4000FF00"

For example:

 <android.support.design.widget.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="54dp" android:layout_marginRight="16dp" android:clickable="true" android:src="@drawable/ic_edit" app:layout_anchor="@id/xxxx" app:rippleColor="@android:color/white" app:backgroundTint="#00FF00" app:layout_anchorGravity="bottom|end|right" /> 

But if you want to make it transparent, use the app:elevation and app:pressedTranslationZ .

For example:

 <android.support.design.widget.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="54dp" android:layout_marginRight="16dp" android:clickable="true" android:src="@drawable/ic_edit" app:layout_anchor="@id/xxx" app:borderWidth="0dp" app:rippleColor="@android:color/white" app:backgroundTint="#4000FF00" app:elevation="0dp" app:pressedTranslationZ="0dp" app:layout_anchorGravity="bottom|end|right" /> 

These properties are used to give the effect of viewing the click and height on the button.

Answer 4

You probably need to change the colors programmatically in the opposite way:

DrawableCompat.setTintList(DrawableCompat.wrap(fab.getDrawable()), tintColor); <- icon

DrawableCompat.setTintList(DrawableCompat.wrap(fab.getBackground()), backgroundTintColor); <- background