Given a 2D screen input[][] where each input[i][j] is an integer representing the color of that pixel, also given the location of a pixel (X, Y) and a color C, the task is to replace the color of the given pixel and all the adjacent same-colored pixels with the given color.
Example: In MS-Paint, when we take the brush to a pixel and click, the color of the region of that pixel is replaced with a newly selected color. Following is the problem statement to do this task.
Read more here: Flood Fill Algorithm
Implementation of Flood Fill Algorithm Visualization in Android Studio using Java
We will be creating an Android app in which we will be visualizing the algorithm and how it works inside it. Below is the sample video in which you will get a basic idea of what we are going to do in this article. Not that we are using Java language for building this project.
Step-by-Step Implementation
Step 1: Create a New Project
Open Android Studio and create a new Android project there. Then set the project name and project language as Java. Also, change the package name as well.
.jpg)
Step 2: Create customized button background
Create a new button_background.xml at this given path
Algorithm-Visualizer-Android-App/app/src/main/res/drawable
Then, code this at button_background.xml
<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<corners android:radius="12dp"/>
<gradient
android:startColor="#0148A4"
android:endColor="#0148A4" />
</shape>
</item>
</selector>
Step 3: Create and design the layout file
Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:layout_gravity="center_horizontal"
android:id="@+id/buttonlayout"
android:orientation="horizontal">
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_marginTop="25dp"
android:layout_gravity="center_horizontal"
android:orientation="horizontal">
<androidx.appcompat.widget.AppCompatButton
android:layout_width="30dp"
android:layout_height="30dp"
android:background="#deffe7"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Visited Cell"
android:textSize="18sp"
android:textStyle="bold"
android:textColor="@android:color/background_dark"
android:layout_marginStart="15dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="3"
android:textSize="25sp"
android:textStyle="bold"
android:textColor="#283593"
android:layout_marginStart="30dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="newColor"
android:textSize="18sp"
android:textStyle="bold"
android:textColor="@android:color/background_dark"
android:layout_marginStart="15dp"/>
</LinearLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="30dp"
android:textSize="16sp"
android:text="In MS-Paint, when we take the brush to a pixel and click, the color of the region of that pixel is replaced with a new selected color. Following is the problem statement to do this task. "/>
<androidx.appcompat.widget.AppCompatButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:background="@color/purple_500"
android:layout_marginTop="10dp"
android:onClick="Start"
android:textSize="18sp"
android:textColor="@android:color/white"
android:text="Start"
android:textAllCaps="false"/>
</LinearLayout>
Step 4: Working with MainActivity.java File
Go to the MainActivity.java file and refer to the following code. Below is the code for the MainActivity.java file.
package algorithmbyamit.amit.algorithmbyamitapp;
import androidx.appcompat.app.AppCompatActivity;
import android.graphics.Color;
import android.os.Bundle;
import android.os.Handler;
import android.os.Looper;
import android.util.TypedValue;
import android.view.Gravity;
import android.view.View;
import android.widget.Button;
import android.widget.LinearLayout;
public class MainActivity extends AppCompatActivity {
Button[][] bttn = new Button[8][8];
Boolean[][] vis = new Boolean[8][8];
int mat[][] = {{1, 1, 1, 1, 1, 1, 1, 1},
{1, 1, 1, 1, 1, 1, 0, 0},
{1, 0, 0, 1, 1, 0, 1, 1},
{1, 2, 2, 2, 2, 0, 1, 0},
{1, 1, 1, 2, 2, 0, 1, 0},
{1, 1, 1, 2, 2, 2, 2, 0},
{1, 1, 1, 1, 1, 2, 1, 1},
{1, 1, 1, 1, 1, 2, 2, 1},
};
int sr = 4, sc = 4, color = 3;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_graph);
for(int i=0;i<8;i++){
for(int j=0;j<8;j++){
vis[i][j]=false;
}
}
for(int j=0;j<8;j++) {
for(int i=0;i<8;i++){
bttn[j][i] = new Button(this);
bttn[j][i].setLayoutParams (new LinearLayout.LayoutParams(100, LinearLayout.LayoutParams.WRAP_CONTENT));
bttn[j][i].setText(String.valueOf(mat[j][i]));
bttn[j][i].setTextSize(TypedValue.COMPLEX_UNIT_PX, 40);
bttn[j][i].setTextColor(Color.parseColor("#a8a8a8"));
bttn[j][i].setBackgroundColor(Color.WHITE);
}
}
LinearLayout linear = (LinearLayout)findViewById(R.id.buttonlayout);
linear.setOrientation(LinearLayout.VERTICAL);
LinearLayout.LayoutParams params2 = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
params2.gravity = Gravity.CENTER;
linear.setLayoutParams(params2);
for(int j=0;j<8;j++){
LinearLayout layout2 = new LinearLayout(GraphActivity.this);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, 100);
layout2.setLayoutParams(params);
for (int i = 0; i < 8; i++) {
layout2.addView(bttn[j][i]);
}
linear.addView(layout2);
}
}
private void late(int sr, int sc, int[][] mat, int color, Boolean[][] vis, int i){
final Handler handler = new Handler(Looper.getMainLooper());
handler.postDelayed(new Runnable() {
@Override
public void run() {
// Do something after
dfs(sr,sc,mat,color,vis,i);
}
}, 1500);
}
private void dfs(int sr, int sc, int[][] mat, int color, Boolean[][] vis, int i) {
vis[sr][sc]=true;
mat[sr][sc]=color;
bttn[sr][sc].setText(String.valueOf(color));
bttn[sr][sc].setTextColor(Color.parseColor("#FF283593"));
int[] delRow ={-1,0,+1,0};
int[] delCol ={0,+1,0,-1};
for(int p=0;p<4;p++){
int nrow=sr+delRow[p];
int ncol=sc+delCol[p];
if(nrow>=0&&nrow<8&&ncol>=0&&ncol<8&&!vis[nrow][ncol]){
bttn[nrow][ncol].setBackgroundColor(Color.parseColor("#deffe7"));
}
if(nrow>=0&&nrow<8&&ncol>=0&&ncol<8
&&mat[nrow][ncol]==i&&!vis[nrow][ncol]){
late(nrow,ncol,mat,color,vis,i);
}
}
}
public void Start(View view) {
late(sr,sc,mat,color,vis,mat[sr][sc]);
bttn[sr][sc].setBackgroundColor(Color.parseColor("#deffe7"));
}
}