Flood Fill Algorithm Visualization in Android App

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. 

Create a New Project in Android Studio

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

<?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

<?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.

Java

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"));
    }
}

Output: