Monday, February 16, 2015

Set opacity (Alpha) of ImageView and background

This example show how to change opacity (Alpha) of ImageView and its background.


package com.example.androidimageview;

import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.widget.ImageView;
import android.widget.SeekBar;
import android.widget.SeekBar.OnSeekBarChangeListener;
import android.widget.TextView;


public class MainActivity extends ActionBarActivity {
 
 TextView textTitle;
 ImageView image1, image2, image3;
 SeekBar opacityBar, backgroundOpacityBar;

    @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);
        image2 = (ImageView)findViewById(R.id.image2);
        image3 = (ImageView)findViewById(R.id.image3);
     opacityBar = (SeekBar)findViewById(R.id.opacity);
     backgroundOpacityBar = (SeekBar)findViewById(R.id.backgroundopacity);
     
     image1.setBackgroundColor(0xFFff0000);
     image2.setBackgroundColor(0xFFff0000);
     image3.setBackgroundColor(0xFFff0000);
     
     opacityBar.setOnSeekBarChangeListener(new OnSeekBarChangeListener(){

   @Override
   public void onProgressChanged(SeekBar seekBar, int progress,
     boolean fromUser) {
    //setAlpha (float alpha)
    //alpha between 0 and 1
    textTitle.setAlpha((float)progress/255);
    
    image1.setAlpha((float)progress/255);
    
    //setAlpha (int alpha) deprecated in API level 16.
    image2.setAlpha(progress);

    //require API level 16
    image3.setImageAlpha(progress);
   }

   @Override
   public void onStartTrackingTouch(SeekBar seekBar) {
    // TODO Auto-generated method stub
    
   }

   @Override
   public void onStopTrackingTouch(SeekBar seekBar) {
    // TODO Auto-generated method stub
    
   }});
     
     backgroundOpacityBar.setOnSeekBarChangeListener(new OnSeekBarChangeListener(){

   @Override
   public void onProgressChanged(SeekBar seekBar, int progress,
     boolean fromUser) {
    
    int backgroundOpacity = progress * 0x01000000;
    
    image1.setBackgroundColor(backgroundOpacity + 0xff0000);
       image2.setBackgroundColor(backgroundOpacity + 0xff0000);
       image3.setBackgroundColor(backgroundOpacity + 0xff0000);
   }

   @Override
   public void onStartTrackingTouch(SeekBar seekBar) {
    // TODO Auto-generated method stub
    
   }

   @Override
   public void onStopTrackingTouch(SeekBar seekBar) {
    // TODO Auto-generated method stub
    
   }});
    }

}

<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" />

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

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

</LinearLayout>


Next:
Colorize ImageView, using setColorFilter()

No comments:

Post a Comment