Drawable selector with same image but different opacity

Question

I want to save app space with next idea. But I'm not sure if it possible.

I want to have selector:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:drawable="@drawable/arrow_forward" android:state_enabled="true" />
  <item android:drawable="@drawable/arrow_forward_disabled" android:state_enabled="false"/>
</selector>

Where arrow_forward is png image and arrow_forward_disabled is same image but with 70% opacity. I've tried to achieve it with layer-list drawable but without success. Is there solution?

score 5 · Answer 1 · edited May 23 '17 at 12:00

There is no way to apply opacity in xml. It is only possible using two images.

-

You are using PNG files, you will have to create 2 png's with different opacities.

1º PNG - Enable. 100% opacity.

2º PNG - Disabled. 70% opacity.

After this, you need to create a selector XML with 2 different states:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="false" android:drawable="@drawable/btn_disabled" />
    <item android:drawable="@drawable/btn_active" />
</selector>

You can also use shape buttons with different opacity using the alpha of ARGB (#AARRGGBB). Example: # 80FFFFFF (50% opacity) (Source)

Example:

Enabled:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <corners android:radius="20dp"/>
    <solid android:color="#002aff" />
</shape>

Disabled (70% opacity: #b3002aff):

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <corners android:radius="20dp"/>
    <solid android:color="#b3002aff" />
</shape>

Hi @Alisson, thank you for answer. I know that I could use two images. The question was if I could use one image and define some opacity in xml drawable — Eugen Martynov, Jan 27 '15 at 08:31
There is no way to apply opacity in xml. It is only possible using two images. — Alisson M. Vargas, Jan 27 '15 at 12:46

score 2 · Accepted Answer · answered Jan 28 '15 at 13:34

If you are using a ShapeDrawable, instead of a PNG, you CAN effect the colors you are using to set different Opacities, I will outline some options:

If you are using a ShapeDrawable, you could assign different opacities using the color (the first 2 chars in the color string are opacity, ie. #ffbada55 is no opacity green, and #80bada55 is a green with some opacity)
This wouldn't work for opacity, but you could apply a color filter using the API that exists (this may be a variation on your effect based on color, but still wouldn't allow you to change the opacity of your PNG) Color Filter API
Create custom PNGs, each with the opacity you need

I think (like the other answers) that Option #3 is simplest, and will work the best.

Bottom line, you can't change the opacity of a PNG resource using XML, you could create a Drawable (maybe use it as a background for your PNG), and you would be able to change the opacity of that using it's color resource definition.

Drawable selector with same image but different opacity

2 Answers2