Name of Student: Devendra Suresh Mourya

Roll Number: 35 LAB Assignment Number: 6

Title of LAB Assignment: To perform the animation on an image and to apply various
filters on an image.

DOP: 10-10-2024 DOS: 10-10-2024

CO Mapped: CO2, PO Mapped: PO2, Signature:

CO4 PO3, PO5, PSO1,
PSO2
Name: Devendra Suresh Mourya SYMCA/A Roll No: 35

Practical No. 6
Aim: To perform the animation on an image and to apply various filters on an image.

Description:

Animation and Filtering on Images in Android: Detailed Theory

1. Image Animation in Android

Animations in Android serve to enhance user interaction and visual storytelling within an application. By
applying various animations to images, developers can create a more engaging user experience. Here
are the key concepts and techniques involved in image animations:

Types of Animations:

 View Animations: Android provides a framework to animate properties of views such as

position, size, rotation, and transparency. View animations include:
 Alpha Animation: Changes the transparency of the view, allowing it to fade in or out.
 Scale Animation: Alters the size of the view, creating a zoom effect.
 Translate Animation: Moves the view from one location to another on the screen.
 Rotate Animation: Rotates the view around a specified pivot point.
 Property Animations: Introduced in Android 3.0 (Honeycomb), property animations offer more
flexibility and control. They can animate any property of any object, allowing for smoother and
more complex animations. Key classes include:
 ObjectAnimator: Directly animates specific properties of an object.
 AnimatorSet: Combines multiple animations and plays them together or sequentially.

Implementation of Animations:

 Animations can be defined in XML files or programmatically in Java/Kotlin.

 Developers can customize animation durations, interpolators (for speed variations), and listener
callbacks (to respond when an animation ends).
 Animation can be applied to transitions, interactions, or loading sequences, significantly
improving the overall user experience.

Use Cases for Image Animations:

 Gallery Applications: Smooth transitions between images enhance visual appeal.

 Loading Indicators: Animated images can indicate loading status, keeping users engaged.
 User Feedback: Animations in response to user actions (e.g., tapping an image) can provide
immediate feedback.

2. Image Filtering in Android

Name: Devendra Suresh Mourya SYMCA/A Roll No: 35

Image filtering is the process of altering the visual characteristics of an image. Filters can be applied to
modify colors, enhance details, or create artistic effects. In Android, image filtering can be performed
using various techniques and libraries.

Types of Filters:

 Color Filters: Modify the color properties of an image, including hue, saturation, and brightness.
Common types of color filters include:
 Grayscale Filter: Converts color images into shades of gray, removing color information
and emphasizing form and texture.
 Sepia Filter: Adds a warm, brown tone to images, giving them an antique or nostalgic
feel.
 Invert Filter: Reverses the colors in an image, producing a negative effect.
 Blur Filters: Soften the details in an image, which can be useful for creating backgrounds or
focusing attention on specific UI elements.
 Gaussian Blur: A widely used technique that blurs an image based on a Gaussian
function, creating a smooth transition between colors.
 Box Blur: A simpler form of blurring that averages pixels within a defined square area.
 Image Processing Libraries: Various libraries such as OpenGL ES, RenderScript, or Android’s built-
in bitmap processing can be used to apply filters efficiently, especially for high-performance
applications.

Implementation of Filters:

 Filters can be applied programmatically using image processing libraries or by manipulating

bitmap pixels.
 Developers can also create custom filters by defining specific algorithms to modify pixel data.
 Filtering is often combined with animations to create dynamic effects, such as applying a filter
while an image transitions or responds to user input.

Use Cases for Image Filtering:

 Photo Editing Applications: Users can apply filters to enhance their images, offering features like
cropping, rotating, and color adjustments.
 Social Media Apps: Instant filtering allows users to modify images before sharing them,
contributing to user engagement and content creation.
 Artistic Effects: Filters can transform standard images into artistic representations, appealing to
users looking for creativity.
Name: Devendra Suresh Mourya SYMCA/A Roll No: 35

A) Perform the following animation on the image:

1. Move.
2. Rotate.
3. Expand.

B) Apply the following effects on the image:

1. Brightness.
2. Darkness.
3. Grayscale.

Code:

MainActivity.java

package com.example.prac6;

import android.animation.ObjectAnimator;
import android.graphics.ColorMatrix;
import android.graphics.ColorMatrixColorFilter;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.SeekBar;
import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

private ImageView imageView;

private SeekBar brightnessSeekBar;
private SeekBar darknessSeekBar;
private SeekBar grayscaleSeekBar;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

