How to make blink like animation by changing color of imageview?

Question

I am making a music game. If the user press hint button to know which key to press. I want to show a blink effect on the ImageView by changing the bitmap color programmatically from one color to another repeatedly(switching between two colors) for 1 second.

This is how I am changing the color of bitmap programmatically:

nextImage.setColorFilter(Color.parseColor("#FFFFFF"), PorterDuff.Mode.MULTIPLY);

I think we can use Handler for this but I am not getting how to product blink effect.

Answer 1

you can use handler

Structure
 -onClick 
   -change color
  wait 1 second
   -change color
   action() //what click shuld do on btn

Answer 2

You can achieve what you want is like this.

create 3 drawable files.

first drawable

//color1.xml

 <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
 android:shape="rectangle">
 <solid android:color="#hexcodeofcolor1" />
 <corners android:bottomRightRadius="8dip"
    android:bottomLeftRadius="8dip"  
    android:topRightRadius="8dip"
    android:topLeftRadius="8dip"/>
 </shape>

color2.xml

 <?xml version="1.0" encoding="utf-8"?>
 <shape xmlns:android="http://schemas.android.com/apk/res/android" 
  android:shape="rectangle">
 <solid android:color="#hexcodeofcolor2" />
 <corners android:bottomRightRadius="8dip"
    android:bottomLeftRadius="8dip"  
    android:topRightRadius="8dip"
    android:topLeftRadius="8dip"/>
  </shape>

imageviewtempgif.xml

  <?xml version="1.0" encoding="utf-8"?>
  <animation-list
xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="false"
android:useLevel="true">

<item
    android:drawable="@drawable/hexcodeofcolor1"
    android:duration="500"
    android:useLevel="true"/>
<item
    android:drawable="@drawable/hexcodeofcolor2"
    android:duration="500"
    android:useLevel="true"/>
  </animation-list>

And in your code

imageView.setImageResource(R.drawable.imageviewtempgif);
    ((Animatable) imgWiFi.getDrawable()).start();

Once you done with the animation you can set whatever background you want.

may be something like this.

imageView.setImageResource(R.drawable.imageviewtempgif);
    ((Animatable) imgWiFi.getDrawable()).start();
 final Handler handler = new Handler();
 handler.postDelayed(new Runnable() {
 @Override
  public void run() {
  //set to normal background.
  }
  }, 1000);

Answer 3

I achieved the blink effect by the following way:

final String[] colors = {"#00BCD4","#FFFFFF","#00BCD4","#FFFFFF","#00BCD4","#FFFFFF","#00BCD4","#FFFFFF"};
                        for(int i=0;i<8;i++){
                            final int j = i;
                            new Handler().postDelayed(new Runnable() {
                                @Override
                                public void run() {
                                    nextImage.setColorFilter(Color.parseColor(colors[j]), PorterDuff.Mode.MULTIPLY);
                                }
                            },200 * j);

Hope this might help someone else. If there are better ways of doing it. Do suggest.

Answer 4

You can achieve this blending two colors like this keep changing this two colors

/**
     * Blend {@code color1} and {@code color2} using the given ratio.
     *
     * @param ratio of which to blend. 0.0 will return {@code color1}, 0.5 will give an even blend,
     *              1.0 will return {@code color2}.
     */
    public static int blendColors(int color1, int color2, float ratio) {
        final float inverseRatio = 1f - ratio;
        float a = (Color.alpha(color1) * inverseRatio) + (Color.alpha(color2) * ratio);
        float r = (Color.red(color1) * inverseRatio) + (Color.red(color2) * ratio);
        float g = (Color.green(color1) * inverseRatio) + (Color.green(color2) * ratio);
        float b = (Color.blue(color1) * inverseRatio) + (Color.blue(color2) * ratio);
        return Color.argb((int) a, (int) r, (int) g, (int) b);
    }

Answer 5

Create a color file in res > color folder, namely icon_click_color.xml with followed code:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_focused="true" android:state_pressed="false" android:color="@color/colorDefault" />
    <item android:state_focused="true" android:state_pressed="true" android:color="@color/colorPressed" />
    <item android:state_focused="false" android:state_pressed="true" android:color="@color/colorPressed" />
    <item android:color="@color/colorDefault" />
</selector>

Then, in you ImageView, set the tint property, for example:

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:srcCompat="@drawable/ic_menu_setting"
    app:tint="@color/icon_click_color">
</ImageView>