web-dev-qa-db-fra.com

La couleur de la bordure du bouton d'action flottante ne change pas

J'ai changé la couleur Floating Action Button backgroundTintList en utilisant le code suivant:

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

Mais je finis par avoir les informations suivantes sur l’API 4.4.2:

 enter image description here

Tout semble bien sur API 21 <=, mais rien en dessous de API 21, je ai ce problème pour le FAB.

Je crée par programme le FAB comme suit:

    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));

Il m'est également arrivé de courir avec le code officiel source pour les FloatingActionButton et j'ai vu qu'ils instanciaient un borderDrawable ici:

 @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);
}
androidfloating-action-buttonandroiddesignsupport
7
AndyRoid

J'ai fini en ajoutant:

app:borderWidth="0dp"

cela ne crée pas borderDrawable et border n'est pas visible.

11
Ivan Stojkovic

il suffit de changer le coloraccent dans le fichier de styles

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

ajoutez la couleur que vous voulez comme couleur de fond pour FAB

EDIT: okk .. bien voici une alternative à ce que vous pouvez faire .. définir ce FAB dans votre 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" />

et cela apportera des modifications et vous n'aurez alors plus besoin de le faire de manière programmée.

7
curiousMind

Vous aurez probablement besoin de changer les couleurs par programme de manière rétrocompatible:

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

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

2
Ralph Pina

Pour changer simplement la couleur de fond, utilisez: app:backgroundTint="#4000FF00"

Par exemple: 

<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"
        />

Mais si vous voulez le rendre transparent, utilisez les propriétés app:elevation et app:pressedTranslationZ.

Par exemple: 

<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"
        />

Ces propriétés sont utilisées pour donner un effet d'affichage sur le clic et l'altitude au bouton.

1
Ram