Изменить цвет заливки на векторный актив в Android Studio

169

Android Studio теперь поддерживает векторные активы на 21+ и будет генерировать png для более низких версий во время компиляции. У меня есть векторный актив (из значков материалов), который я хочу изменить цвет заливки. Это работает на 21+, но сгенерированные pngs не меняют цвет. Есть ли способ сделать это?

<vector android:height="48dp" android:viewportHeight="24.0"
android:viewportWidth="24.0" android:width="48dp" xmlns:android="http://schemas.android.com/apk/res/android">
<path android:fillColor="@color/primary" android:pathData="M9,16.17L4.83,12l-1.42,1.41L9,19 21,7l-1.41,-1.41z"/>

Патрик
источник

Ответы:

333

Не редактируйте векторные активы напрямую. Если вы используете вектор, который можно нарисовать в ImageButton, просто выберите цвет в android:tint.

<ImageButton
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:id="@+id/button"
        android:src="@drawable/ic_more_vert_24dp"
        android:tint="@color/primary" />
YYYY-MM-DD
источник
24
тонировка работает только на 21+ устройствах, есть ли у вас какие-либо предложения для устройств перед леденцом на палочке
mudit
12
Android: оттенок работает на всех версиях Android, начиная с APIv1. То, что вы имеете в виду, это drawableTint.
ГГГГ-ММ-ДД
31
android:tintдолжно быть послеandroid:src
EmmanuelMess
5
А что drawableLeftв Button?
Пратик Бутани
8
@mudit попробуйте использовать вектор с fillColor = "# colorvalue", не используйте ссылку @ color, потому что они работают только с SDK 21+ для векторов (поэтому не для сгенерированных PNG)
PieterAelse
95

Ты можешь это сделать.

НО вы не можете использовать ссылки @color для цветов (..lame), иначе это будет работать только для L +

<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="#FFAABB"
    android:pathData="M15.5,14h-0.79l-0.28,-0.27C15.41,12.59 16,11.11 16,9.5 16,5.91 13.09,3 9.5,3S3,5.91 3,9.5 5.91,16 9.5,16c1.61,0 3.09,-0.59 4.23,-1.57l0.27,0.28v0.79l5,4.99L20.49,19l-4.99,-5zm-6,0C7.01,14 5,11.99 5,9.5S7.01,5 9.5,5 14,7.01 14,9.5 11.99,14 9.5,14z"/>

Ursus
источник
11
Это должен быть принятый ответ! @ -цветные ссылки не работают в векторах перед леденцом на палочке (поэтому vector-
PieterAelse
5
Ссылки @color теперь могут использоваться для атрибута fillColor для всех версий Android, однако он не поддерживает списки состояний цвета.
TheIT
Похоже, что способ сделать списки векторных состояний с помощью AnimatedStateListDrawable s
gMale
1
@TheIT, что мне нужно, чтобы включить его? Кажется, не работает для меня
urSus
@PieterAelse Я не уверен, что если вы хотите использовать один и тот же актив, но с разным фоном (оттенки, как в предыдущем ответе). В вашем решении у вас будет несколько экземпляров одного и того же ресурса, но с разным цветом заливки
Антон Маков
71

Как сказано в других ответах, не редактируйте вектор, который можно нарисовать напрямую, вместо этого вы можете подкрасить код Java, например:

    mWrappedDrawable = mDrawable.mutate();
    mWrappedDrawable = DrawableCompat.wrap(mWrappedDrawable);
    DrawableCompat.setTint(mWrappedDrawable, mColor);
    DrawableCompat.setTintMode(mWrappedDrawable, PorterDuff.Mode.SRC_IN);

И для простоты я создал вспомогательный класс:

import android.content.Context;
import android.graphics.PorterDuff;
import android.graphics.drawable.Drawable;
import android.os.Build;
import android.support.annotation.ColorRes;
import android.support.annotation.DrawableRes;
import android.support.annotation.NonNull;
import android.support.v4.content.ContextCompat;
import android.support.v4.graphics.drawable.DrawableCompat;
import android.view.MenuItem;
import android.view.View;
import android.widget.ImageView;

/**
 * {@link Drawable} helper class.
 *
 * @author Filipe Bezerra
 * @version 18/01/2016
 * @since 18/01/2016
 */
public class DrawableHelper {
    @NonNull Context mContext;
    @ColorRes private int mColor;
    private Drawable mDrawable;
    private Drawable mWrappedDrawable;

    public DrawableHelper(@NonNull Context context) {
        mContext = context;
    }

    public static DrawableHelper withContext(@NonNull Context context) {
        return new DrawableHelper(context);
    }

    public DrawableHelper withDrawable(@DrawableRes int drawableRes) {
        mDrawable = ContextCompat.getDrawable(mContext, drawableRes);
        return this;
    }

    public DrawableHelper withDrawable(@NonNull Drawable drawable) {
        mDrawable = drawable;
        return this;
    }

    public DrawableHelper withColor(@ColorRes int colorRes) {
        mColor = ContextCompat.getColor(mContext, colorRes);
        return this;
    }

    public DrawableHelper tint() {
        if (mDrawable == null) {
            throw new NullPointerException("É preciso informar o recurso drawable pelo método withDrawable()");
        }

        if (mColor == 0) {
            throw new IllegalStateException("É necessário informar a cor a ser definida pelo método withColor()");
        }

        mWrappedDrawable = mDrawable.mutate();
        mWrappedDrawable = DrawableCompat.wrap(mWrappedDrawable);
        DrawableCompat.setTint(mWrappedDrawable, mColor);
        DrawableCompat.setTintMode(mWrappedDrawable, PorterDuff.Mode.SRC_IN);

        return this;
    }

    @SuppressWarnings("deprecation")
    public void applyToBackground(@NonNull View view) {
        if (mWrappedDrawable == null) {
            throw new NullPointerException("É preciso chamar o método tint()");
        }

        if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
            view.setBackground(mWrappedDrawable);
        } else {
            view.setBackgroundDrawable(mWrappedDrawable);
        }
    }

    public void applyTo(@NonNull ImageView imageView) {
        if (mWrappedDrawable == null) {
            throw new NullPointerException("É preciso chamar o método tint()");
        }

        imageView.setImageDrawable(mWrappedDrawable);
    }

    public void applyTo(@NonNull MenuItem menuItem) {
        if (mWrappedDrawable == null) {
            throw new NullPointerException("É preciso chamar o método tint()");
        }

        menuItem.setIcon(mWrappedDrawable);
    }

    public Drawable get() {
        if (mWrappedDrawable == null) {
            throw new NullPointerException("É preciso chamar o método tint()");
        }

        return mWrappedDrawable;
    }
}

Для использования просто сделайте следующее:

    DrawableHelper
            .withContext(this)
            .withColor(R.color.white)
            .withDrawable(R.drawable.ic_search_24dp)
            .tint()
            .applyTo(mSearchItem);

Или:

    final Drawable drawable = DrawableHelper
            .withContext(this)
            .withColor(R.color.white)
            .withDrawable(R.drawable.ic_search_24dp)
            .tint()
            .get();

    actionBar.setHomeAsUpIndicator(drawable);
Филипе Безерра де Соуза
источник
Привет, Филипе, спасибо за ответ. Есть ли у вас библиотека, снятый код github, где мы можем увидеть лицензию? спасибо :)
Винсент Д.
2
Нет, Висент, нет лицензии вообще. Решение настолько простое, что я думаю, что используемый здесь шаблон Builder не является необходимым. Но любой может воспользоваться этим решением и использовать его без лицензии.
Филипе Безерра де Соуза
Отличный ответ! Работает точно так, как мне нужно
Eoin
1
@VincentD. Нижний колонтитул веб-страницы SO гласит: «Пользовательские вклады лицензируются в соответствии с cc by-sa 3.0 с обязательным указанием авторства»
shelll
Это сработало для меня с некоторыми изменениями. Спасибо за помощь.
Андре Луис Рейс
36

Чтобы изменить цвет векторного изображения, вы можете напрямую использовать Android: tint = "@ color / colorAccent"

<ImageView
        android:id="@+id/ivVectorImage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_account_circle_black_24dp"
        android:tint="@color/colorAccent" />

Чтобы изменить цвет программно

ImageView ivVectorImage = (ImageView) findViewById(R.id.ivVectorImage);
ivVectorImage.setColorFilter(getResources().getColor(R.color.colorPrimary));
Рана Ранвиджай Сингх
источник
getColor () устарела
Дэвид
Как использовать его для рисования в TextView ***?
Хемант Каушик
getColor (ResId) устарела @David, но getColor(ResId, Theme)это не так. Или вы можете использовать, ResourcesCompat.getColor(getResources(), R.color.primary, null);если вам не безразлична тема ... или если ваш делегат контекста / политики является действием, вы можете сделать getTheme()для этого последнего параметра.
Мартин Маркончини
15

В настоящее время рабочим решением является android: fillColor = "# FFFFFF"

У меня ничего не получалось, кроме жесткого кодирования в векторе

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24.0"
      android:fillColor="#FFFFFF"
    android:viewportHeight="24.0">
