CODEWITHSUNDEEP
androidandroid-layoutandroid-studio
user7332813
user7332813

Reputation:

Changing color of material icons?

I downloaded a number of material icons from here:

https://material.io/icons/

I'm confused as to how I change the color of these icons as drawables. I have one Button with an icon in the drawableLeft property, and then a number of ImageButton with icons set, like so:

<Button
    android:text="Hey"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:drawableLeft="@drawable/ic_arrow_upward_black_24dp"
    android:stateListAnimator="@null" />

<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:srcCompat="@drawable/ic_arrow_downward_black_24dp"
    android:background="@null" />

How do I change the color of the icons for each?

Additionally, if the icons I downloaded are black, how can I change the color of the icons to a color with transparency?

Upvotes: 17

Views: 17493

Answers (5)

Collins Abitekaniza
Collins Abitekaniza

Reputation: 4588

You do realize All the Material Icons at https://material.io/icons/ are now available in Android studio, No need to even download them. Just right click on drawables > New > Vector Asset

You will get a dialog like

this

After click on the little Android icon, select your image and save. This will the create an xml drawable Which can be opened and edited to your liking

Here is how it will look like

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:alpha="0.8" <!--set the transparency from here -->
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">
    <path
        android:fillColor="#FF000000" <!-- Use this for setting your color -->
        android:pathData="M9.4,16.6L4.8,12l4.6,-4.6L8,6l-6,6 6,6 1.4,-1.4zM14.6,16.6l4.6,-4.6 -4.6,-4.6L16,6l6,6 -6,6 -1.4,-1.4z"/>
</vector>

Upvotes: 43

Simo
Simo

Reputation: 345

This link is great for editing icons, you can generate icons with transparent background too. hope this helps.

Upvotes: 0

Karol Jurski
Karol Jurski

Reputation: 180

If your icons are vectors, you can edit the xml file and change the android:fillColor attribute. If the icons are bitmaps, you can add android:tint attribute to the ImageButton.

Upvotes: 2

code_mc
code_mc

Reputation: 171

All of the appcompat widgets support the android:tint="@color/somecolorresource" attribute. If your activity/fragment extends AppCompatActivity/Fragment this will work for any ImageView/TextView/ImageButton/....

See: https://stackoverflow.com/a/37261384/3662251

Upvotes: 1

firegloves
firegloves

Reputation: 5709

Add this to your ImageButton in your xml layout file

android:tint="@color/black"
android:tintMode="@color/black"

Upvotes: 10

Related Questions