Изменение цвета векторного актива программно при нажатии

Question

Я создал следующий векторный актив и вставил его в Imagebutton.

Мне хотелось, чтобы сердце изменило свой цветна красный, если щелкнуть по нему, и вернуться к прозрачному, после повторного щелчка.

Я не смог найти места, описывающего, как изменить цвет всего сердца. Наиболее близким решением, которое я нашел, было:

    ibWhishlist.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            ibWhishlist.setColorFilter(getResources().getColor(R.color.colorRed));
        }
    });

Однако оно изменяет только границу сердца, а не всю форму.

Спасибо

РЕШЕНИЕ:

В конечном итоге я решил создать следующую проблему:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_selected="true"
        android:drawable="@drawable/ic_favorite_red_24dp" />
    <item
        android:drawable="@drawable/ic_favorite_black_24dp" />
</selector>

и внутри моего кода:

ibWhishlist.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        ibWhishlist.setSelected(!ibWhishlist.isSelected());
        if (ibWhishlist.isSelected()) {
            //Handle selected state change
        } else {
            //Handle de-select state change
        }
    }
});

Answer 1

Самый простой способ решить эту проблему, если вы хотите изменить второстепенные вещи, такие как заливка / цвет обводки или ширина обводки во время выполнения, - это две версии с одним и тем же векторным изображением с этими различиями, например, одна из них имееттолько цвет обводки, а другой заполнен:

ic_heart_stroked.xml

<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:pathData="M12,21.35l-1.45,-1.32C5.4,15.36 2,12.28 2,8.5 2,5.42 4.42,3 7.5,3c1.74,0 3.41,0.81 4.5,2.09C13.09,3.81 14.76,3 16.5,3 19.58,3 22,5.42 22,8.5c0,3.78 -3.4,6.86 -8.55,11.54L12,21.35z"
            android:strokeWidth="1"
            android:strokeColor="#000" />
</vector>

ic_heart_filled.xml

<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="#FF000000"
        android:pathData="M12,21.35l-1.45,-1.32C5.4,15.36 2,12.28 2,8.5 2,5.42 4.42,3 7.5,3c1.74,0 3.41,0.81 4.5,2.09C13.09,3.81 14.76,3 16.5,3 19.58,3 22,5.42 22,8.5c0,3.78 -3.4,6.86 -8.55,11.54L12,21.35z"/>
</vector>

Затем в вашем коде переключайтесь между двумя файламикогда пользователь нажимает:

  ibWhishlist.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
               ibWhishlist.setImageResource(R.drawable.ic_heart_filled);
            }
        });

Другой способ - использовать одну из готовых библиотек. RichPathAnimator одна из лучших библиотек, она поддерживает изменение цвета векторов, ширину обводки и даже анимацию векторной графики во время выполнения.

Как ее использовать? Во-первых,добавьте библиотечную зависимость в ваше приложение build.gradle. Затем в вашем vector.xml дайте имя пути, который вы хотите изменить, так:

<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:name="heartPath1"
            android:fillColor="#00000000"
            android:pathData="M12,21.35l-1.45,-1.32C5.4,15.36 2,12.28 2,8.5 2,5.42 4.42,3 7.5,3c1.74,0 3.41,0.81 4.5,2.09C13.09,3.81 14.76,3 16.5,3 19.58,3 22,5.42 22,8.5c0,3.78 -3.4,6.86 -8.55,11.54L12,21.35z"
            android:strokeWidth="1"
            android:strokeColor="#000" />
</vector>

В вашем макете замените Imagebutton на com.richpath.RichPathView и внутри атрибута vector передайте ваш векторный ресурс в этомtag:

<com.richpath.RichPathView
        android:id="@+id/heartView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:vector="@drawable/ic_heart" />

В вашем Activity получите ссылку на richpathview, затем позвоните findRichPathByName(YOUR_PATH_NAME)

RichPathView heartView = findViewById(R.id.heartView);
//Providing the path name that you add to your vector,
//in our example it's 'heartPath1'.
RichPath path= heartView.findRichPathByName("heartPath1");
//Set on heart path click listener.
path.setOnPathClickListener(new RichPath.OnPathClickListener() {
       @Override
       public void onClick(RichPath richPath) {
       //Change the path color.
       richPath.setFillColor(Color.RED);
       //Change stroke width to zero.
       richPath.setStrokeWidth(0);
    }
});

Если не хотите использовать RichPathView вместоваш ImageView или ImageButton, и вы хотите изменить какие-то вещи в вашем векторном пути, затем рассмотрите возможность использования VectorChildFinder .

Answer 2

Программно вы можете изменить цвет векторного значка, но вы можете использовать только один цвет. Поскольку в вашем случае цвет значка сердца заполняет фон, поэтому ваш код меняет границу значка.

Вы можете взять 2 вектора для рисования, чтобы решить вашу проблему (только одна возможность)

Вы можетепроверьте также эту ссылку, Как изменить цвет векторного рисованного контура при нажатии кнопки