<path
    android:fillColor="#FFFFFF"
    android:pathData="M15.5,14h-0.79l-0.28,-0.27C15.41,12.59 16,11.11 16,9.5 16,5.91 13.09,3 9.5,3S3,5.91 3,9.5 5.91,16 9.5,16c1.61,0 3.09,-0.59 4.23,-1.57l0.27,0.28v0.79l5,4.99L20.49,19l-4.99,-5zm-6,0C7.01,14 5,11.99 5,9.5S7.01,5 9.5,5 14,7.01 14,9.5 11.99,14 9.5,14z"/>

Тем не менее, fillcolor и оттенок могут работать скоро. Пожалуйста, смотрите это обсуждение для получения дополнительной информации:

https://code.google.com/p/android/issues/detail?id=186431

Кроме того, в кэш можно добавить цвета, так что удаление приложения для всех пользователей может помочь.

SiVi
источник
7

Студия Android теперь поддерживает векторы pre-lollipop. Нет преобразования PNG. Вы все еще можете изменить цвет заливки, и он будет работать.

В вашем ImageView, используйте

 app:srcCompat="@drawable/ic_more_vert_24dp"

В вашем файле Gradle,

 // Gradle Plugin 2.0+  
 android {  
   defaultConfig {  
     vectorDrawables.useSupportLibrary = true  
   }  
 }  

 compile 'com.android.support:design:23.4.0'
Сайой Валсан
источник
10
Вопрос заключается в том, «как изменить цвет заливки вектора», а не «как использовать векторный актив»
Leo Droidcoder,
5

Обновление: AppCompatподдержка

В других ответах, подозревающих, что android:tintбудет работать только на 21+ устройствах, AppCompat ( v23.2.0 и выше ) теперь обеспечивает обратно совместимую обработку атрибута tint.

Таким образом, курс действий будет использовать AppCompatImageViewи app:srcCompat(в пространстве имен AppCompat) вместо android:src(пространство имен Android).

Вот пример (AndroidX: это androidx.appcompat.widget.AppCompatImageView ;)):

<android.support.v7.widget.AppCompatImageView
        android:id="@+id/credits_material_icon"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_marginBottom="8dp"
        android:layout_marginLeft="16dp"
        android:layout_marginStart="16dp"
        android:scaleType="fitCenter"
        android:tint="#ffd2ee"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:srcCompat="@drawable/ic_dollar_coin_stack" />

И не забудьте включить поддержку рисования векторов в Gradle:

vectorDrawables.useSupportLibrary = true 
Маниш Кумар Шарма
источник
Просто обновление. В настоящее время AppCompatImageViewнаходится подandroidx.appcompat.widget.AppCompatImageView
Roc Boronat
2

Добавьте эту библиотеку в Gradle, чтобы включить рисование векторных цветов на старых устройствах Android.

compile 'com.android.support:palette-v7:26.0.0-alpha1'

и повторно синхронизировать Gradle. Я думаю, что это решит проблему.

Сиддхартха Маджи
источник
2

Если векторы не показывают индивидуально установленные цвета с использованием fillColor, тогда им может быть задан параметр виджета по умолчанию.

Попробуйте добавить файл app:itemIconTint="@color/lime"activity_main.xml, чтобы установить тип цвета по умолчанию для значков виджета.

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:openDrawer="start">

    <include
        layout="@layout/app_bar_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/nav_header_main"
        app:itemIconTint="@color/lime"
        app:menu="@menu/activity_main_drawer" />

</android.support.v4.widget.DrawerLayout>

VectorDrawable @ developers.android

Lubi
источник
В Android studio 3.6 измените в svg xml это поле: android: fillColor = "# FFFFC400"
a_subscriber
1

если вы ищете поддержку старой версии pre lolipop

использовать тот же код XML с некоторыми изменениями

вместо нормального ImageView --> AppCompatImageView

вместо того android:src --> app:srcCompat

вот пример

<android.support.v7.widget.AppCompatImageView
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:id="@+id/button"
        app:srcCompat="@drawable/ic_more_vert_24dp"
        android:tint="@color/primary" />

не забудьте обновить свой gradle как @ Sayooj Valsan упоминание

// Gradle Plugin 2.0+  
 android {  
   defaultConfig {  
     vectorDrawables.useSupportLibrary = true  
   }  
 }  

 compile 'com.android.support:design:23.4.0'

Замечание Любому используемому вектору никогда не дают ссылку на ваш цвет, как этот, android:fillColor="@color/primary"дает его шестнадцатеричное значение.

Мина Фаузи
источник
почему никогда не использовать @colorдля fillcolor?
HoseinIT
0

Для тех, кто не использует ImageView, следующее работает для меня на равнине View(и, следовательно, поведение должно повторяться на любом виде)

<View
    android:background="@drawable/ic_reset"
    android:backgroundTint="@color/colorLightText" />
Bonton255
источник