Floating Action Button Border Color is not changing

Question

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

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

But I end up getting the following on API 4.4.2:

Everything looks fine on API 21 <= but anything below API 21, I have this problem for the FAB.

I am programmatically creating the FAB like so:

    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 by the official source code for the FloatingActionButton and I saw that they are instantiating a 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

I ended adding:

app:borderWidth="0dp"

this doesn't create borderDrawable and border is not visible.

Answer 2

just change the coloraccent in styles file

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

add color which u want as your 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 changes and then you don't need to be do as programmatically.