imageView = findViewById(R.id.imageView);
brightnessSeekBar = findViewById(R.id.brightnessSeekBar);
darknessSeekBar = findViewById(R.id.darknessSeekBar);
grayscaleSeekBar = findViewById(R.id.grayscaleSeekBar);
Button moveBtn = findViewById(R.id.moveBtn);
Button rotateBtn = findViewById(R.id.rotateBtn);
Button expandBtn = findViewById(R.id.expandBtn);
Name: Devendra Suresh Mourya SYMCA/A Roll No: 35

// Set listeners for SeekBars

brightnessSeekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
@Override
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
applyEffects();
}

@Override
public void onStartTrackingTouch(SeekBar seekBar) { }

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

darknessSeekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
@Override
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
applyEffects();
}

@Override
public void onStartTrackingTouch(SeekBar seekBar) { }

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

grayscaleSeekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
@Override
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
applyEffects();
}

@Override
public void onStartTrackingTouch(SeekBar seekBar) { }

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

// Move animation
moveBtn.setOnClickListener(v -> {
ObjectAnimator moveAnimator = ObjectAnimator.ofFloat(imageView, "translationX", 0f, 200f);
Name: Devendra Suresh Mourya SYMCA/A Roll No: 35

moveAnimator.setDuration(1000);
moveAnimator.start();
});

// Rotate animation
rotateBtn.setOnClickListener(v -> {
ObjectAnimator rotateAnimator = ObjectAnimator.ofFloat(imageView, "rotation", 0f, 180f);
rotateAnimator.setDuration(1000);
rotateAnimator.start();
});

// Expand animation
expandBtn.setOnClickListener(v -> {
ObjectAnimator scaleXAnimator = ObjectAnimator.ofFloat(imageView, "scaleX", 1f, 2f);
ObjectAnimator scaleYAnimator = ObjectAnimator.ofFloat(imageView, "scaleY", 1f, 2f);
scaleXAnimator.setDuration(1000);
scaleYAnimator.setDuration(1000);
scaleXAnimator.start();
scaleYAnimator.start();
});
}

private void applyEffects() {

ColorMatrix matrix = new ColorMatrix();

// Brightness effect (1.0 is the default value, 0.0 is black)

float brightnessValue = (float) brightnessSeekBar.getProgress() / 100;
matrix.setScale(brightnessValue, brightnessValue, brightnessValue, 1);

// Darkness effect
float darknessValue = (float) darknessSeekBar.getProgress() / 100;
float adjustedBrightness = brightnessValue - darknessValue / 100f;
matrix.setScale(adjustedBrightness, adjustedBrightness, adjustedBrightness, 1);

// Grayscale effect
float grayscaleValue = (float) grayscaleSeekBar.getProgress() / 100;
ColorMatrix grayMatrix = new ColorMatrix();
grayMatrix.setSaturation(1 - grayscaleValue);

// Combine matrices
matrix.postConcat(grayMatrix);

// Apply the combined color filter to the ImageView

imageView.setColorFilter(new ColorMatrixColorFilter(matrix));
Name: Devendra Suresh Mourya SYMCA/A Roll No: 35

}
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="16dp">

<ImageView
android:id="@+id/imageView"
android:layout_width="306dp"
android:layout_height="362dp"
android:layout_alignParentStart="true"
android:layout_alignParentEnd="true"
android:layout_marginStart="66dp"
android:layout_marginEnd="71dp"
android:src="@drawable/img" />

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center"
android:layout_below="@id/imageView"
android:layout_marginTop="20dp">

<Button
android:id="@+id/moveBtn"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Move"
android:layout_weight="1"
android:layout_marginRight="8dp" />

<Button
android:id="@+id/rotateBtn"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Rotate"
android:layout_weight="1"
android:layout_marginRight="8dp" />
Name: Devendra Suresh Mourya SYMCA/A Roll No: 35

<Button
android:id="@+id/expandBtn"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Expand"
android:layout_weight="1" />
</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/imageView"
android:layout_marginTop="113dp"
android:layout_marginBottom="20dp"
android:orientation="vertical">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="Brightness"
android:textSize="16sp" />

<SeekBar
android:id="@+id/brightnessSeekBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:max="200"
android:progress="100" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="Darkness"
android:textSize="16sp" />

<SeekBar
android:id="@+id/darknessSeekBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:max="100"
android:progress="0" />
Name: Devendra Suresh Mourya SYMCA/A Roll No: 35

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="Grayscale"
android:textSize="16sp" />

<SeekBar
android:id="@+id/grayscaleSeekBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:max="100"
android:progress="0" />
</LinearLayout>

</RelativeLayout>
Name: Devendra Suresh Mourya SYMCA/A Roll No: 35

Output:
Name: Devendra Suresh Mourya SYMCA/A Roll No: 35
Name: Devendra Suresh Mourya SYMCA/A Roll No: 35
Name: Devendra Suresh Mourya SYMCA/A Roll No: 35