Custom View doesn't change colors programmatically

Question

I have a custom View that looks like a "fab" using a View with drawable, and FontIconView (library) to draw our customs icons.

CustomView XML:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <android.support.constraint.ConstraintLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <FrameLayout
            android:id="@+id/round_icon_button_container"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent">

            <View
                android:id="@+id/round_icon_view"
                android:layout_width="@dimen/round_button_size"
                android:layout_height="@dimen/round_button_size"
                android:layout_margin="@dimen/round_button_general_margin"
                android:background="@drawable/circle_shape_map_location"
                android:elevation="@dimen/location_elevation" />

        </FrameLayout>

        <FrameLayout
            android:id="@+id/round_icon_text_container"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintBottom_toBottomOf="@+id/round_icon_button_container"
            app:layout_constraintEnd_toEndOf="@+id/round_icon_button_container"
            app:layout_constraintStart_toStartOf="@+id/round_icon_button_container"
            app:layout_constraintTop_toTopOf="@+id/round_icon_button_container">

            <com.shamanland.fonticon.FontIconView
                android:id="@+id/round_icon_text_icon"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:textColor="@color/error_color_red"
                android:textSize="@dimen/round_button_text_size" />
        </FrameLayout>

    </android.support.constraint.ConstraintLayout>
</FrameLayout>

Shape XML:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="@color/white_clr" />
    <size
        android:width="42dp"
        android:height="42dp" />
</shape>

In CustomView class:

public class BSMRoundIconButton extends FrameLayout {

    @InjectView(R.id.round_icon_view)
    View roundView;

    @InjectView(R.id.round_icon_text_icon)
    FontIconView fontIconView;

    private int mLayoutId;

    public BSMRoundIconButton(@NonNull Context context) {
        super(context);
        init(null);
    }

    public BSMRoundIconButton(@NonNull Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init(attrs);
    }

    public BSMRoundIconButton(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(attrs);
    }

    protected void init(AttributeSet attrs) {
        mLayoutId = R.layout.bsm_round_icon_button_component;
        loadView();
    }

    private void loadView() {
        inflate(getContext(), mLayoutId, this);
        ButterKnife.inject(this);
    }

    public void setRoundBackgroundColor(int color) {
        Drawable drawableCompat = this.roundView.getBackground();
        drawableCompat.setColorFilter(color, PorterDuff.Mode.DST);
        this.roundView.setBackground(drawableCompat);

    }

    public void setRoundSize(int width, int height) {
        this.roundView.getLayoutParams().height = height;
        this.roundView.getLayoutParams().width = width;
    }

    public void setIcon(String icon) {
        this.fontIconView.setText(icon);
    }

    public void setIconColor(int color) {
        this.fontIconView.setTextColor(color);
        invalidate();
    }

    public void setIconSize(int size) {
        this.fontIconView.setTextSize(size);
    }
}

The problem is that we need to change colors of the background and icons.

We did a couple of methods:

public void setRoundBackgroundColor(int color) {
    Drawable drawableCompat = getResources().getDrawable(R.drawable.circle_shape_map_location);
    drawableCompat.setColorFilter(color, PorterDuff.Mode.DST);
    this.roundView.setBackground(drawableCompat);
}

public void setIconColor(int color) {
    this.fontIconView.setTextColor(color);
}

But when used like this:

this.roundIconButton.setRoundBackgroundColor(R.color.bright_green);
this.roundIconButton.setIconColor(R.color.bright blue);

The background doesn't change the color, meanwhile the icon take a mix of colors (in that example, in xml is setted to red, and blue by code) appearing a purple as result.

I tried to invalidate views, but doesn't work to.

Maybe I'm forgetting some step?

Answer 1

You need to call invalidate roundIconButton.invalidate() method after calling roundIconButton.setIconColor(R.color.bright blue); This will cause the view redraw so your color will be updated.

Also inside your custom view, in your setIconColor method as a last line your can add ivalidate() and do the same thing.. just better code formatting.

Let me know if this will fix your problem