Saturday, February 21, 2015

Various effect of PorterDuff.Mode when using setColorFilter() on ImageView

Last post show a simple example to "Colorize ImageView, using setColorFilter() with Mode.MULTIPLY".  Actually, we have a number of other PorterDuff.Mode. This example show the effects of various PorterDuff.Mode.


package com.example.androidimageview;

import android.support.v7.app.ActionBarActivity;
import android.graphics.PorterDuff;
import android.graphics.PorterDuff.Mode;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemSelectedListener;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.SeekBar;
import android.widget.SeekBar.OnSeekBarChangeListener;
import android.widget.Spinner;
import android.widget.TextView;

public class MainActivity extends ActionBarActivity {
 
 TextView textTitle;
 ImageView image1;
 SeekBar barR, barG, barB, barAlpha;
 Spinner spinnerMode;
 
 Mode[] modeValues;
 String[] modeName;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        textTitle = (TextView)findViewById(R.id.title);
        image1 = (ImageView)findViewById(R.id.image1);
     barR = (SeekBar)findViewById(R.id.r);
     barG = (SeekBar)findViewById(R.id.g);
     barB = (SeekBar)findViewById(R.id.b);
     barAlpha = (SeekBar)findViewById(R.id.alpha);
     
     barR.setOnSeekBarChangeListener(myOnSeekBarChangeListener);
     barG.setOnSeekBarChangeListener(myOnSeekBarChangeListener);
     barB.setOnSeekBarChangeListener(myOnSeekBarChangeListener);
     barAlpha.setOnSeekBarChangeListener(myOnSeekBarChangeListener);
     
     //default color
     int defaultColor = barAlpha.getProgress() * 0x1000000
    + barR.getProgress() * 0x10000
    + barG.getProgress() * 0x100
    + barB.getProgress();
  image1.setColorFilter(defaultColor, Mode.MULTIPLY);
  
  prepareMode();
  spinnerMode = (Spinner) findViewById(R.id.selmode);
  ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
    android.R.layout.simple_spinner_item, modeName);
  adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
  spinnerMode.setAdapter(adapter);
  spinnerMode.setOnItemSelectedListener(myOnItemSelectedListener);
    }
    
    OnItemSelectedListener myOnItemSelectedListener = new OnItemSelectedListener(){

  @Override
  public void onItemSelected(AdapterView<?> parent, View view,
    int position, long id) {
   updateMode();
  }

  @Override
  public void onNothingSelected(AdapterView<?> parent) {}};

    OnSeekBarChangeListener myOnSeekBarChangeListener = new OnSeekBarChangeListener(){

  @Override
  public void onProgressChanged(SeekBar seekBar, int progress,
    boolean fromUser) {
   updateMode();
  }

  @Override
  public void onStartTrackingTouch(SeekBar seekBar) {}

  @Override
  public void onStopTrackingTouch(SeekBar seekBar) {} 
    };
    
    private void updateMode(){
     int selectedModePos = spinnerMode.getSelectedItemPosition();
     Mode selectedMode = modeValues[selectedModePos];
     //Colorize ImageView
  int newColor = barAlpha.getProgress() * 0x1000000
    + barR.getProgress() * 0x10000
    + barG.getProgress() * 0x100
    + barB.getProgress();
  image1.setColorFilter(newColor, selectedMode);
    }
    
    private void prepareMode(){
     
     modeValues = PorterDuff.Mode.values();
     
     modeName = new String[modeValues.length];
  
  for(int i=0; i<modeValues.length; i++){
   modeName[i] = modeValues[i].name();
  }
    }
}

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.androidimageview.MainActivity" >

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:autoLink="web"
        android:text="http://android-er.blogspot.com/"
        android:textStyle="bold" />
    
    <Spinner
        android:id="@+id/selmode"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

    <SeekBar
        android:id="@+id/r"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:max="255"
        android:progress="255" />

    <SeekBar
        android:id="@+id/g"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:max="255"
        android:progress="255" />

    <SeekBar
        android:id="@+id/b"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:max="255"
        android:progress="255" />

    <SeekBar
        android:id="@+id/alpha"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:max="255"
        android:progress="255" />

    <ImageView
        android:id="@+id/image1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/ic_launcher" />

</LinearLayout>


download filesDownload the files.

No comments: