Wednesday, June 11, 2014

Set opacity/alpha of Button or drawable

Example to change opacity/alpha of Button or its CompoundDrawables, also show how to display CompoundDrawables on Button programmatically.


Example code:

MainActivity.java
package com.example.androidsetimageopacity;

import android.app.Activity;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.widget.Button;
import android.widget.SeekBar;
import android.widget.SeekBar.OnSeekBarChangeListener;

public class MainActivity extends Activity {
 
 SeekBar barOpacityButton;
 SeekBar barOpacityDrawableLeft, barOpacityDrawableTop, 
   barOpacityDrawableRight, barOpacityDrawableBottom;
 Button button;
 
 Drawable drawableLeft, drawableTop, drawableRight, drawableBottom;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  
  drawableLeft = getResources()
    .getDrawable(android.R.drawable.ic_menu_call);
  drawableTop = getResources()
    .getDrawable(android.R.drawable.ic_menu_agenda);
  drawableRight = getResources()
    .getDrawable(android.R.drawable.ic_menu_compass);
  drawableBottom = getResources()
    .getDrawable(android.R.drawable.ic_menu_camera);

  button = (Button)findViewById(R.id.button);
  
  //display CompoundDrawables on Button programmatically
  button.setCompoundDrawablesWithIntrinsicBounds(
   drawableLeft, drawableTop, drawableRight, drawableBottom);
  
  barOpacityButton = 
    (SeekBar)findViewById(R.id.opacitybutton);
  barOpacityDrawableLeft = 
    (SeekBar)findViewById(R.id.opacitydrawableleft);
  barOpacityDrawableTop = 
    (SeekBar)findViewById(R.id.opacitydrawabletop);
  barOpacityDrawableRight = 
    (SeekBar)findViewById(R.id.opacitydrawableright);
  barOpacityDrawableBottom = 
    (SeekBar)findViewById(R.id.opacitydrawablebottom);

  barOpacityButton.setOnSeekBarChangeListener(
    barOpacityButtonOnSeekBarChangeListener);
  
  barOpacityDrawableLeft.setOnSeekBarChangeListener(
    barOpacityDrawableOnSeekBarChangeListener);
  barOpacityDrawableTop.setOnSeekBarChangeListener(
    barOpacityDrawableOnSeekBarChangeListener);
  barOpacityDrawableRight.setOnSeekBarChangeListener(
    barOpacityDrawableOnSeekBarChangeListener);
  barOpacityDrawableBottom.setOnSeekBarChangeListener(
    barOpacityDrawableOnSeekBarChangeListener);
 }
 
 OnSeekBarChangeListener barOpacityButtonOnSeekBarChangeListener =
  new OnSeekBarChangeListener(){

   @Override
   public void onProgressChanged(SeekBar seekBar, int progress,
     boolean fromUser) {
    float alpha = (float)progress/(float)seekBar.getMax();
    button.setAlpha(alpha); //for API Level 11+
   }

   @Override
   public void onStartTrackingTouch(SeekBar seekBar) {}

   @Override
   public void onStopTrackingTouch(SeekBar seekBar) {}
   
 };
 
 OnSeekBarChangeListener barOpacityDrawableOnSeekBarChangeListener =
  new OnSeekBarChangeListener(){
  
   @Override
   public void onProgressChanged(SeekBar seekBar, int progress,
     boolean fromUser) {

    drawableLeft.setAlpha(
      barOpacityDrawableLeft.getProgress());
    drawableTop.setAlpha(
      barOpacityDrawableTop.getProgress());
    drawableRight.setAlpha(
      barOpacityDrawableRight.getProgress());
    drawableBottom.setAlpha(
      barOpacityDrawableBottom.getProgress());

   }

   @Override
   public void onStartTrackingTouch(SeekBar seekBar) {}

   @Override
   public void onStopTrackingTouch(SeekBar seekBar) {}
    
 };

}

activity_main.xml
<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.androidsetimageopacity.MainActivity" >

    <TextView
        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/opacitybutton"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:max="100"
        android:progress="100"/>
    <SeekBar
        android:id="@+id/opacitydrawableleft"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:max="255"
        android:progress="255"/>
    <SeekBar
        android:id="@+id/opacitydrawabletop"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:max="255"
        android:progress="255"/>
    <SeekBar
        android:id="@+id/opacitydrawableright"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:max="255"
        android:progress="255"/>
    <SeekBar
        android:id="@+id/opacitydrawablebottom"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:max="255"
        android:progress="255"/>
    <TextView
        android:id="@+id/opacitysetting"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Opacity Button"/>

</LinearLayout>


No comments: